Site width on mobile

Support
#1

Hello Themeco-Team,

I have a Website (Theme: Pro, Version: 2.2.5, Stack: Ethos).

The website uses Fullwidth-optionw with following options:

Everything looks fine on the desktop-version. But now i want do change the site width for mobile version since there is too much gap/whitespace on the left and right side of the website.

I already found some codes here in the support forum (for example: https://theme.co/apex/forums/topic/site-width-on-mobile-devices/). But somehow they don’t work for me.

Do you have an idea how to change the site-width for mobile devices?

Best regards

Patrick

#2

Hi Patrick,

I’ve tried to check this issue, but looks like the website is down right now, check this screenshot:

Please ping us back when you sort out this issue.

Thanks.

#3

Hey @Alaa,

you are right. The server was down, but is back now :slight_smile:

#4

Hello @ammes90,

Thanks for updating the thread. :slight_smile:

You can add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .x-container.width {
    width: 80%;
    }
}

I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

For the CSS code itself, I suggest that you get started with this tutorial:

Thanks

#5

Hey, that worked perfect fo that site! Thank you sooooo much!

I have another site with the same problem - but there the code is not working. Do you know whats wrong there?
I already tried all the other stuff i found at the support forum but nothing works.

#6

Guys, i found the mistake - I also crated a left and right header in the header builder with no content in it. That was the reason why the mobile view did not work :slight_smile:

Thank you so much for your help!

#7

You’re most welcome! :slight_smile:

#8

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