Set wide for mobile only

Support
#1

I’ve set my width to 79%, so I’d like to keep that for Deskop.
But for mobile I would like to 100%, so that the readability is improved, see Appendix. How can I adjust this without fundamentally changing the width.

Thank you very much for an answer.

many Greetings
Ralf

#2

Hey Ralf,

That is achievable by using simple custom CSS. Below is the code you need to add in X > Theme Options > CSS.

@media (max-width:979px) {
    .x-container.width {
        width: 100%;
    }
}

Just note that mobile screen starts from 979px which is a common portrait tablet screen size. If you want it to take effect lower than that, you can reduce 979 in the code.

Hope that helps.

#3

Hello Christian,

First of all many thanks for the quick feedback! have the code with 320 px eigefügt. Unfortunately, this does not work on all subpages.

Here it works:

and here it does not work:

Crazy, right?

Regards Ralf

#4

Hi There,

It might be the cache issue.

In your home page the CSS is:

@media (max-width:729px) {
.x-container.width{width:100%;}
}

And the sub-page the CSS is:

@media (max-width:729px) {
.x-container.width{width:90%;}
}

Please purge all the caches then check again.

Let us know how it goes!

#5

… yes, it was the cache.
You are full professionals

Thank you very much !!

#6

You are most welcome. :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.