CSS rule not applied when CSS is combined

Resolved wpwebdevj
(@wpwebdevj)

4 years, 10 months ago
I have the following CSS rule in my Generate Press child theme css.
```
@media(max-width: 991px) {
    .site-content {
        flex-direction: column;
    }	
    .site-content .content-area, .right-sidebar #right-sidebar.sidebar  {
        width: 100%;
    }	
	.inside-right-sidebar {
        display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
    	align-items: center;
	}
    .inside-right-sidebar .widget {
        flex-basis: 300px;
		border-style: solid;
		border-radius: 20px;
    }
	.inside-right-sidebar .widget:last-child {
		margin-bottom: 20px;
	}
	
}
```
With the combine css option enabled, the content area is staying at 70% width instead of changing to 100% when the screen width is less than 990px. It only changes to 100% once the width is below 768px due to another css rule.

When I load the page with the ?ao_noptimize=1 query string then the rule is applied normally.

You can verify by setting the width to ~900px and then load the page normally and with the ao_noptimize query string.

See below images showing the difference in Chrome dev tools on the front end site.

View post on imgur.com

Without combining CSS, the inline rule from the html (width: 70%) is crossed out and the css rule (width: 100%) is applied. When combining css, the CSS rule (width: 100%) is crossed out and the inline html rule (width: 70%) is applied.

I am only optimising and agregating css files, I am not aggregating inline css.

The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Author Optimizing Matters
(@optimizingmatters)

4 years, 10 months ago

your inline CSS also has .site-content .content-area{width:70%;} before the 991px mediaquery, add .site-content .content-area{width:100%;} inside the 991px block and it will probably be OK 🙂

Thread Starter wpwebdevj
(@wpwebdevj)

4 years, 10 months ago

The inline CSS .site-content .content-area{width:70%;} is added by the Generate press theme. I don’t understand what you mean by “before the 991px mediaquery, add .site-content .content-area{width:100%;} inside the 991px block and it will probably be OK”.

Thread Starter wpwebdevj
(@wpwebdevj)

4 years, 10 months ago

Just to clarify, the .site-content .content-area{width:70%;} is the default width set by the theme (content area 70% and sidebar 30%). The CSS that I added into the child theme is supposed to make the width 100% only when the width is below 991px and the right sidebar collapses to the bottom.
Plugin Author Optimizing Matters
(@optimizingmatters)

4 years, 10 months ago
try changing
```
@media(max-width: 991px) {
    .site-content {
        flex-direction: column;
    }
...
```
into
```
@media(max-width: 991px) {
    .site-content .content-area{width:100%;}
    .site-content {
        flex-direction: column;
    }
...
```
Thread Starter wpwebdevj
(@wpwebdevj)

4 years, 10 months ago

Same problem as before, the inline rule is still taking precedence when the CSS files are combined.

With Autotomize completely disabled, I noticed that my child theme css file is loaded after the html inline CSS. Most of the CSS files are loaded before the inline styles except for 2 files which are loaded after. The child theme css and another CSS file generated by the customizer are loaded after.

When CSS is combined, the combined file is called before the inline CSS.

Does this explain why the inline rule takes precedence when the CSS is combined?
Thread Starter wpwebdevj
(@wpwebdevj)

4 years, 10 months ago
Changing
```
.site-content .content-area, .right-sidebar #right-sidebar.sidebar  {
     width: 100%;
 }
```
to
```
.container .site-content .content-area, .right-sidebar #right-sidebar.sidebar  {
     width: 100%;
 }
```
seems to work.

I guess .container .site-content .content-area is a more exact match than .site-content .content-area so it’s applied even though the inline CSS appears last.

Thanks again for all your help and quick responses.
Plugin Author Optimizing Matters
(@optimizingmatters)

4 years, 10 months ago

you’re welcome 🙂

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘CSS rule not applied when CSS is combined’ is closed to new replies.