Hi there,

Okay, I have my site looking good in a big display mode. But when I try to make it look as it decreases in size (to a cell phone), I start to have issues.

If you go here: http://missmartiniscurious.com/

Interview 1 & 2 (the images) are horizontal and it looks fine.
But...when it shrinks in size (like to a cell phone) the two images scrunch together (it does not look good).

What is the coding that I need to make image 2 go underneath image 1? So they go from a horizontal line to a vertical line? (and then still look good and readable on a cell phone).

I'd also like to do the same thing with the top nav links -- have them go under the top row when the screen starts to shrink.

I've experimented but have not figured out the solution! Thank you in advance for your help!
Andrea

Hi there Andrea,

What you want to do is add some breakpoints to your project. Start moving your slider left and when things start looking out of place you can add a breakpoint and adjust as needed. I would adjust your column span of images to span 12 at the lowest points.

That fixed the problem, thank you!

Another question? How do I make a button (button link) center itself in a column?

I attached a photo; you can see it looks really funny. I'm trying to get that button to be a normal size and center itself with the other (centered) items. I tried it alone and also putting it in a container, but neither worked.

Thank you much for your help!!

You want to make that element a block item then under Dimensions set left and right margins to auto. That should fix you up.

That fixed it, thank YOU!

Your very welcome