Hi,
I’m building a site and I started with the desktop version. I used percentage for sizes and distances, and “em” for typography. Once I finished with the desktop I checked the tablet and mobile version and I realised that all of the elements were misplaced so I started to correct them. But once I finished the mobile version, all the elements were misplaced on the desktop!
Which is the correct approach to correct all the elements in each viewport without modifying the rest?
Thanks in advance.
You have it right… start with Desktop and go down… however keep in mind your layout structure is actually more important that sizes, em, etc. By that I mean, your div layers:
However you structure it, the Section can be block, Div wrapper Flex, Div content Block or Flex, Content override alignment to adjust. All of this can get a little confusing once you get to mobile.
So on Desktop, look at your layers, knowing you don’t want to start changing “Layout Structure” on other viewports, only text sizing, spacing, div %'s maybe. These are small changes you will do on each viewport.
But this is really only logical if you’ve thought it out from a layer spective in your Desktop thought process. You already know you’re going to lose space, so build lean layers on Desktop, don’t over layer here. That’s when your text and images suffer because they’re getting squeezed from too many layers. If that make sense?
But you’re on the right thought process
Try to follow some of this workshops (you find some tutorials about - site from zero + responsive):
https://webflow.com/workshops-archive
@garymichael1313 thanks!!! I think that now I have everything more clear. I think that the first time, the elements changed in the other viewports because I changed the layout on mobile :/.
@Siton_Systems thanks!! I’ll check some of the videos, they seem interesting and maybe they’ll help me in building the site in the correct way.
No problem, have a great week!
This topic was automatically closed after 60 days. New replies are no longer allowed.