Responsive issue - featured images on right are ignoring the code

HTML & CSS
1

URL: http://goo.gl/gCB2rC

Edit to add the regular URL: http://goo.gl/QDfnhh

If you look at the round featured images (like in the delicious desserts section) on the 768 and 1024 widths, you’ll see that the first two images are displaying correctly but the third image is still large like the original display.

I’m using this code to shrink those sections so they’ll still be side-by-side on the iPad views:


.home-bottom .featuredpost .entry {
		width: 33%;
	}

Do you see why that third image is staying big?

2

I don’t see that in Chrome. What browser are you using?

3

I’m in Chrome and I don’t see it anymore either (??). I added those links to more from the category (“More Desserts”) and now in the normal view, the circles don’t fit 3 to a line. With Paul’s help, I added this before and it was working fine.


.home-bottom .featuredpost .entry:last-child {
	padding-right: 0
}

What’s causing it not to work anymore?

4

It’s not working because it’s not the last child any more as you have added something after it. You will need to add a class to that element instead (or use :nth-of-type if you only want modern browsers support).

However it still won’t fit unless you also restrict the width of that last item to 200px as you only have 680px space to play with (.content is 680px wide). The new text captions are pushing the width wider than the captions you had before.

Add a class (.last) to those last items and use this code:



.home-bottom .featuredpost .entry.last {
padding-right:0;
max-width:200px;
}

Alternatively increase the width of .content but I guess that may affect other things in the site.

5

Thanks so much. I ended up increasing the width of that section so they will all fit.

Can I ask you one more question while I’m here? On the category archive pages (http://goo.gl/XK8n9W), the featured posts in the footer widgets (center section) are all messed up. If you look at them on any other page (Home, About, etc.) they display correctly. I’m trying to override the conflict with CSS, but I’m not having much luck. Do you see what needs to happen to straighten them out?

6

Hi,

The floated elements are snagging because you haven’t contained them within the parent unlike the other pages.

This is a bit messy as you have a different class on each but something like this will get you back on track:


.gfwa-1:after,
.gfwa-2:after,
.gfwa-3:after {
 clear: both;
content: " ";
display: table
}

.gfwa-1 h2 a,
.gfwa-2 h2 a,
.gfwa-3 h2 a,
.gfwa-1 h2,
.gfwa-2 h2,
.gfwa-3 h2{
text-align:left;
}
.gfwa-1 h2,
.gfwa-2 h2,
.gfwa-3 h2{
line-height:1.3em;
padding:.4em 0 0;
}
7

Thank you so much. I appreciate your help once again. :slight_smile: Do you have a tip jar?

8

Yes but it’s full of biscuits :slight_smile: