Avada theme causing Bootstrap breakpoints problem

Question

I am using Avada 5.0.6, and it seems like a breakpoint that destroys my boot grid. The mobile unlock point is 800 pixels wide. However, according to the bootstrap documentation, col-sm- * starts at 768 pixels. Therefore, my grid should work when I emulate a screen with a width of 800 pixels. But this is not so, it puts two divs on top of each other (bottom to bottom).

My HTML:

<div class="col-xs-12 col-sm-3 col-md-3 phonenumbers"> <h2>Phone numbers:</h2> <p>555-555-555</p> <p>555-555-555</p> </div> <div class="col-xs-12 col-sm-3 col-md-3 email"> <h2>Email:</h2> <p> [e-mail] </p> <p> [e-mail] </p> </div> <br> <div class="col-xs-12 col-md-12"> <h1>Connect with Us!</h1> <p></p> [contact-form-7 id="23" title="Contact Us Form"] </div> 

My CSS:

 .phonenumbers { margin-left: 35%; } .email { margin-left: 10%; } @media (max-width: 800px) { .phonenumbers { margin-left: 0; } .email { margin-left: 0; } } 

The appearance of the desktop:

Mobile view:

Answer 1

In Avada, you can configure everything, including breakpoints. By default, this does not match Bootstrap 768px , it is 800px . You can easily change it:

• In the WP Admin Sidebar, select Avada
• Select Theme Options
• In Fusioon Avada 5.0.6 in the left menu, select Responsive
• Adjust the header breakpoint and / or site content breakpoint with a selection range to suit your needs.

Answer 2

try it

 <div class="col-xs-3 col-sm-3 col-md-3 phonenumbers"> <h2>Phone numbers:</h2> <p>555-555-555</p> <p>555-555-555</p> </div> <div class="col-xs-3 col-sm-3 col-md-3 email"> <h2>Email:</h2> <p> [e-mail] </p> <p> [e-mail] </p> </div> <br> <div class="col-xs-12 col-md-12"> <h1>Connect with Us!</h1> <p></p> [contact-form-7 id="23" title="Contact Us Form"] </div> 

Live JsFiddle https://jsfiddle.net/grinmax_/uqpdb6sL/