Responsive formatting for backgrounds

[dmills1]

I have kind of a unique formatting issue - what I really need is an overview of the settings and what they are all used for, but I can’t find anything this specific in your existing tutorials.

Advanced Anti-Aging Techniques | Cosmetic Center by VIVA | Fredericksburg, VA

Look at the ‘Treatment Options’ section - as you can see it is composed of 3 sections with background images, that align on the big screen but as the screen size shrinks the layout breaks. Ive disabled this for mobile and tablet.

Second example, in the ‘expertise by VIVA’ and ‘cosmetic consultation’ sections the background image gets cut off when the screen gets too big.

I know PRO has a ton of great options so I just need some ideas of what settings and features to use to make this design work.

Thanks for your help!

[rad]

Hi @dmills1,

Thanks for reaching out.

Since you hidden it from tablet and smaller screen. You’ll have to create a similar section with the layout of 1 column, then hide it from the larger device like the desktop. Hence, you have two similar content but the different layout for each device. Or perhaps, what layout do you prefer on mobile devices? It’s only applicable for single columns since it breaks.

As for the second example, the image itself has artistic shape http://cosmeticcenter.wpengine.com/wp-content/uploads/2018/06/doctors.png which will not behave properly on a responsive design. It should be applied on a layout that maintains the aspect ratio, like the revolution slider. Aspect ratio locking is what you need, the standard section and columns change the size as the content height changes (an example is, the column became taller when viewed on mobile, but shorter on the desktop). We can’t force the size since the content changes and it’s not the main purpose of sections and columns, it only responds to width but it doesn’t lock the height.

Thanks!

[dmills1]

Thank you for your help! That makes sense

I do have different sections for different screen sizes, but I am mainly looking at desktop layout as being an issue… but I think I resolved it for the most part by changing the top and bottom padding on the sections…

So, for anyone who wants to try this - Its a background photo, choose “cover” “bottom” and then 155 padding on the top and 145 on the bottom

[jade]

You’re welcome and thank you for sharing your solution.