Approach to responsive with complex layout?

[WaveLynx]

Hello - I have a nice layout with an overlapping mobile image straddling my header image. Thanks for the tips on that! Now I see that my cool design has some issues with responsiveness. Is the best way to solve this to go into each element and add breakpoint code for each in hopes of creating the 4 non-desktop renderings? That might means that for my elements (headline, phone, download links 1,2 ) that I might need to add 16 different directives. I just wanted to make sure that I wasn’t missing something I’m decent at adding custom view-port controls, but I don’t do it every day. Time to practice!

Live view of my layout.

MyPass Mobile Credentials | WaveLynx Technologies

[WaveLynx]

Hello again -

Just to clarify. I’ve always wondered this. I wish there was a way to select a mobile viewport size SM and set parameters for that responsive state in the visual controls and layout inspector. I want to make sure this is not possible before I had code all my adjustments in the Customize section.

Thanks

[ruenel]

Hello @richexperiences,

Thanks for writing in! You do not need custom coding. You just need to set the column layouts for each respective screen sizes. To better understand how to accomplish layout, please check out this video tutorials first:

And if you are using Pro theme, it is also a good choice to use the Grid element:

Kindly let us know how it goes.