Streaming live at 10am (PST)

Styling advice please, div or columns? for a block of styled content


I am trying to style up a promo offer section that takes the info from a collection. It has 3 sections: logo, offer area, promo code area. I have set it up as a row with 3 columns but now wondering if I should use Div blocks instead somehow, am I on the right track or should I ditch it and start again? The layout is nearly how I want it except I can’t seem to apply padding on each column so the ones with more text push right up against the edge.

Here’s what it looks like now:

Screenshot 2017-10-04_18-02-43

Question is should I start again and re-structure as div blocks? I notice in the tutorials you would set the logo as a background image (although I don’t know why)? But I didn’t see if that was possible to take a background image from a collection item. The tutorials seem to show these type of design elements as 2 columns not 3… I’m really not sure how to go about this and I’d appreciate any tips please. Thanks in advance.

This is on a page called “Special Offers”

Here is my public share link:

Hi @Kulsha, great questions, there are a number of ways this can be done, I like to use a simple flexbox grid, take a peek here:

With rows and columns, I like to put a div block first in the column, then give it a 100% width and height of the column. Then I put in content inside those divs and use padding instead of margin, to create space between the inner parent div and the content.

I hope this helps.

1 Like

Thanks @cyberdave, that Flexbox instruction page is great with all the layouts. I decided to use the Equal Height method: and it looks heaps nicer than my original attempt :grin:

but I had to set a limit of collection items, in my case 4. But I’d like this to list all of my items downwards using this design as a base, so repeat the same sections down in rows so it could potentially show all of my listings on this page, there might be 20 or so (but obviously no so there are 20 side by side which would be the case if I edited the limit to 20). How do I do this please so they list downwards like thumbnails? Thanks again.

Hi, great questions. Well, if I understand correctly, you are trying to have multiple items wrap to the next row?

Does this help?


1 Like

Oh My !! @cyberdave you are a genius! Thank you so much, this is EXACTLY what I wanted to achieve! And I am so happy you included the instructions on how to fix the button to the bottom like that because I was going to ask how to do that next.

I will be stepping through your video to copy this exact process as soon as I can.

Very excited, thank you !! :heart_eyes:

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.