Windows 7, Internet Explorer 11 Flexbox Issue

Topic: Windows 7, Internet Explorer 11 Flexbox Issue

Paul King pro asked 7 years ago

Hi, I am having an issue specifically within Windows 7, Internet Explorer 11 wherein the flexbox content within my hero section of the site seems to shift to the right side of the screen. Example here - http://awre.com.au/home-2/ If I remove the surrounding 'container' class it centres but I obviously don't want to remove this as it expands the flexbox area and doesn't look as good. Any ideas on the issue? Thanks Paul

Add comment

Paul King pro answered 7 years ago

0 0 Best answer

Perfect Thanks - that seems to have resolved the issue!

Add comment

Rafał Rogulski free answered 7 years ago

0 0 Best answer

Hi Paul,

I find the way to fix this. In your CSS style file add:

<pre><code>.ml-0 {
   margin-left: 0 !important;
}
.mr-0 {
   margin-left: 0 !important;
}</code></pre>

Next, in your HTML file, find:

<pre><code>      <div class="container">
          <ul class="animated fadeIn offset-md-1 col-md-10">
              <li>
                  <h1 class="h1-responsive">The Australasian Waste & Recycling Expo is back in Melbourne in 2017!</h1></li>
              <li>
                  <p>The Australasian Waste & Recycling Expo (AWRE) is the most established commercial event dedicated to the Australasian waste 
                     and recycling marketplace.</p>
                  <p>The event brings together the industry to discover the latest trends, showcase innovation, network with key waste and 
                     recycling decision makers from industry and government and attend high quality practical seminars and workshops.</p>
              </li>
              <li>
                  <a target="_blank" href="http://awre.com.au/about/" class="btn btn-hero btn-lg waves-effect waves-light" rel="nofollow" style="
                      padding: 12px;
                      font-size: 16px;
                  ">Find out more</a>
              </li>
          </ul>
        </div></code></pre>

and in <code>.container</code> add this class

Please insert min. 20 characters.

Hi Paul, I find the way to fix this. In your CSS style file add:

.ml-0 {
   margin-left: 0 !important;
}
.mr-0 {
   margin-left: 0 !important;
}

Next, in your HTML file, find:

      <div class="container">
          <ul class="animated fadeIn offset-md-1 col-md-10">
              <li>
                  <h1 class="h1-responsive">The Australasian Waste & Recycling Expo is back in Melbourne in 2017!</h1></li>
              <li>
                  <p>The Australasian Waste & Recycling Expo (AWRE) is the most established commercial event dedicated to the Australasian waste 
                     and recycling marketplace.</p>
                  <p>The event brings together the industry to discover the latest trends, showcase innovation, network with key waste and 
                     recycling decision makers from industry and government and attend high quality practical seminars and workshops.</p>
              </li>
              <li>
                  <a target="_blank" href="http://awre.com.au/about/" class="btn btn-hero btn-lg waves-effect waves-light" rel="nofollow" style="
                      padding: 12px;
                      font-size: 16px;
                  ">Find out more</a>
              </li>
          </ul>
        </div>

and in .container add this class

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Paul King

Pro User 39Support score
9Questions 3Answers 0Snippets