EZ Page Layout

[Seanobr88]

Hello everyone!

I am looking for some help with setting up a layout on an EZ Page. I am looking to add pictures, that include links to external pages (I know how to do that). The problem I am running into is that I want these pictures (12 of them) to be in 3 rows of 4. Right now, all 12 pictures are posted horizontally and quite large. anyone know the HTML so I can format this so that the pictures appear in rows?

I know it can be done, as that is how it was previously done, however, someone tried to do this update themselves, and erased the code when trying to add new pictures.

Any help would be appreciated!

[Seanobr88]

Update:
I've used: <div class="row"> <div class="col-md-3 col-sm-4 col-xs-6"> to put them in sort of rows.

What i mean by that is I have images:
1 5
2 6
3 7
4 8

When I really want images:
1 2 3 4
5 6 7 8

What am I missing?

[kobra]

What is your markup in your ez page for these images?

[keneso]

Update:
I've used: <div class="row"> <div class="col-md-3 col-sm-4 col-xs-6"> to put them in sort of rows.

Looks like you are using bootstrap markup, have you loaded bootstrap stylesheet?
You should rename it to stylesheet_bootstrap.css, and load it in YPOUR_TEMPLATE/css folder.

[Seanobr88]

Thanks for the replies; I am using bootstrap. I've got the items to appear in the right order, now I'm facing a new problem - the 4th item isn't aligned (The first 3 are aligned, the 4th droops down). Any ideas on what I'm doing wrong?

<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6"><a href="website#1/"><img src="image#1.jpg"></a></div>
<div class="col-md-3 col-sm-4 col-xs-6"><a href="website#2/"><img src="image#2.jpg"></a></div>
<div class="col-md-3 col-sm-4 col-xs-6"><a href="website#3/"><img src="image#3.jpg"></a></div>
<div class="col-md-3 col-sm-4 col-xs-6"><a href="website#4/"><img src="image#4.jpg"></a></div>
</div>

[keneso]

A link to the site would help.

What resolution are you looking at it, the col-sm-4 would force the 4th to drop, try removing it, and see how it works.

[Seanobr88]

My apologies, I thought I included the link in the last post. Trying to do too many things at once.

Here is the link: http://www.bellablvd.net/shop/index....d=23&chapter=4

I removed the col-sm 4 with no change.

Thanks again for your help!

[keneso]

I thought it dropped to the next row ...
Anyhow try removing &nbsp; from the markup
i.e.
<div class="row">&nbsp;

BTW do you need to load such large images?

[Seanobr88]

Hi,

Yeah that is what she is looking for. Four larger images on each row. Ugh, I feel like an idiot...it was the &nbsp; that was causing the problem. I don't know if it's a normal Zen Cart issue, but it seems every time I do the EZ Pages, and go into HTML, those will randomly appear.

THANK YOU SO MUCH!

[kobra]

BTW do you need to load such large images?

Yeah that is what she is looking for.

I think that he was referring to the size of the images not only the physical size but also the bytes size

732.39 KB
1,050px × 1,275px (scaled to 263px × 319px)