Images/Columns Stacking/Collapsing -...

User 461879 Photo


Registered User
82 posts

Hey everyone, need a little help. I got help with this once before and cant figure out how I did it.

Example, if I set three columns with and image in each and each at 4 spans.

When I use the slider to see what it will look like at smaller sizes the three images just shrink and stay in the same row.

I would like the images/columns, to stack/collapse so the pictures will go into vertical layout one on top of the other.

Got help with this once but cant remember how I did it and cant find my post.

I have attached a screen shot of whats happening. I would like those three images to be on top of each other allowing the images to stay lager in size.

Thanks in advance
Attachments:
User 122279 Photo


Senior Advisor
14,565 posts
Online Now

Set a breakpoint where you want the images to stack, then make the columns with the images 12 spans wide. You can center the images and give them a max width if you like
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 461879 Photo


Registered User
82 posts

Not sure how to set a breakpoint. Just learning
User 461879 Photo


Registered User
82 posts

OK, think I figured it out. Dont know how but they are stacking
User 461879 Photo


Registered User
82 posts

Thanks
User 2699991 Photo


Registered User
5,119 posts
Online Now

Jonathan Warren wrote:
OK, think I figured it out. Dont know how but they are stacking


Hi everybody from sunny Bali

Johnathan
If you did as Inger said and made the columns 12 spans at the new breakpoint, then they have to stack because there is no more room for the column on that row, so the next column takes up the next bit of available space which is underneath the previous column etc etc

It will still work even if you don't add a new breakpoint and just set the column widths,,, but it is best practice to add a new breakpoint when making changes like that, so when you say "Don't Know How" do you mean you still not sure how to add the breakpoint?

Wayan
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://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 461879 Photo


Registered User
82 posts

Thanks guys. I did figure it out and have it the way I want. Was a good lesson. Never knew you can add settings to columns etc at certain breakpoints. This will help a lot. Now I will try and get a text link menu to do the same.

Thanks again
User 122279 Photo


Senior Advisor
14,565 posts
Online Now

Good that you found out how to do the breakpoints! :)
Here is a hint to help you not stumble at something that seems to have caused a lot of confusion for new users.
In the below I'm assuming that you start from desktop size:
When you start a new design from scratch, make sure you have no breakpoints to begin with. Keep the viewport at its widest (slider moved to the right), and create the design you want. Then narrow the viewport by moving the slider to the left, and when your design starts looking a bit odd, or a wee bit before that, set a breakpoint and adjust the settings. When you are satisfied, do the same again, new breakpoint, new adjustments to the settings and so on until you get down to phone size. Usually you will need something between 2 and 4 breakpoints, but if your design is very complex, you may set as many as you want, but make sure you always move from right to left.
And another thing that users have been asking about, is where to set the breakpoints to fit tablet and phone sizes. Forget about that! Set the breakpoint where it suits your design, it is a mission impossible to match the zillion of tablet, phone and watch sizes, which are increasing nearly daily.
Anyway, good luck, and yell if you need some assistance! ;)
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 461879 Photo


Registered User
82 posts

Thanks Inger, once I played with the breakpoints I realized that you can change the design at every break point. Seems obvious but not as a beginner stuck with 15 years of frontpage experience. All very new. I was actually going to ask you if there were some popular breakpoints (tablet size) etc but true, too many different devices out there and I think the two to three breakpoints would cover most. The last couple days with your help and help from others has really helped.

However, there is still one thing I can't seem to get if you don't mind and that is text links and their position. I have a top header set with a logo at 5 spans, to the right 7 spans and have a container with three text links. The container is centered in the 7 spans and I seem to have two issues. If I set the container to the right, which is where I want the text links, upper right corner, when I slide the design to smaller sizes the links slide over each other. I have tried putting them in individual columns but that seems to not allow them to position right as the design gets smaller. Is there anything simple I am missing.

In a nut shell, I just want my three text links in the upper right corner, and then at a pretty small size to collapse and be centered under the logo to the left. I can attach the file if that helps or any suggestions would be great.

Thanks again
User 122279 Photo


Senior Advisor
14,565 posts
Online Now

Yes, please attach the file. I'm a bit busy right now, but I guess someone else may pop in here and help. If not, I'll see what I can do a bit later today.
Ha en riktig god dag!
Inger, Norway

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



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.