Content width on mobile device

[Jesse DeArmon]

Can you tell me how to increase the width of my content window on a mobile device? It looks great on a computer but it feels squashed when viewing vertically on a phone. Horizontal viewing doesn’t seem to be as bad. I have purchased the full add-on package that you offer if that helps. Thanks a lot for the help and I love the theme. (Bear with me, I’m new at this. You may have to tell me the proper place to add code if that’s what I need to do.)

[Tom]

This CSS will reduce the padding of the content area while on mobile.

You can see how to add it using the URL in my signature below.

@media (max-width:768px) {
      .one-container .site-content,
      .separate-containers .inside-article {
            padding: 20px;
      }
}

Hope this helps! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jesse]

You’re a genius! Worked like a champ right off the bat! I appreciate the help.

[Tom]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Shane]

Hello,

I have purchased the full package of add-ons for your theme and I’m actually trying to achieve something similar to Jesse. On my blog I have both Header and Navigation layout set to ‘Contained’ and I was wondering if this container width could be set to ‘auto-width’ which would alter depending upon the device that accesses the blog.. Right now the sidebar widgets seem to “Float” to the bottom of the page on narrow resolution / mobile screens and the Navigation menu seems to collapse into a drawer.. What’s the best way around this?

Thanks for any advise.. New to WordPress. Still much to learn, loving this theme of yours though!

[Tom]

Hi Shane,

Are you not wanting your site to be responsive? So your sidebars would still be next to your content and your navigation would still look the same even when on mobile?

If so, this plugin does that: https://wordpress.org/plugins/generate-disable-mobile/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Shane]

Nice! Just what I needed.

Thanks Tom. Keep up the great work!

[Tom]

You’re welcome! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts