Mobile First - Post ID 268707

User 2811194 Photo


Registered User
34 posts

Hi,
I have just started to play around with Foundation Framer and specifically playing with 4 blocks A, B, C and D and trying to replicate a section of the Visions theme. Step 1: 12,12,12,12 spans each. Step 2: 12, 6, 6, 12 spans. Step 3: 12, 4, 4, 4 spans. I can do these steps no problem in reverse ie. widescreen to narrow screen. But I cannot do it the other round which is confusing because isn't the idea of Foundation Framer mobile first?

I am getting stuck on Step 2 (mobile first) after making the B block 6 spans and cannot see how to make the C block at 6 spans join the same row.

Anyway I am sure I am missing something very basic. Any help most appreciated.
Attachments:
User 244626 Photo


Registered User
811 posts

Your B Block is on Row 2 and your C Block is on row 3. I think you need to have both columns containing the blocks to the same row. You can go to the inspector and click the column with C block and drag it up to row 2.
Bootstrap 5 CSS Grid.
User 2811194 Photo


Registered User
34 posts

Thanks for the reply. I am still not getting this. Step 1 (ie. Mobile first) the B and C block with have to be in separate rows because they are 12 spans. What I don't see/understand is how to get the C block on to the Row 2 so it is alongside the B block with 6 spans each.

If I do the blocks in reverse starting at the wide option then it is straight forward to achieve the end result. I am simply curious to why it isn't so obvious/possible starting mobile first.

Maybe I am just complicating things.
Attachments:
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

In mobile view, create two rows. They come with one column each, at full 12 spans width.

Leave the first row as is, that will be your section A.
In the second row split the column in three, but make each of those three 12 spans wide. They will be your B, C and D sections. They will look like three rows, but it is only one.

Then in middle view, again leave A as is, but reduce the width of B and C to 6 spans each. Leave D as is.

In wide view, make B, C and D 4 spans wide.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2811194 Photo


Registered User
34 posts

Perfect - thanks for the explaination. Best wishes

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.