Cornerstone layout vs actual layout

[guave2]

Hi Guys,

I have a problem concerning layouts.
For our homepage I created a different layout for mobile devices. in the desktop and laptop layout I have used a row layout with 4 colums including 4 buttons. Every colums contains a buntton.

If I tested the mobile devices I found that the layout of the buttons was not what I like it to be. They were actually placed beaneath each other.

To create a layout which suits my needs I created seperate sections in cornerstone, especially for the mobile devices (screen sizes). Doing this I have created something which I liked and I thought it would be awesome.

Sadly testing on my own mobile I found that all Cornerstone was showing me was override by the layout where the buttons where placed underneath each other.

Check out what Cornerstone is showing me after changing some stuff concerning layouts

What Ive done was changing the laout of the sections to 1 column and than duplicate the button, which makes sure 2 columns where showing per row

After that I duplicated that row which finally showed me the layout what I was looking for. Maybe some tweaking on the padding and margins but still it looks more like what I had in mind.

What did I do wrong here?

BEst
Ivo

[christian]

Hey Ivo,

Cornerstone’s smallest preview is 480px.

It regretfully could not show the inline flow below 480px which is most probably the case for your phone.

In this case, you will need to reduce the padding and margin of your buttons. Or, you could experiment with VW or Percentage based units. That will make the margin and padding scale according to the width of the screen.

Watch the quick screencast below to see how the VW unit could help. Just note that starting at a certain point, the buttons would really stack because 2 buttons could not physically fit in a narrow screen.

Hope that helps.