Square boxes on mobile

Design help General
1

Hi all, hope you are good.

Wrestling with keeping square boxes square on mobile, tried a few guides but it may be that we’ve started from the wrong point and need to rebuild them.

Mainly the pages found through the nav > collections

If anyone has a spare minute that would be super useful!

Thanks

G

Here is my site Read-Only: https://preview.webflow.com/preview/ajoto-new-amends?utm_source=ajoto-new-amends&preview=bfb85a0cb0d954ca69e20737ec995672

2

Hi @agh,

Thanks for reaching out about the square boxes on mobile. I am not really sure if I understand what you are trying to achieve, could you help to share screenshots of the page and elements you are working with?

Also, the read-only link does not seem to valid, could you please help to check the read only link and re-share that?

Thanks in advance

3

Thanks for getting back Dave, super appreciate it. :blush:

https://preview.webflow.com/preview/ajoto-new?utm_source=ajoto-new&preview=3fa60719fbbad9cd90fb41ede8652610

I’ll try to explain the best I can.

In a nutshell:
We would like to keep all the square divs to stay square when the site is responsive in any size.

just to note:

We have widened the site from the generic standard container that everything sits in, by setting divs at 1380px wide.

in order to give it a reasonable fix/workaround we have given new pixel dimensions to squares on mobile/tablet but had to add custom code as the breakpoint on tablet landscape went wild, i.e:
@media screen and (max-width: 1380px) {
.container {
max-width: 1024px;

We’ve followed a few tutorials but still wrestling, and we probably need to re-engineer all the blocks but not sure the best way to do this?

so to summarise. Just want squares to keep their dimensions on all screens. I’ve attached some screen grabs taken from the ‘journal’ > journeys’ pages.

Hope I’m making sense.

Thanks a lot!

G

4

I’ve tried to look in to this before but never actually solve it in Webflow. Maybe you already seen this
https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css

One solution, as they say in the link, could be using VW and VH.
Edit: Try using VH on both Height and Width

This square is 20 vh on both height and width
https://jorns-awesome-project.webflow.io/

1 Like
5

Thanks for this Jorn, great direction to find a solution!