Mobile Full-Width View

[ericyun]

Hi,

I just recently purchased the X Theme and currently love it. I just have a quick customization question about something I am running into. I am using the Integrity stack and I would like for the site (including blog posts) to show up as full-width when on mobile, rather than the boxed/container view.

I have searched on this forum for people who had the question in the past, but the CSS code does not appear to work anymore. Is there an updated code you could provide that will allow me to hide the boxed view on mobile?

In addition, I would like only the blog posts to be full-width without affecting the padding and margins of the navbar or comments. Thank you!

[ruenel]

Hello Eric,

Thanks for writing in!

To resolve your issue making the blog post fullwidth in smaller screens, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 979px){
    .blog .entry-wrap,
    .archive .entry-wrap
    .single-post .entry-wrap {
        padding: 0 !important;
        border: none;
        box-shadow: none;
        background-color: transparent;
    }    
}

We would loved to know if this has work for you. Thank you.

[ericyun]

Hi RueNel,

Thanks so much for your fast response! I have added the code to the Global CSS, but unfortunately, it looks like it does not have an effect. This is the same thing that happened to me when I was using the code I found elsewhere on this forum. Do you know why my site is not responding to this change while on mobile? Thank you!

[ruenel]

Hello Eric,

I could not see the code when I view the page source code. Did you removed it? If not then this is a caching issue. Since you are using CloudFlare, please login to CloudFlare account and purge your site cache. For best results, please make sure that you are using the recommend CloudFlare settings which can be found here: https://xthemetips.com/using-cloudflare-rocket-loader-with-x-pro-and-x5/928/8/

Hope this helps. Please let us know how it goes.