Responsive backgrounds that align with proceeding and previous sections

[erikabarker]

Hi there,

I am working on the following site:

https://www.victrixgaming.com/front-page

Please ignore the header. That’s a work in progress.

Everything looks great on a large screen, with all section background images aligning up with the proceeding section. However, when you use a mobile device or a small screen, the site looks weird and the background images are not responsive.

Currently, I have the height set to each row within the respective sections set to 1440px. I was wondering if there was a better approach to do this where the background is fluid, yet does not lose alignment with adjacent sections.

Thank you very much.

[christopher]

Hi there,

Unfortunately, it is not possible with the design that you have at hand. Currently, the background is set to cover and if you set it to contain it will be worse.

I am not sure what will be the alternative, but maybe having separate sections for mobile with proper images can help. Kindly clone the section you have and click on the magnifying glass icon of the cloned section and then click on the customize tab of the section options. you will find a section to Hide/Show the section based on the screen width.

For the newly added sections hide the section for the desktop views and show it for mobile views then go to the section options and add proper background images for mobile.

For the sections that you want to show only on the desktop just go to the customize tab of that section options and set it to show only on desktop screen.

That is the only solution that I can think of to be able to implement the markup that you have.

Thank you.