Help with CSS for Mobile

[FrankJohnson]

I'm working on a site using the Parallax Pro theme. You can find the site here.

On the home page of that site, you'll find a section entitled "Peruse My Content," and in that section, I have two rows of four thumbnails which are links to articles I have written. I'm having problems getting this section to show up correctly on mobile devices, and I'm hoping someone can help me with the correct styles. I am definitely not an expert in CSS (I often use a trial-and-error approach), and I'm even less of an expert on responsive design.

The two rows of thumbnails and there links are set up like this:

<div class="homepagethumbwrapper">
<div class="homepagethumb">thumbnail<br />link</div>
<div class="homepagethumb">thumbnail<br />link</div>
<div class="homepagethumb">thumbnail<br />link</div>
<div class="homepagethumb-last">thumbnail<br />link</div>
<p class="clear"></p>
<div class="homepagethumb">thumbnail<br />link</div>
<div class="homepagethumb">thumbnail<br />link</div>
<div class="homepagethumb">thumbnail<br />link</div>
<div class="homepagethumb-last">thumbnail<br />link</div>
</div>

And here's the relevant CSS:

.homepagethumb {
width: 152px;
float: left;
margin: 0px 44px 25px 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 50%;
text-align: center;
}

.homepagethumb img {
border: 1px solid #000;
}

.homepagethumb-last {
width: 152px;
float: left;
margin-bottom: 25px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 50%;
text-align: center;
}

.homepagethumb-last img {
border: 1px solid #000;
}

.homepagethumbwrapper {
width: 740px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

.clear {
clear: both;
}

On the desktop, it looks fine - the two rows each include four thumbnails and their accompanying links. But on my iPhone, there are five rows - the first has four thumbnails and then the remaining rows have one thumbnail each. What I want is for each thumbnail to appear on its own row and be centered in the available space.

I tried adding this to the section of the stylesheet which pertains to devices with a max-width of 480 pixels:

.homepagethumb {
		width: 152px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 25px;
		font-family: verdana, arial, helvetica, sans-serif;
		font-size: 50%;
		text-align: center;
	}

.homepagethumb-last {
		width: 152px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 25px;
		font-family: verdana, arial, helvetica, sans-serif;
		font-size: 50%;
		text-align: center;
	}

.homepagethumbwrapper {
		width: 480px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

But it didn't change what I was seeing on the iPhone.

Can anyone help? Thanks in advance for any help anyone might be able to offer - I really appreciate it.

Frank

http://www.franknjohnson.net

[paulag01]

You will likely need to use some media queries to accomplish this and have the rows appear differently depending on device.

You can get an intro to media queries here:
http://www.developer.com/lang/css/introduction-to-css3-media-queries.html

and then
more on that here

http://www.studiopress.com/design/website-respond-mobile-devices.htm

It is a bigger topic that I have continued to dig deeper into myself. I recently did the mobile class on Code School that was very helpful to get my foundational thinking straight.

Hope that helps a bit.

[FrankJohnson]

Thanks Paula. I see now that I wasn't clear enough in my first post. I put the additional css into an already-existing media query section of the style sheet:

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

	.footer-widgets .widget-title,
	.home-even .widget-title,
	.home-odd .widget-title {
		font-size: 36px;
	}

	.home-even,
	.home-odd {
		font-size: 22px;
	}

	.homepagethumb {
		width: 152px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 25px;
		font-family: verdana, arial, helvetica, sans-serif;
		font-size: 50%;
		text-align: center;
	}

	.homepagethumb-last {
		width: 152px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 25px;
		font-family: verdana, arial, helvetica, sans-serif;
		font-size: 50%;
		text-align: center;
	}

	.homepagethumbwrapper {
		width: 480px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

}

but it didn't seem to change the layout at all.

Thanks,
Frank

[emasai]

You have set a fixed width of 740px for the .homethumbwrapper. Change that to max-width: 740px

You should have floated all your elements in the same wrapper and then removed the floats in the media queries and given them width 100%.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[FrankJohnson]

Thanks Lynne! I really appreciate the help.

Here's what I've done in response to your suggestions:

1. I changed the homepagewrapper class to specify a max-width of 740px.

2. Then I changed the styles within the media query section (for 480px width) to be this:

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

	.footer-widgets .widget-title,
	.home-even .widget-title,
	.home-odd .widget-title {
		font-size: 36px;
	}

	.home-even,
	.home-odd {
		font-size: 22px;
	}

	.homepagethumb {
		width: 152px;
		margin-left: auto;
		margin-right: auto;
		font-family: verdana, arial, helvetica, sans-serif;
		font-size: 50%;
		text-align: center;
	}

	.homepagethumb-last {
		width: 152px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 25px;
		font-family: verdana, arial, helvetica, sans-serif;
		font-size: 50%;
		text-align: center;
	}

	.homepagethumbwrapper {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

}

This really helped. The one last thing I would like to do (which isn't currently happening) is have the thumbnails center within the available space on a mobile device. Right now, they are floated left, but I'm not sure why.

Any thoughts?

Thanks again!

Frank

[emasai]

Delete .homepagethumb-last from the content and from the css. It is exactly the same as .homepagethumb so serves no purpose except to add extra markup.

In @media only screen and (max-width: 480px) change the width of .homepagethumb to:
width:100% !important;

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[FrankJohnson]

Thanks Lynne, for all of your help.

homepagethumb-last is actually slightly different than homepagethumb (homepagethumb has a right margin of 44px whereas homepagethumb-last doesn't have a right margin), so I've left that in.

I changed the width of homepagethumb in the media query section as you suggested and that worked well when my phone is in portrait orientation. When I switch to landscape orientation, the thumbnails appear in four rows of two each and remain floated left. I thought that 480px is the width of the iphone in landscape orientation, but maybe I'm wrong (or maybe it needs some additional tweaking).

Thanks again,
Frank

[emasai]

I am not seeing what you describe on iphone browser testers. The iphone, depending on the model has several different widths, both in portrait and landscape. But IMHO most people view phones in general in portrait, for ease of use and scrolling and the width is 320px. Ipad users generally view in landscape 1024px width but some people use portrait which is 768px. The way you have coded your thumbnails makes this look strange at 768px.

As you have kept .homepagethumb-last, you will also have to write a rule for it in the media queries.

To be clear, in media queries you only have to change the elements that should behave differently. You do not need to repeat the elements that stay the same throughout.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[Author]

Posts