Creating a Page with Image grid

[marshallw]

I am using this theme in our live store and I am trying to create a new static page for the category roots. I just want a grid of category icons similar to the home page of the levels theme (the row of three mid page). I have added the images to the ready theme image section, and crated a page with the mvt items. However they all just show in a vertical line. How do I get them to span three to a row (medium-one-third). I am unclear where to apply css and what codes to use in this theme.

Any help would be great.

[Matt Zimmermann]

Can you post a link the page?

[marshallw]

Yeah, here is the dev site page that I was working on . I have pulled all images and was working on just one image for now too see if I could get the css to work.

http://dev.churchonwheels.com/COWSTORE.html

I created the image with ready theme and added the following classes to it: column whole medium-one-third align-center sfnt-ad

[Matt Zimmermann]

Wrap those DIVs with another DIV assigned the class of 'row'

[marshallw]

Right, good grief. Thanks. I have one more probably stupid easy one. Now I have three rows columns working. The only thing I do not see in the CSS is a way to add a space or /br under each image. So the same space that is on the left and right padding but bottom.

[marshallw]

I notice on new pages I create to there is a massive amount of white space between the header and the content blocks. This is named <main> why is that there and how should I be using the main block or moving it?
Thanks,

[Matt Zimmermann]

Within your DIV and below the A tag, add

<span class="h-breaker"></span>

this will add the space you are looking for. As for the page layout, all your content should be within the MAIN tag. Check your page layout against one of the static pages like PRPO.

[marshallw]

OK, can the span be added to the image on the ready theme side. Most of the html is generated with the ready theme block. On the page code, I just add MVT blocks and the system does the rest. I can add the span in the div block. I'm just wondering if that can be added as a function to the image ready theme item.

[Matt Zimmermann]

It does need to be a separate elements from the image MVT tag.

[lesliekirk]

Marshall, did you get working? May I see it?

[marshallw]

lesliekirk

I did get this version to work and use it on our live site. I was just thinking of changing it soon though.

http://www.churchonwheels.com/COWSTORE.html

I'm happy to share code if you need anything.

[lesliekirk]

lesliekirk

I did get this version to work and use it on our live site. I was just thinking of changing it soon though.

http://www.churchonwheels.com/COWSTORE.html

I'm happy to share code if you need anything.

Ahhh, I see you used the class medium-one-third. I've been playing with the class cmp-product-list__item and used flex-basis: calc(100% / 4); I was having problems with getting my text content to align to the top until I discovered align-items: start;

I hope I did it correctly (it looks okay). Thanks for sharing yours.

[marshallw]

Sure, do you have a link to the one you are working on?