Changing width of front page content area on mobile

Home Forums Automattic Forefront Changing width of front page content area on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #110719 Resolve

    Sean Power
    Member

    I’m struggling to make the home page of my website look as I would like on mobile devices.

    http://ppahs.org/

    I’m using a JPG of the logo against a blue background (1230 px by 550 px) as the featured image.

    When viewed on mobile devices, the text and page title lands on top of the logo (since it’s part of the JPG).

    I think I need to edit the width of the front page content area but, I confess, CSS and media queries are not my strong suit.

    I’ve tried to resolve the problem myself by looking at several threads in this support forum. The most relevant thread I could find:

    http://premium-themes.forums.wordpress.com/topic/css-and-mobile?replies=4

    That thread points to two resources:

    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

    Could you please help me figure out how to change the width of the front page content area so that the text does not overlap with the logo in the JPG?

    Thanks,
    Sean

    The blog I need help with is ppahs.org
    #148818

    Kathryn P.
    Happiness Engineer

    Hi there – it’s interesting what you’ve done with the featured image here. The theme’s responsiveness really isn’t designed to handle cases like this, though, as you’ve seen.

    I did some experimenting and instead of a media query, you could try this instead to restrict the width of the text on the homepage in a different way:

    .page-id-2820 .hentry .entry-content {
    width: 60%;
    }

    The post title will still overlap the logo a bit.

    You could try removing the post title and instead placing the same text within an h2 tag in the post.

    Let me know how it goes.

    #148821

    Sean Power
    Member

    Thanks, Kathryn.

    It’s definitely an improvement.

    The only thing I’m not a fan of is that, deleting the title and using h2 means that on phones the JPG of the logo is rather empty (since the content in the h2 tag appears below the JPG on phones).

    With this solution, the content on mobile devices only appears 60% across the width, leaving quite a bit of white space to the right of the text (below the JPG).

    Any ideas how to get around these two side effects of your remedy?

    Alternatively I can change the JPG if that will help. Just let me know what needs to happen.

    #148828

    Kathryn P.
    Happiness Engineer

    Alternatively I can change the JPG if that will help.

    That’s probably the best solution. As I mentioned earlier, Forefront isn’t really designed to have a non-overlappable logo embedded within the featured image. You might want to put the logo in one of the front page widgets instead and use a different type of featured image that works better responsively. You can check out the demo site to see how it works there:

    http://forefrontdemo.wordpress.com/

    #148833

    Sean Power
    Member

    OK. I’ll run with what we’ve got and see what happens.

    #148880

    Kathryn P.
    Happiness Engineer

    Sounds good. If you need help with anything else, feel free to start a new thread.

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Changing width of front page content area on mobile’ is closed to new replies.