Help code didnt work for background

Support
#1

Hello,

My desktop back ground looks fine but not when I made a dulplicate section for mobile it does not look like it used to…

I was given a code for the image to be the background and fit nicely on tablets but the code did not work out and I deleted it. I also messed around to try and figure out how to make it look right again on mobile and tablets but it is not working. Please see attached screen shots for mobile and tablet.

As you can see, the tablet is some how showing both duplicate sections…
On both the tablet and mobile the image is not fitting properly again, even though I scaled the image in ps.

See attached images.

#2

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up.

For support, all questions are to be posted in the Themeco category or by clicking + Support. The other categories are for discussion with fellow Apex members. Please keep this in mind in the future. Thank-you!

How support works.

#3

Hi There,

Thank you for writing in, I think you have a good two section foundation there that switch between desktop and mobile. The issue that I am seeing here is

  1. Your desktop section (section-1) background-image is not accessible or does not exist (http://theglassslipperllc.com/wp-content/uploads/2017/06/MOANA-ISLAND-PRINCESS.jpg) please inspect your section 1 and reset its background-image.

  2. The mobile section (section-2) background-image looks great on a portrait view (https://prnt.sc/fv27pi) because that background-image is portrait oriented, right?.The issue is when the page is viewed on landscape view (https://prnt.sc/fv298g), to resolve this we need to switch the background-image when the page is viewed on landscape orientation.

@media only screen and (orientation: landscape)  {
	.home #x-section-2 {
		background-image: url(LANDSCAPE BACKGROUND_IMAGE URL HERE) !important;
	}
}

Replace the LANDSCAPE BACKGROUND_IMAGE URL HERE with your actual landscape oriented background-image.

Hope it helps,
Cheers!

#4

I don’t think that is really my problem, I don’t like how it looks on mobile like the photo is half way down the page and enlarged some how.

I am also not sure how to reset the background like you told me to try that. How do I do that?

www.theglassslipperllc.com

#5

Hi There,

It looks like that because the section does not have enough height. We should not controlling the background-size because if we do your image will look squash and stretch

screenshot

You did already reset your desktop (section 1) background-image, but that is not a landscape oriented (this image) so your background-image does not look right on desktop. Please have a landscape oriented background-image on your section 1.

And then add this on your custom CSS.

/*To solve the background-image issue on landscape mobile */
@media only screen and (orientation: landscape)  {
	.home #x-section-2 {
		background-image: url(https://ichef-1.bbci.co.uk/news/1024/cpsprodpb/693C/production/_95804962_p0517py6.jpg) !important;
	}
}

/* to solve the background-image issue on portrait mobile  */
@media only screen and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
  	.home #x-section-2 {
		height: 100vh !important;
	}
}

Please replace the cat-image with your own landscape image.

Thank you.

#6

But when I view my website on desktop it looks fine, it does not look like the image you attached. I am not sure where you got that from. Also, how is my image not landscape with the image of Moana standing up…?

The screen shot you sent is supposed to be only for mobile and tablets

www.theglassslipperllc.com

#7

Hi There,

Yes, I can see the image is fine on desktop. What we meant was, on cases like this, landscape image means it is more wider, the width of the image is higher than the height. Moana should be on the center with more spaces on left and right.

#8

How can I make my image fit better on mobile it originally is this. Which to me should fit fine on mobile, however it doesn’t fit nicely. How can I make it fit. See attached image.

www.theglassslipperllc.com

#9

Hi,

You can try adding this in Custom CSS

@media (max-width: 480px) {
.home #x-section-2 {
   background-size:contain !important;
}
}

Hope that helps.

#10

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