Docs

[Thai]

Hi There,
Try adding following CSS under Appearance > Customize > Custom > CSS:

@media (max-width: 480px){
	#x-section-1 {
		height: 300px;
	}
	#x-section-2 {
		height: 250px;
	}
	#x-section-3 {
		height: 300px;
	}
	#x-section-4 {
		height: 400px;
	}
	#x-section-5 {
		height: 500px;
	}
}

Hope it helps.

[Chris A]

strangely that actually fixed another problem, but not the size of the pic on mobile.

It did shift the background pic placement more like my original page on the desktop, but has no effect on mobile for the cornerstone page in development.

I want to be able to see the whole shot in the content band which i can with my original front page. What I am seeing is still just a zoomed in close up of the guitar on the first band. I want to be able to see all of the artwork on mobile.

So far neither of these proposed solutions have worked.

[Chris A]

This reply has been marked as private.

[Nico]

Hi There,

Would you mind sharing us your admin credentials so we could take a deeper look on your setup.

Thank you so much. Don’t forget to set it as private reply.

[Chris A]

This reply has been marked as private.

[Christopher]

Hi there,

Please add background-size: contain; in style field of section where you added this background image, then clear cache and test again.

Hope it helps.

[Chris A]

will give that a try, but where do I find that field in cornerstone?

where you actually add the background image there is no style field. Please provide more detailed info.

Also, how do you clear the cache on an iphone browser? I don’t know of anyway to do this…this was specifically related to mobile.

thanks

[Chris A]

This reply has been marked as private.

[Zeshan]

Hi Chris,

Please add a black background color to your Cornerstone sections, just like you have in your homepage content bands. After that, insert following CSS code under Custom > CSS in the Customizer:

.touch .x-section.bg-image, 
.touch .x-section.bg-pattern {
  background-attachment: scroll !important;
  background-position: center top !important;
}

The results would be similar to this: http://prntscr.com/7fac7j. The above CSS will only work on an actual touch screen device, such as an iPhone.

Let us know how it goes.

Thanks!

[Scott M]

i have same problem with BACKGROUND images on mobile. Sometimes with content band parallax images as well on older phones but more importantly i need a solution for the full background images.

They zoom in so much that you can’t see the original full photo. I don’t care if it needs to create a black border and become smaller to fit. I just need to it fit.

Going on a year now without an answer or a fix.

thanks

[Scott M]

Btw, i have tried every code on here and in the forum and what was online for wordpress support.

This is a big problem for me and others because, when you choose an image as your background, you plan on the colors from the image staying in the same place. Therefor you can add appropriate buttons and text over the image so it is visible over the photo colors.

For instance, My header is white and supposed to be in front of a darker part of my background image. But on mobile, the image zooms into a white color of the photo and the header becomes almost invisible.

http://www.Makehitsong.com
check it out on phone and desktop.

And for a year now, i have been taking pictures according to how this theme will react on devices and browsers. I just want to take a good photo and not have to worry about how it will line up on 20 different browsers/phones/tablets.

thanks

[Chris A]

added black background and this code

.touch .x-section.bg-image,
.touch .x-section.bg-pattern {
background-attachment: scroll !important;
background-position: center top !important;
}

Not Working…It is now messed up in different ways when resizing the the browser window.

does not look right on mobile, looks different while editing in cornerstone than it does when viewing the actual page and parallax does not work right. Black background does not show up in customizer.

also since there are probably different people as ‘staff’ giving these replies, I hope you are looking at the previous replies that were given. do I keep the previous code suggestions in there or not? this is so convoluted now I can’t tell.

Why not just give me an answer of exactly everything I need to fix this at once?…or maybe nobody knows. You also have my admin details, so why not make the changes, make sure that it works and then tell me what you did?

The way this is going is really not working for me.

[Chris A]

found out what was wrong – this code needed to be removed:

background-size: contain;

I was told to add this code yesterday. Unfortunately in the last reply from “Staff” there was no mention that I should NOT have this code in there.

Now the last remaining issue is that the pic in the bottom content band/section, or whatever we are calling that now is still not behaving the same way as my pre-cornerstone made page.

It is too long vertically on mobile and too short vertically on desktop.

Also the vertical spacing is different in cornerstone than when you view the actual page which makes things confusing when trying to design the page. I see black background above the bottom pic while editing in cornerstone, but not on the actual page.

[Rad]

Hi Chris,

It perfectly works now, tested both desktop and mobile. And about the last content band, the background image has black image.

How about editing your image to stretch it up and down, and to conform 16:9 aspect ratio.

It’s good to have a blank area on all sides just in case for parallax clipping. But the blank area should not be solid color or anything that isn’t related to main graphics. All I’m saying is make important graphics element in center of attraction (main viewport), and let the background graphics (blank) stretched from edge to edge.

Hope this helps.

[Chris A]

This reply has been marked as private.

[Author]

Posts