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
OK, think I figured it out. Dont know how but they are stacking
Hi everybody from sunny Bali
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?
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!
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.
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.