Docs

[Basstimg]

Hi I am loosing the will to live trying to make imoportant sections of my site responsive. I have looked at alot of the forum threads etc and can’t seem to find a useful solution that make a key section look good on all devices. Tonight i discovered i can hide whole sections and was thinking about making 2 for a key area one for mobile and tablet and the other for desktop. Would this slow the site down alot ? is it a wise thing to do or cold there be potential issues ?

[Lely]

Hello There,

Thanks for posting in. It will depend on the content you were adding. If your site is image heavy and you will repeat all those images on different screen view, then yes, it will slow down your site. If not that is fine. Please also take note on improving performance by checking this link:https://community.theme.co/kb/performance/

Hope this helps.

[Basstimg]

Thanks for the reponse I suppose this is good as a last resort but aftert thinking about it further it would be ALOT of extra work and i wil have alot of video and image content.

Can i hide text blocks in section ? My thought is i i have 3 texts input and i can hide one for mobile etc it would really help the section look more balanced and even. I have tried doing this within text addon / wodget and the custom code generated did’t do anything (might have input wrong)

I would also like to conpliment this by hiding a buttom for mobile and tablet is this possible ?

Thanks

[Christian]

The Text element does not have a Hide Based on Screen Width option but you can use the visibility classes of that feature.

Here are the classes you can use in the Class field of any element:

@media (min-width: 1200px) {
.cs-hide-xl {
display: none !important
}
}
@media (min-width: 980px) and (max-width: 1199px) {
.cs-hide-lg {
display: none !important
}
}
@media (min-width: 768px) and (max-width: 979px) {
.cs-hide-md {
display: none !important
}
}
@media (min-width: 481px) and (max-width: 767px) {
.cs-hide-sm {
display: none !important
}
}
@media (max-width: 480px) {
.cs-hide-xs {
display: none !important
}
}

Thanks.

[Basstimg]

This reply has been marked as private.

[Christopher]

Hi there,

Please remove the code that you added in text class filed, you should add cs-hide-md in text class field to hide it on tablet.
In previous replay Christian gave you detail to let you know which class targets which screen size ranges.

Hope it helps.

[Basstimg]

Thanks for explaining thats fantastic and worked a treat 🙂

[Christopher]

You’re welcome.

[Author]

Posts