How can I make these three columns to...

User 179809 Photo


Registered User
9 posts

I would like these items to stack one on top of another as soon as they don't fit side by side.


https://i.imgur.com/dOHAafq.png


https://i.imgur.com/xC7DZcj.png
Attachments:
User 2088758 Photo


Senior Advisor
3,086 posts

Hi James,

You will want to change the container that these elements are in to Flex if its not already then set it to column at the breakpoint you want it to stack on. I believe that RED is Desktop Down so move the slider to the left until you see the first container drop then switch the parent container to column.

Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2699991 Photo


Registered User
4,782 posts
Online Now

James mkeuning wrote:
I would like these items to stack one on top of another as soon as they don't fit side by side.


https://i.imgur.com/dOHAafq.png


https://i.imgur.com/xC7DZcj.png


Or set the container to row and wrap that way it will automatically stack when there isn't enough room for the child containers to be side by side
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 179809 Photo


Registered User
9 posts

Steve wrote:
Hi James,

You will want to change the container that these elements are in to Flex if its not already then set it to column at the breakpoint you want it to stack on. I believe that RED is Desktop Down so move the slider to the left until you see the first container drop then switch the parent container to column.



How do I used Flex in RED? I am familiar with that from side designer. The RED Guide doesn't mention Flex.
User 179809 Photo


Registered User
9 posts

Wayan Jaya wrote:

Or set the container to row and wrap that way it will automatically stack when there isn't enough room for the child containers to be side by side


row and wrap? I have no idea where to even start looking for what that is. Where is the wrap setting?
User 2699991 Photo


Registered User
4,782 posts
Online Now

James mkeuning wrote:
Wayan Jaya wrote:

Or set the container to row and wrap that way it will automatically stack when there isn't enough room for the child containers to be side by side


row and wrap? I have no idea where to even start looking for what that is. Where is the wrap setting?

Hi James Well I must be honest I don't use RED, but am downloading it now so I will have a quick bo-peep
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

Wayan Jaya wrote:
James mkeuning wrote:
Wayan Jaya wrote:

Or set the container to row and wrap that way it will automatically stack when there isn't enough room for the child containers to be side by side


row and wrap? I have no idea where to even start looking for what that is. Where is the wrap setting?

Hi James Well I must be honest I don't use RED, but am downloading it now so I will have a quick bo-peep


Now I remember

There is no flex, it uses the Grid
so you need to adjust the breakpoint settings a little bit (see attached image)to around 650px should do it, and then the width to 750px
then
working just below the breakpoint
adjust the span of each of the containers to minimum 7 spans (not any less or they won't stack

any further adjustment to paragraph styling font size etc up to you
Attachments:
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/

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.