I’m having some struggles with the method I should use to make my landing page mobile friendly.
When I first created it i had in mind that I should make it first, then making it mobile friendly, which was, I think, a mistake.
So what I did is I duplicated my landing page, and on the copy I made all the adjustment necessary for a mobile version,but then I had to make modifications on the original landing page, which I now have to do on the other, which does not feel right and optimized, because if I keep this method, when I’ll build more complex app I will 100% make modification on one and not on the other…
So that’s my issue if someone have advices It’ll be so great.
Best approach would be, go for responsive design and not a fixed layout design.
You can arrange the containers as column / row and set the min width, max width property as needed.
This way, your app will automatically fit in different screens. You can also check the design responsiveness from the bubble’s responsive section.
Okay thanks for the tips, I’ll check the bubble responsive section.
But I didn’t went for a fixed layout design, I always use rows/ Colomns and I always use max-min width, but even with that when I go to the responsive engine to see how the page look on a mobile of 320px it’s awful, everything is in everything and I can barely recognize which group is which ,so that’s why I though there’s some sort of magic trick that I didn’t know.
I see!
In that case I would suggest you to play around with 2 groups first.
In a row container, add 2 groups. Set the min-width and max width to maybe 50%. this way they will stay side by side but when the screen size is small, they will be in their own column.
Moreover, you can use conditional logic by the Current page width property and set the min max width.
