Print Page - Item loop first last div

Title: Item loop first last div
Post by: daydreamer on July 11, 2013, 11:13:03 AM

On the item loop I need the first and last divs to have a class of first & last. so the fist div has margin-left 0 and last div has margin-right 0. How can this be done?

Title: Re: Item loop first last div
Post by: freeSbee on July 11, 2013, 11:26:48 AM

Hi daydramer

Use CSS selectors like :first-child and :last-child.

Regards Christoph

Title: Re: Item loop first last div
Post by: daydreamer on July 11, 2013, 11:34:46 AM

Ok great thanks

Title: Re: Item loop first last div
Post by: daydreamer on July 11, 2013, 11:40:37 AM

Could you show me an example please

Title: Re: Item loop first last div
Post by: daydreamer on July 11, 2013, 11:47:18 AM

The problem I have is I'm using skeleton responsive and my looped items are in a four column div

The first would need alpha
and the last would need omega so it doesn't work with css first-child last-child

Title: Re: Item loop first last div
Post by: daydreamer on July 11, 2013, 12:06:29 PM

Solved with this

Code Select

#loop {
	background-color: #F1F1F1;
	padding: 20px;
	margin-bottom: 40px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#loop:first-of-type {
	margin-left: 0;
}
#loop:last-child {
	margin-right: 0;

Code Select

<div id="loop"class="four columns">
<a href="[LINK]">[TITLE]</a>
[THUMB]
<p>[DESCRIPTION]</p>
</div>

Title: Re: Item loop first last div
Post by: daydreamer on July 11, 2013, 01:17:17 PM

UPDATE: only works on first row of 3 divs not more :?

WebsiteBaker Community Forum (upd)

WebsiteBaker Support (2.8.x) => Bakery Shop => Topic started by: daydreamer on July 11, 2013, 11:13:03 AM