How to keep everything in place in responsive mode?

I’m using Foundation 1 and I need to keep everything in place when rearranging a window. Right now, it’s cropping the pictures and shrinking the buttons. Anyone knows what to do in this case scenario?

How have you put the banner and button on the page?

Hi
How do you have the image position and size set? For example when im using a sections pro stack it allows me to set it to cover and place the position to the right center. Do you have that option with the stack you are using?

Ok - I have had a very quick look but just to get started:

  • The image is set to FILL the background of a 2 column stack
  • You have then used huge amounts of padding/margin to position both the 2 col stack and, separately, the button in the left hand column

Button Position
The padding and margins (pixels) you use will remain constant on all devices. Hence, a positioning of 500px from the top may work on desktop but will go off-screen on a mobile. I’m sure there are other solutions, but do you have Joe Workman’s Target stack? This would work much better for positioning the button where you want it.

You might also want to play with the mobile first settings in the 2 col stack. Use these rather than the 200px right side padding.

Image Aspect
The image ‘fill’ mode will crop because otherwise it would distort horribly. In essence, you have the issue of how a landscape image looks on a portrait device. If you want ‘full screen’ it will crop. Alternatively, you don’t have full screen on a small device. Also, if you have a fill image background, it’s size is dictated by the overall content (or padding) in the stack.

If you want to control the way the image looks on all devices, you have 2 choices. Firstly, use a stack setting that will keep the original image proportions the same on all devices (i.e. ‘fit’ not ‘fill’). However, this will not be ‘full screen’ on smaller devices.

Secondly, use a stack that allows different images for each screen size. This way you can select a 2nd image that works full-screen on a tablet and a 3rd that works well full screen on a phone. The images will not be identical but rather selected for each use case.

I would typically use Joe’s Impact stack to do this, although there are other approaches in Foundation 6 and Shaking the Habitual’s Source (I generally build with one or other of these).

Hope this helps understand the principles of what is going wrong. I can’t do any more right now as up to my eyes but happy to assist further in the next few days.

3 Likes