Full width site on mobile

Support
#1

My client requested a ‘boxed’ site which I’ve build and it looks great on desktop. However, on mobile everything has padding/margin and I want to use the space better. How can I force full width on mobile?
Thanks,
Loren

#2

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

Oops! Sorry! That would help.

#4

Hi There,

Thank you for the URL, your containers including the main container is set to 88%. So if you need a fullwidth main container you need to set that to 100%. You can do that with the custom CSS below.


.x-container.max.width.offset {
	width: 100%;
}

However this will affect all screen sizes (including the desktop), so you need to wrap that code inside a @media query that only affect medium to small screen sizes.

Hope it helps,
Cheers!

#5

Hi. I tried this but it didn’t work. I’m not sure I’ve got the media query right.
I’ve added the following;

media only screen and (max-width: 500px)
.x-container.max.width.offset {
	width: 100%;
}

What have I done wrong?

#6

Hi There,

You almost got it, you just forgot the @ on @media and the open and close bracket { } that indicates that this is a @media query block.

e.g.

@media only screen and (max-width: 500px) {
	/*YOUR CUSTOM CSS RULES HERE*/
}

Note: max-width: 500px means apply the custom CSS on screen-width 500px and below.
While min-width: 501px means apply the custom CSS on screen-width 501px and above.

Thanks,

#7

Hi There,

I have a similar problem. I used the site width 75% for padding (no additional padding used inside the container) so that worked perfectly on all devices, but for mobile screen, I tried to made that 100% width using the code, but that didn’t work. Here is the screenshot of the code I have used: http://prntscr.com/ghgqpl can you please check if I wrote the code correctly or why it’s not affecting to the mobile device? See the page here please: https://theandibrand.com/bgty-new/

Thanks
Asad

#8

Hey Asad,

Thanks for writing around! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (max-width: 767px) {
    .x-container.max.width {
        width: 98% !important;
    }
}

Let us know how this goes!