I'm using Avada 5.0.6 and it seems that the break point that is destroying my bootstrap grid. The mobile responsiveness break point is 800 pixels wide. However, according to the bootstrap documentation col-sm-* starts at 768 pixels. So my grid should still work when I emulate a screen 800px wide. But it doesn't, it puts the two divs on top of each other (picture at the 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>info@test.ca</p> <p>careers@test.ca</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 desktop look:
The mobile look:
2 Answers
Answers 1
In Avada, you can adjust everything, including breakpoints. It's default is not matched with Bootstrap's 768px, it is 800px. You can easily change it:
- In WP Admin Sidebar select Avada
- Select Theme Options
- In Fusioon Avada 5.0.6 left-side menu select Responsive
- Adjust Header Responsive Breakpoint and/or Site Content Responsive Breakpoint with range selects to your needs.
Answers 2
Try this
<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>info@test.ca</p> <p>careers@test.ca</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/
0 comments:
Post a Comment