Blog layout viewed on mobile device

  • Unknown's avatar
    bradadcock · Member ·

    The site looks great on a desktop and iPad browser. It does not look right when viewed on an iPhone. There’s too much space on the sides of the photos on my blog posts. I’ve tried searching for how to make adjustments to widen this but can’t find anything. Here’s an example of a page that does not look right on an iPhone.
    http://bradadcock.com/2014/07/03/werners-at-the-park/

    Does anyone have a suggestion on how to make the blog photos fill the screen more when viewed on an iPhone?
    Thanks
    Brad

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    I tested http://bradadcock.com/2014/07/03/werners-at-the-park/ on the iOS Simulator and here’s how the spacing looks right now: https://cloudup.com/cJ29_6Y64vW

    I checked your custom CSS and I see that you’ve tried changing the left and right padding values with this CSS:

    .single #container, .page #container, .error404 #container {
	max-width: 960px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding-left: none;
	padding-right: none;
}

    That’s a great start!

    To get those padding rules to work, you need to change a couple things. First, “none” is not valid for those and so those need to be set to “0” instead. Second, you have to make your selector at least as specific or more specific than the one used by the theme. You’re using “.single #container” but the theme is using a script called masonry that sizes and stacks images on the fly. Because of that script, you have to use !important and you have to adjust the widths and padding for the masonry elements. The only way to see this is to use browser tools to inspect the CSS after a page has loaded live in the browser. Here’s a guide about how to do that in case you’re interested:
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    I came up with the following CSS example that I think will work for you. You should test it. What it does is set the left and right padding on the masonry container element to zero, and then it also removes a width from the masonry container as well as the post container that’s getting added by the script. Finally, it’s wrapped in an @media rule to limit the change to small screens only so it doesn’t mess up the layout on larger screens:

    @media screen and (max-width: 640px) {
	#masonry {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	#masonry,
	#masonry .hentry {
		width: auto !important;
	}
}

    If you’d like to learn more about @media rules, take a look at this help page about media queries:
    http://en.support.wordpress.com/custom-design/custom-css-media-queries/

  • Unknown's avatar
    bradadcock · Member ·

    @designsimply

    Thanks for your help. You are awesome. Using the @media rule got me on the right track. The blog posts are now filling the mobile browser pages.

  • Unknown's avatar
    designsimply · Member ·

    Excellent!

    http://bradadcock.com/ looks lovely. :) I love photography!

  • The topic ‘Blog layout viewed on mobile device’ is closed to new replies.