How to remove padding from last child

HTML & CSS
1

Hello!

URL: http://goo.gl/6diuXj

In the “Our Workshops & Programs” section on the home page, I need to remove the padding from the last item in each row. I’ve tried using this css but it’s not working for me:


.home-left .featuredpage:last-child,
.home-left .featuredpage .page:last-child {
	padding-right: 0;
}

What am I missing?

Also, how can I allow those little butterfly icons to extend past the #inner container? If I add overflow: visible, the floats aren’t contained (as you can see now). If I add overflow: hidden or auto, the floats are contained but the butterfly icons don’t extend past the container. What am I doing wrong here?

Thanks for any help. :slight_smile:

2

The last child is the very last one in the list, not the end of each visible ‘row’.

You could target every third one in your setup with this:

.featuredpage:nth-child(3n+1) {padding:0;}

Also, how can I allow those little butterfly icons to extend past the #inner container? If I add overflow: visible, the floats aren’t contained (as you can see now). If I add overflow: hidden or auto, the floats are contained but the butterfly icons don’t extend past the container. What am I doing wrong here?

You could use a “clearfix” solution instead. E.g.

#inner:after {
    content:"";
    display:table;
    clear:both;
}
3

Thanks so much, ralph. I’m not sure if targeting the 3rd item is working. What do you think?

4

I think you should try the code I gave you. :stuck_out_tongue:

You have this:

.home-left .featuredpage [COLOR="#FF0000"].page[/COLOR]:nth-child(3n+1) {
	padding: 0;
}

… which isn’t any use. It’s the .featuredpage divs you are trying to remove the padding from.

5

Oops - forgot I had that in there. I was experimenting because I didn’t think it was working. I’m now using the code you gave me but it still seems like there’s padding on the 3rd item.

6

won’t “nth-child(3n+1)” change the 1st, 4th, 7th items? Shouldn’t the code be nth-child(3n) to target all the multiples of 3? - 3rd, 6th, 9th, etc?

7

It’s working with (3n+1).

Thanks for your help, ralph!!

8

Inside the container there is a div around an h4, so that is the first child. Then come the .featuredpage divs. So the ones at the end of each ‘row’ are the 4th and 7th children of the div, which 3n + 1 matches. :slight_smile:

When n = 0, 3n + 1 = 1 (the first child) but that’s not a .featuredpage div, so nothing happens. When n = 1, 3n + 1 = 4 (the 4th child) and that is a .featuredpage div, so the rule kicks in. Etc.