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 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?
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.