Aligning Images and Text Horizontally

[kmarsh12]

Hello,

 

I'm attempting to re-create this Wix page - http://gtnphotography.wix.com/collectivecp#!new-equipment/c10au -in WP using the genesis theme. However, I'm having issues with spacing and alignment. Here's the code I have:

 

<style>

div.container{

position: relative;

}

p {

text-align: center;

margin-bottom: 60px;

}

div.container img{

position: absolute;

top: -30px;

left: -10px;

right: -10px;

}

</style>

<div class="container">

<img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Red-One-e1436565960605.png" />

<img src="http://www.collectivecp.com/wp-content/uploads/2015/07/C100.png" />

<img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Titla.png" />

<img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Tilta-2.png" />

<img src="http://www.collectivecp.com/wp-content/uploads/2015/07/24-105mm.png" />

<img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Rokinon-14mm.png" />

<img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Fostex.png" />

<img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Windshield.png" />

<img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Wireless-Mics.png" />

<img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Tascam.png" />

<img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Fluorescent-Banks.png" />

<img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Tungsten-Fresnels.png" />

<img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Green-Screen.png" />

<img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Client-Monitor.png" />

</div>

Any help would be great.

Thanks,

Kelsey

[justsomeguy]

What specifically are the issues? Do you have that online anywhere?

[kmarsh12]

I've posted the page live here http://www.collectivecp.com/equipment/

 

As you can see, the spacing and alignment of the pictures is all wrong after "Camera Support". I can't seem to figure out how get everything to line properly without using the spacer plugin (which doesn't scale appropriately for tablet or mobile devices).

[dsonesuk]

Float is causing them to all merge, you need to break out of float using clear: both.

 

Try maybe

.entry-content > h2 {    clear: both;}

and see if that is what you are looking for.

[kmarsh12]

Just about. "Sound kit" is still wonky.

[dsonesuk]

Well they wouldn't would they, they are not wrapped like the others in a block element like h2 where clear: both; is used.

[kmarsh12]

Right. Those pictures are wrapped in the h2 tag. If I wrap them in a p tag using the same as before, it shifts all of them. I adjusted the space separating the paragraphs to be a h2 tag. It works! Thanks for the help!

[dsonesuk]

You do realize on smaller screen widths, the header title and description appears below the related images.