Archived topic
Adjusting background image on mobile
5 replies · Started by Ryan on April 17, 2022
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?
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! :)
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?
I find opening the List View helpful in knowing which Block is which. Selecting a Block also highlights which Block is selected. :)
Thanks for the CSS - it worked! Is there a similar class / additional CSS that could help me resize the H1 for mobile?
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.
