Hi,
My site looks different when viewed on a mobile device. Text sections appear above the background image, in stead of on the image, like shown on the desktop version. For example, www.demotortrainer.nl/boeken looks like it should, but the mobile version shows a black space on top:
I enabled the responsive layout in the Page Builder settings already.
How do I fix this?
Hi Hank
In Custom CSS you have the following rule:
page-id-400.layout-full .panel-row-style.panel-row-style-full-width { padding-top: 0; }Try changing that rule to:
page-id-400.layout-full .panel-row-style.panel-row-style-full-width { padding-top: 0; background-size: cover !important; }Hi Andrew, thanks. Changing the code doesn’t seem to work. Now, when I visit the page on my mobile, it looks like it should for 0,5 seconds and then it flips back to the previous situation.
ps. it also happens on the other rows with 2 columns on which I use 1 background image, for example http://www.demotortrainer.nl (scroll down to ‘vincent gaus’)
when I use a row with 1 column, things look right.
Sorry, I’m missing a period, please, try using:
.page-id-400.layout-full .panel-row-style.panel-row-style-full-width { padding-top: 0; background-size: cover !important; }Yes, that works. I used the code for all the subpages as well and all the rows look good on a mobile phone now.
Great, thanks!
Super :) Glad to hear that did the trick. All the best.