Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1193383

    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

    #1193420

    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,
    Rikard

    #1193525

    Hi 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

    #1193722

    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,
    Rikard

    #1194621

    Hi 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 image

    So 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

    #1196509

    Hi Rikard,

    Did you already find a solution to my problem?

    Best regards,

    zizibe1

    #1198992

    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,
    Ismael

    #1199137

    Hi Ismael,

    Thank you for your reply.

    Meanwhile, I hired a Codeable expert which solved my issue.

    You can close this topic.

    Thanks,

    zizibe1

    #1199148

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Background image too high on mobile screen’ is closed to new replies.