Mismatch between screen sizes

[soleystefans]

Hello,
I am trying to get this sites design to work on mobile: https://mariaellingsen.com/
A background image is appearing out of nowhere on mobile behind the ‘Actress’ text - and all kinds of responsive features out of order, like image sizes. Hope you can help.

Thank you, Soley

[ruenel]

Hello Soley,

Thanks for writing in! You are having this issue because you have two separate sections that show/hide in specific screen sizes.

Please use only 1 section and make sure that it will display on all screen sizes by disabling the “Hide During Breakpoints” option.

Or you could edit the section for smaller screens and make sure that you have added the correct background color or background image.

Best Regards.

[soleystefans]

hi again and thank you.

I made the separate section to design it differently for mobile because the site looks really bad on mobile, although it looks nice on the computer. And the only way I have found to design it differently on a mobile is by doing this. I have deleted this separate section again and it still looks bad on other devices. For example images are different on an ipad and iphone portrait layout, disappear (main page Director section) or wrong image displayed (mobile Teacher section).
I really need to get this site looking nice on ipad and mobile also so I really would appreciate your help.
allt the best, Soley

[marc_a]

Hi Soley,

I check your teacher section on the mobile and iPad view. It seems that you have a custom CSS that will change the background image. I suggest that you double check your custom coding.

Hope that helps.

[soleystefans]

Hi and thank you,

I have taken away all my custom coding and everything is still bad. I have no custom coding and still now on mobile there is no image appearing in the Director section, and the image that should be there is below in the Teachers section… all a mess.
And now the buttons on the site are not as they should be… suddenly they are red and looking awful - even if the setting in X customizer are set to have them transparent with orange line around.

hope you can help.
Best, Soley

[ruenel]

Hey Soley,

The background image you used in the Directors section is quite small and the Parallax effect is enabled. You would need to force the background size to cover so that the background image will cover the entire screen browser width. You can do this by adding background-size: cover !important; down in the style field.

Best Regards.