Fullscreen ok but on mobile not stacking vertical

Hi I’m creating a building-block. It has an image on one site and text on the other site. On full screen it looks as expected but when scaling the image and text the “blocks” are not stacking vertical. So what’s wrong here?
Foundation 6.4.2

I made a codepen (which also behaves strange why are the columns not side by side?):

codepen example

Any advise on this? Thanks :slight_smile:


6.4.2 is quite old. 6.6.1 is the latest version.

Since 6.4.0 the new XY Grid is used by default. For the old float grid use https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.2/css/foundation-float.min.css

See the red notice at https://get.foundation/sites/docs/grid.html

From Foundation v6.4, the Float Grid is disabled by default , replaced by the new XY Grid. Unless you need to support IE 10, it is recommended to use the XY Grid.

Thanks, I know 6.6.1 is the latest version. This project was already with 6.4. Since I do not know what will happen when just kick in 6.6.1. and what I have to change in the code. I wanted to remain using 6.4 for now. - Will have a look at the new grid though.

I adapted my pen with the suggested cdn.
But the blocks still remain aside when the screen size changes :slight_smile:

This is because the additional CSS overwrites the width property and other things.


Here is a codepen without the width: 50% changes: https://codepen.io/DanielRuf/pen/Jjdojvq

I also see other things which can be simplified (transform:translate with 50% and so on instead of text-align:center and flex).

By default elements should not get any width constraints as wrappers should apply these.