This thread is resolved. Here is a description of the problem and solution.
Problem: Media queries in CSS do not appear to work in certain Layouts. I would like to override the maximum container width on certain pages at certain screen sizes.
Solution: There is currently a bug causing the Layouts CSS file to be loaded in different sequence on some pages. This can result in unexpected CSS changes if you target the same classes as Bootstrap. As a temporary solution, you may use more specific CSS selectors to override Bootstrap's selectors.
@media screen and (min-width: 1200px) {
.archive .container, .post-template .container, .page-template .container {
width: 1230px;
}
}
@media screen and (min-width: 1920px) {
.archive .container, .post-template .container, .page-template .container {
width: 1600px;
}
}
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 3 replies, has 2 voices.
Last updated by 7 years, 1 month ago.
Assisted by: Christian Cox.
Hi, this is related to a bug that has been reported by some other users. Our developers are working on a permanent fix that will resolve the issue. It's actually not that the styles are being ignored, it's that they're being overridden. What is happening here is that the CSS file generated by Layouts CSS is loaded in a different order on certain pages. Sometimes Bootstrap CSS is loaded before it, sometimes after it. If Layouts CSS is loaded after Bootstrap CSS, your .container styles will be applied effectively. If it's loaded before, it can be overridden by Bootstrap's CSS that defines the overall container size. You can see the results of this difference in the browser inspector - screenshots attached.
While they are working on a fix, I can make a recommendation for you that may help in the short term: use more specific selectors instead of just .container for your style targets. Bootstrap targets only .container for this width definition, so if you target with multiple class names then your styles will have more priority than Bootstrap's styles regardless of source load order. Example:
@media screen and (min-width: 1200px) {
.archive .container, .post-template .container, .page-template .container {
width: 1230px;
}
}
@media screen and (min-width: 1920px) {
.archive .container, .post-template .container, .page-template .container {
width: 1600px;
}
}
These styles will always override .container, since they are more specific. More info about that:
hidden link
