Hey guys,

I'm struggling with the best approach to layout this page. Everything looks good until i start scaling it down and when we get to mobile breakpoints I get a column of templates. The problem is there is no distinct lines between each product so it kind of looks messy. I tried using a panel but that didn't look good. I have added the panel to a couple just so you can see. I also tried adding just color to each but looks a bit choppy. I haven't fixed the background colors of the titles yet so please ignore that.

Any advice would be appreciated.

Thanks in advance

http://misterwebguy.com/webtemplateTemp.html

What about using the rule, would that be something you would consider?

Please explain

If it's how I understand you, how about using the horizontal rule, it's under "rule" in RLM still a fab tool to divide stuff and it would work with what your saying looking at your site.

I like the Birdie, Canvas background better then the first row. Use that on all the templates and then on mobile view swap the background so it is light grey, dark grey, light grey etc. Then add a border top to each of the columns.

Thanks for the suggestions. Trying to locate the class to apply the top boarder too.



Didn't work! Any hints...

grey-panel, dark-grey-panel.

I thought so too but it had no effect.

Is it margin what your looking for?

Hey Eric, just looking to add a top border to each element when it goes to a screen size of 320. So when you view it on a phone it will have dividers between each element.