• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Make Agency white content panel full width in mobile view

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Make Agency white content panel full width in mobile view

This topic is: resolved

Tagged: Agency

  • This topic has 6 replies, 2 voices, and was last updated 7 years, 5 months ago by jeffwaters.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 17, 2015 at 8:48 am #174067
    jeffwaters
    Member

    Hello,

    I'm using Agency Pro and would like to make the content containers for posts, pages, and widgets, etc to go full width... at least in the mobile view / size.

    I do not want to see the background image peeking through on the left and right... also, this gives a little more width for a few more words per line in the content.

    How would I do that?

    Thanks!

    Example here:
    Content Width

    http://lifeupfront.com/2013/06/07/stop-showing-me-your-bald-spot/
    December 18, 2015 at 1:20 pm #174264
    Ginger
    Participant

    Hi Jeff,

    Check out this section in your style.css file:

    @media only screen and (max-width: 800px)

    and look for this entry and remove it or set it to zero:

    .site-inner {
    		padding: 5%;
    }

    Make sure and test all the other pages in case it throws off something else.


    @gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

    December 18, 2015 at 5:34 pm #174301
    jeffwaters
    Member

    Fantastic, thanks Ginger! Worked like a charm. I ended up going with 1% as it looks a little better than having the white go completely edge to edge.

    What if I wanted to also decrease the inner padding of the content area a bit (from the edge of the white container to the edge of the text)? Where would I change that (again, only to affect in mobile mode)?

    December 18, 2015 at 5:51 pm #174302
    Ginger
    Participant

    Use

    .entry {
    padding-left:
    padding-right:
    }

    at the breakpoint you'd like for mobile.....40px is what it is now so you can reduce that to get the look you'd like.

    Going forward, this tutorial might help when you're trying to identify what to change...you can change it on the fly in the browser (any browser) which is pretty cool:

    How To Customize Your Genesis Child Theme with Chrome Inspector


    @gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

    December 18, 2015 at 6:02 pm #174304
    jeffwaters
    Member

    Hmmm... how do I know I'm doing this for just the mobile breakpoint I want?

    December 18, 2015 at 6:07 pm #174306
    Ginger
    Participant

    You'll need to experiment with different media sizes. You can test this in your browser if you're using Chrome or Firefox, you can right+click and select Inspect or Inspect element to turn on developer tools. If you Google mobile website viewer or something similar that can also give you options. The iPhone 5 is 320px wide and the iPad when held portrait (tall) is 768 px wide.


    @gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

    December 19, 2015 at 11:23 am #174338
    jeffwaters
    Member

    Thanks, Ginger!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Make Agency white content panel full width in mobile view’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble