-
Posts
-
Hi,
In the color section on my front page, I inserted a background image. I also placed three columns in the color section: 1/4, 1/2, 1/4
In the middle column, I inserted an image element. In the image element, I inserted an SVG. To align the SVG vertically, I clicked on „Edit Cell“ of the middle column, and then I went to Styling > Padding > Padding-Bottom > 500px
On desktop screen, the front page looks the way I wanted it to. But on the screen of my iPhone, the background image is too high and it shows too much of the foreground of the background image.
How can I fix this?
Please find a screenshot in the private content area.
Best regards,
zizibe1
Hey zizibe1,
Thanks for the login details. Wouldn’t it be better if you set the Color Section to have a minimum or custom height instead? Please try that out to see if it works better.
Best regards,
RikardHi Rikard,
Thank you for your reply.
I went to Color Section > Edit Section > Section height and tried out the different options concerning the section minimum height, but I can’t see any difference.
Maybe it’s because of the hight of the image I inserted in the color section. So, I cropped the image at the bottom. But now, on the desktop screen, the background image shows too little of the foreground. And on mobile screen, the background image is still too high.
Please find a screenshot in the private content area.
How can I solve this problem?
Best regards,
zizibe1
Hi,
Thanks for the update. I see that you still have the 500px padding on the column with the image in it, you need to remove that first. Otherwise you will likely see the same thing as without it.
Best regards,
RikardHi Rikard,
Thank you for your reply.
I removed the 500px padding on the column with the SVG (caption) in it. Now I can change the section height, but I don’t get the result intended.
1.
The background image in the color section should have at least 100 % of the browser window height on desktop screen. I don’t want to change this setting.2.
When I remove the 500px padding on the column with the SVG in it, the SVG stands too low. The SVG should stay in die upper half of the background imageSo I went back to my original settings I had described in my first post.
To correct the layout on mobile screen, I duplicated the color section of the front page, cropped the background image, adjusted the settings and then selected to hide it on all screens except mobile.
Now, on desktop screen, tablet screen vertical and smartphone screen vertical, the layout is okay.
According to this method, I also tried to correct the layout on tablet screen horizontal and smartphone screen horizontal, but it didn’t work:
– On tablet screen horizontal, there’s too much of the foreground and too little of the sky of the background image visible.
– On smartphone screen horizontal, the SVG is too big.How can I correct this?
Please have a look at the screenshot in the private content area to see how the layout looks on the different screens.
Best regards,
zizibe1
Hi,
Sorry for the late response. We’d like to try and help with the issue but the screenshots above are not available anymore. Can you post the screenshots again? You can use imgur or dropbox instead.
Best regards,
IsmaelHi Ismael,
Thank you for your reply.
Meanwhile, I hired a Codeable expert which solved my issue.
You can close this topic.
Thanks,
zizibe1
- The topic ‘Background image too high on mobile screen’ is closed to new replies.