This thread is resolved. Here is a description of the problem and solution.
Problem: I am using a Bootstrap Grid to display some information. I have applied col-sm-9 and col-xs-12 classes to one grid item, but at mobile sizes it's not expanding to fill the width of the container. It's still at 9 columns width.
Solution: Check the CSS applied by the theme and other plugins. In this case, a media query is used to set the width of col-sm-9, but not col-xs-12. The means the col-sm-9 class is more specific than col-xs-12, breaking the grid code. Override that or remove the media query from col-sm-9.
Relevant Documentation:
https://css-tricks.com/specifics-on-css-specificity/
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 2 replies, has 2 voices.
Last updated by 5 years, 11 months ago.
Assisted by: Christian Cox.
I am trying to: create a layout where one column is hidden on a mobile and the other column in the row expands to the full width of the mobile screen
I have added the classes col-xs-12 to the first column and hidden-xs to the second.
Link to a page where the issue can be seen: hidden link
The second column is indeed hidden on a mobile but the first appears to remain as col-xs-9 so leaving a gap to its right.
I've attached screenshot of the backend layout edit with css.
Check the page source in the style tag with id "fusion-stylesheet-inline-css". There is a 75% custom width applied to .col-sm-9, with a media query, which is more specific than Bootstrap's col-xs-12 specifications:
@media (min-width: 0px)
.col-sm-9 {
width: 75%;
}
See the attachment. You should remove that code from fusion-stylesheet-inline-css, or add your own 100% width override for .col-xs-12 with a similar media query for specificity. More info about CSS specificity:
https://css-tricks.com/specifics-on-css-specificity/
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
