Truly full width pages at tablet size and smaller

[carlfrie]

Hi there,

First, I want to say thanks, your support team has been great in answering my questions and others and in providing useful code snippets.

I’m trying to get a page to be full width at tablet size and smaller. I understand how media queries work, so that’s not the issue, the issue is removing padding and widening the container, I can’t seem to find the right elements to target. I also need to do this across over a dozen pages to I’d like to do it with code rather than in the customizer for each page.

Here is a link to one of the dozen or so pages I need to do this to:

https://tdtc.co.uk/iosh-working-safely-course/

Thanks again for your help.

[nabeel]

Hi Carl,

Thank you for reaching out to us. To make the container wider in smaller screens globally, you can add the following code in the Theme Options > CSS:

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

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!