Site logo

[Support request] Adjusting background image on mobile

Home Forums Support [Support request] Adjusting background image on mobile

Home Forums Support Adjusting background image on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2191820
    Ryan

    I created a full page static homepage using a Block Element. The homepage is exactly how I want it in desktop view, but in mobile, the background image is very awkwardly placed in the bottom corner of the screen and overlaps my signup form. Is there any way to adjust the positioning of the image in mobile view (more centered, not overlapping the signup form) without having to redo desktop as well?

    #2191826
    Fernando
    Customer Support

    Hi Ryan,

    I checked your website once more and it seems you’ve left the fill-height class in the Child Container Block. It would be good to remove this as it gives that Container a specific height which I’m not sure you prefer.

    With regards to the Background image, you can add another class to the outermost parent Container – mobile-image-position, and add this CSS:

    @media (max-width: 768px) {
        .mobile-image-position {
            background-position: 95% 23% !important;
        }
    }

    Kindly modify the percentages to your preferred values. The first one is denotes the x-axis value and the second one is for the y-axis.

    Hope this helps! 🙂

    #2191831
    Ryan

    Hey Fernando, I will try this. I think I am struggling to identify which container is which. How can you tell the containers apart since they basically look the same?

    #2191854
    Fernando
    Customer Support

    I find opening the List View helpful in knowing which Block is which. Selecting a Block also highlights which Block is selected. 🙂

    #2192172
    Ryan

    Thanks for the CSS – it worked! Is there a similar class / additional CSS that could help me resize the H1 for mobile?

    #2192188
    David
    Staff
    Customer Support

    Hi there,

    use the GenerateBlocks Headline block to add you H1 – it has all the style controls you need including separate responsive settings for Tablet and Mobile. So you won’t need CSS.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.