1:2 on 2 colums

User 41932 Photo

Registered User
4 posts

Hi :)
I'm working on a new site with Bootstrap4 and SD V5.0-3448
Is it possible to fix 2-column on size more than 600px (tablet and PC)
in ratio left 1 and right-column 2.
In mobile the columns are on top of each other.

I want to have a picture in the left column and text (paragraph) in the right column.

Thanks in advance
User 2695940 Photo

Registered User
139 posts

Hi HaJo,

Yes, it is possible and really pretty easy.
I start with a container then add 2 more containers into that container. Easy to do by using the Inspector and dragging the 2 lower containers into the first container. So you have the Main container with containers 1 and 2 within it.

Be sure to set your "Toggle Breakpoints" to Default Mode.

For breakpoints less than 576px set the widths of 1 and 2 to 100% They will stack automatically one on top of the other.
Move to the next breakpoint above 576px
Then I set the width of container 1 to 33% and the width of container 2 to 67%. Set your main container holding 1 & 2 to 100% and maybe set a max px number so they don't span the whole screen at wider widths.
Next, with the main container selected choose Layout; display; Flex and direction to Row. That should give you the column width ratios you need.

Hope that explains things ok. I'm sure there are other ways to do what you need on maybe someone else will chime in.

All the best,

sample attached
John Ferguson
Website Design and Development
User 41932 Photo

Registered User
4 posts

Hi John,
thank you very much. I will give this a try this evening.

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.