Docs

[Chris A]

I just upgraded to an iphone 6. I just checked my site on chrome and the background photos are not resizing to be smaller so you can see the whole pic on the phone like it was before…It appears these are not responsive anymore.

Chris Arvan – Artist | Composer

[Zeshan]

Hi Chris,

Thank you for writing in!

Upon checking on iPhone 6 with iOS 8.1, I’m unable to replicate the issue (see: http://prntscr.com/51jzsa). Would you mind confirming again? If you can provide us a screenshot of how it’s appearing in your iPhone 6, we’ll be able to provide you a tailored answer.

Thanks!

[Chris A]

what you are looking at is replicating the issue…that is just showing a tiny piece of the background image blown up.

I want it to actually show more of the whole picture. It was doing that before on my older phone.

maybe there is a setting or some extra code I can put in to control that.

Thanks!

[Rad]

This reply has been marked as private.

[Chris A]

This reply has been marked as private.

[Kosher K]

Hi Chris,

Thanks for writing in,

Upon checking on your site, I can see now the background is re-sizing properly on mobile,

http://i.imgur.com/WGJMvAV.png

I have also notice that you’ve added a height for each band when screen size is in 480 pixel

It looks like your issue has been sorted,

Can you please confirm?

Thank you

[Chris A]

This reply has been marked as private.

[Kosher K]

Hi there,

Can you please try replacing your CSS from this

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
.content-band-1 {
    height: 300px;
}
.content-band-2 {
    height: 250px;
}

.content-band-3 {
    height: 300px;
}

.content-band-4 {
    height: 400px;
}

.content-band-5 {
    height: 500px;
}

to this

@media only screen and (min-width : 320px) and (max-width : 480px) {
	/* Styles */
	.content-band-1 {
		height: 300px;
	}
	.content-band-2 {
		height: 250px;
	}
	
	.content-band-3 {
		height: 300px;
	}
	
	.content-band-4 {
		height: 400px;
	}
	
	.content-band-5 {
		height: 500px;
	}
	.x-content-band.bg-image.parallax, .x-content-band.bg-pattern.parallax {
		-webkit-background-size: cover;
		background-size: cover;
	}
}

Let me know how it works

[Chris A]

Hi,

just tried replacing the css code. Still looks the same on mobile.

[Rad]

Hi Chris,

Due to different sizes of your background, there is no easy way. Example, the fix works on second content band. But not on first.

Replace this css :

	.x-content-band.bg-image.parallax, .x-content-band.bg-pattern.parallax {
		-webkit-background-size: cover;
		background-size: cover;
	}

With this css,

.x-content-band.bg-image.parallax, .x-content-band.bg-pattern.parallax {
-webkit-background-size: 100% auto !important;
background-size: 100% auto !important;
}
/* Need to set background position for first content band, and 
duplicate this area if you wish to control other content band too (with your own positioning) */
div#x-content-band-1.x-content-band.vc.content-band-1.bg-image.parallax.man {
background-position-y: 20% !important;
}

Cheers!

[Chris A]

This reply has been marked as private.

[Rad]

Hi Chris

Cornerstone is using section with rows.

Instead of this,

	.x-content-band.bg-image.parallax, .x-content-band.bg-pattern.parallax {
		-webkit-background-size: cover;
		background-size: cover;
	}

You can add something like this,

	.x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
		-webkit-background-size: cover;
		background-size: cover;
	}

Cheers!

[Chris A]

thanks. that looks much closer on desktop view now, but on mobile, the pics are not resizing so you can see the whole picture. you just see a small portion of it zoomed in.

I had this code I believe that solved this previously, but it does not seem to be effective with cornerstone.

/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
.content-band-1 {
height: 300px;
}
.content-band-2 {
height: 250px;
}

.content-band-3 {
height: 300px;
}

.content-band-4 {
height: 400px;
}

.content-band-5 {
height: 500px;
}

[Christopher]

Hi there,

X-content-band in VC is x-section in Cornerstone, so change your code to this :

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
#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]

thanks. tried changing the code but has no effect. Still looks the same on mobile

[Author]

Posts