Change Content Width on Mobile Version of Site

  • Resolved Pascuap

    (@pascuap)


    9 years, 9 months ago

    I have my first page set up on my site exactly the way I want it. It took a little tinkering in css to get the content area to be as wide as I wanted. Now I need to widen the content area on mobile so that it takes up the entire page and there are no side margins.

    Here’s my page link:
    https://thepetsitterofportland.com/services/

    Thanks in advance!

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hey Pascuap, my first reaction to this is that a lot of themes (the default TwentyFifteen theme for example) will manage all this for you.

    However, it looks like you’re happy with the theme you have and you’re not afraid of CSS. In that case you will probably find what you want here:
    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Media queries are one way to make your site sensitive to what kind of device is being used. They also can get pretty complicated pretty fast. If you get overwhelmed I would look at trying other themes. Look for themes that are “Responsive” this means they adapt to various screen sizes.

    Thread Starter Pascuap

    (@pascuap)

    Hi cvfergus, thanks for your response. You’re right I’m definitely very happy with my theme, and am not afraid of css. I’m using the Amadeus theme, which is supposed to be responsive. It makes the header area fit the entire page, but not the content area below. I’m thinking, when I was messing with the theme to to get the right width for my content area, I might have messed with the mobile code as well, which is why it’s now not automatically fixing this on mobile. Is there any way to check that?

    Thread Starter Pascuap

    (@pascuap)

    Figured it out, thanks!

    I bet you’re right that when you were changing the size of the contact area the responsiveness of the design was affected. If you really wanted to test that you could back up your edited CSS files, restore the theme default ones and see what that looks like.

    I don’t know if that’s necessary though because your responsive theme may (should?) already have media queries, which you could use to your advantage.

    So, what I would do is this:
    – In the css files look for “@media” queries. Odds are good that you’ll find a few that are for mobile.
    – In the @media sections that you find for small devices, add an additional css rule to set the width of your text to 100% of whatever container it’s in.

    One last thing, you’ve probably already seen this, but most modern browsers have really good device emulation built in, so your computer can pretend to be an iPhone with a small screen. For instance in chrome, there’s the “Developer Tools“.

    Hahahaha, you were faster than I was, glad it’s working!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change Content Width on Mobile Version of Site’ is closed to new replies.