Responsive Design Groundhog Day Nightmare

[Stevic_MacKay]

Question:
Best Responsive Workflows to avoid insanity?

Product:
WIX STUDIO

What are you trying to achieve:

I want to create this kind of thing without having to build it 8 times for different resolutions. I’ve managed to get my header and footer looking pretty good here: https://www.stevicmackay.com

What have you already tried:
[Share resources, forum topics, articles, or tutorials you’ve already used to try and answer your question.]

1. Spent over a week moving things around, going nowhere and questioning my life.
2. Watched the pertinent Wix Studio tutorial videos ie. Different responsive behaviours/what they do, stacks, containers, CSS grids, on canvas grid editing, cells, repeaters, element padding and docking…Yadda yadda

Additional information:
Apologies for the hyperbolic title, but I’m losing my marbles over this…I built my website in Wix Editor and then realised my design was diabolically unresponsive on other screen resolutions and I needed to rebuild it on Wix Studio …Attached is one of the layouts I made in Wix Editor that I have been trying to reinterpret in Wix Studio…

I’m still at a loss and feel as though I just need a workflow for the kind of design I’m trying to create for my pages/sections (header/footer done)…It’s essentially like a multimedia presentation for the most part…

It took me 2 days to recreate just one pretty simple page to get it looking good on desktop, tablet and mobile but I found I really needed to create the mobile version almost from scratch, duplicating a lot of elements customised for mobile as all available responsive options just caused chaos (sectional AI has not been particularly helpful unfortunately either).

Is there anyone out there who would be willing to help me work out a “workflow” for the type of content I’m trying to put together here? i.e. I’m imaging something along the lines of:

“Mate, just put everything horizontal into repeaters, stack the repeaters and make sure you set the content to scale proportionately and stretch if in containers. Set text to min 14 max 16 and only use FR for scaling. For content that is not symmetrically aligned, use cells and whack this bing bong on the fling flong and that will suit you right out!”

Something like that…Can anyone suggest anything? Help?

Thanks for reading,
Stevic

[Joseph_Ingram]

Hi Stevic,

It’s a bit tricky for me to understand exactly what you require but you really have to work from desktop version and then by section by section checking how it’s being inherited by tablet and mobile. As sometimes making it complex in layout is what makes instances child versions (screen sizes) not scale well. While it’s not the perfect method working with percentages for margins or for ensuring content fills out without making it look wacky this should help. The statement in horizonal repeaters is a good idea but stacking repeaters with more repeaters is not a great idea as this can make it messy when small screen sizes inherit the styles and should be used in specific instances

If you require more help feel free to reach out luminousblackdesign.com and we can talk more about it over a zoom of something (free help not making you pay or anything).