Joomla Templates Club 406,261 posts

[arjenzuidgeest Friend arjenzuidgeestJoin date: December 2012Posts: 42Downloads:156Uploads:4 Thanks: 4]

#186532

Hello, I’m using T3 v1.0.3, onePage v1.0.1 and joomla! 3.0.2 Stable [ Ember ].

In my custom.css I’ve defined some media queries

On the site the custom.css lists displays the rules without the media queries

#pakketten .introducing p.first {
font-size: 2em;
}
#pakketten .introducing h3 {
font-size: 1em;
}
#pakketten .introducing p.first {
font-size: 1.8em;
}
#pakketten .introducing h3 {
font-size: 0.9em;
}
#pakketten .introducing ul li {
font-size: 0.9em;
}
#pakketten .pakket-left, #pakketten .pakket-right {
width: 2.5%;
}
.pakket_first {
width: 30%;
}
#pakketten .introducing p.first {
font-size: 1.5em;
}
#pakketten .introducing h3 {
font-size: 0.8em;
}
#pakketten .introducing ul li {
font-size: 0.7em;
}
#pakketten .pakket-left, #pakketten .pakket-right {
width: 2.5%;
}
.pakket {
width: 23.33%;
}
#pakketten .introducing p.first {
font-size: 1em;
}
#pakketten .introducing h3 {
font-size: 0.6em;
}
#pakketten .introducing ul li {
font-size: 0.5em;
padding: 4px 0;
}
#pakketten .pakket-left, #pakketten .pakket-right {
width: 0.5%;
}
.pakket {
width: 22%;
}
.pakket_first {
width: 30%;
}
#pakketten .top p {
margin: 0;
}


This happens in the template’s debug mode as well. Where can I change this behavior?

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#489094

Hi Arjenzuidgeest,

Please clear all cache. I checked this customization on our demo site and it was working well. Please check again.

Regards

[arjenzuidgeest Friend arjenzuidgeestJoin date: December 2012Posts: 42Downloads:156Uploads:4 Thanks: 4]

#489230

I’ve cleaned the browser cache, the site’s cache, expired items but it doesn’t make a difference. I already disabled all js/css optimizer plugins. What else could I check?

[arjenzuidgeest Friend arjenzuidgeestJoin date: December 2012Posts: 42Downloads:156Uploads:4 Thanks: 4]

#489309

This is more than just a matter of refreshing the cache. To look into it further I’ve created a clean joomla 3.0 installation and used the quickstart JA Onepage for Joomla 3.0. I still see the same result, the @media lines are being stripped from the custom.css.

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#489378

Hi,

Could you provide your website url and pm me admin account, ftp info for further checks. The issue you mention seems strange.

Regards

[arjenzuidgeest Friend arjenzuidgeestJoin date: December 2012Posts: 42Downloads:156Uploads:4 Thanks: 4]

#489470

Thanks for looking into this. I’ve send you a pm with the information.

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#489490

Dear,

I checked and could see @media still existed and work properly on your site.

Regards

[arjenzuidgeest Friend arjenzuidgeestJoin date: December 2012Posts: 42Downloads:156Uploads:4 Thanks: 4]

#489543

No it doesn’t work as expected, I’ll try to explain it more carefully. If I look at the html the @media lines are indeed still in the css. The queries are defined for screen sizes < 979 px. But all rules defined in custom.css for screen sizes < 979 are still being loaded on larger screens.

This screenshot is with the media query lines commented out
http://www.noname.surfschoolitacarezinho.com/images/shot/disabled.png
http://www.noname.surfschoolitacarezinho.com/images/shot/enabled.png
This screenshot is with the media query lines enabled, but they should not be loaded since the screen is > 979.

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#489644

Dear,

Please check file custom.css again, it has wrong format

@media only screen and (min-width: 320px) {
.custom.packages .introducing p.first {font-size:1.0em;}
.custom.packages .introducing h3 {font-size:0.6em;}

.custom.packages .introducing ul li {font-size:0.5em;padding:4px 0;}
.custom.packages .pakket-left,.custom.packages .pakket-right {width:0.5%;}
.pakket {width:22.00%;}
.pakket_first {width:30%;}
.custom.packages .top p {margin:0;}
}
You should change min-width to max-width

Hope this helps.

Regards

1 user says Thank You to HeR0 for this useful post

1. arjenzuidgeest

[arjenzuidgeest Friend arjenzuidgeestJoin date: December 2012Posts: 42Downloads:156Uploads:4 Thanks: 4]

#489835

Thanks a lot, I almost can’t believe I overlooked that all this time.

[Author]

Posts