Site Width Issue

Hi there.

Our website at https://besttravelgoods.com/ is having an issue with the site width.

On desktops/laptops, the look is ideal.

There is a responsive amount of empty space on the left and right of the screen. However, on mobile, we don’t want there to be any space.

Our layout and design is currently at:

Site max width: 1200px
Site width: 72%
Content width: 70%

We know that the site width is causing the empty spaces, but any larger is not ideal for our desktop/laptop visitors. How can we make the site-width 90% for mobile?

Hi,

Thanks for writing in!

There is currently no settings to achieve that. You can only do it using custom CSS.

To make it 90% in mobile, you can add the code below in Theme Options > CSS

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

Hope that helps.

This worked for the home page. Other pages are still at 72%.

Any ideas?

Scratch that, everything is now 90% on mobile.

Thanks Paul!

You’re welcome.

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