Background image too large on mobile devices

Support
#1

Hello,
I’ve gotten my site to how I would like it to function on a desktop, but when loaded onto a mobile device the background image is gigantic and difficult to navigate. I have some css for the background image, so I am hoping I can get help on what needs to change for it to work the same across all devices.
Thank you
Shireen

#2

Hello @syarahmadi,

Thanks for writing in! :slight_smile:

Please add this code in X > Theme Options > CSS:

@media only screen and (max-width:767px) {
     .x-bg-layer-lower-image {
         background-size: contain !important;  
     }
}

Hope it helps.

#3

Hello,
That worked great for the image, but now the buttons are distorted and not placed on top of the background image as it is in the desktop version. Is there any way to fix this?
Thank you for your help!

#4

Hi There,

Actually, that did not look quite right because of the min-height: 420px you applied on the Columns, if that 2 columns began to stack in the mobile view your total section min-height would be 840px + the height of the content/button, that’s too much height for 2 buttons. Please remove the previous given CSS and add this instead.

@media (max-width: 979px) {
	.column-btn1 .x-column.x-1-2 {
		    min-height: 0 !important;
	}
}

This will reset your column height to 0 when viewed on mobile screen (979px and below)

Hope that helps,
Cheers!

#5

Yes!! Thank you!

#6

You’re most welcome!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.