[Ryanbrown1987Participant]

Hello X team!
My header image (through visual composer, not Customizer) on my new homepage test is not responsive. The other images, which are parallax based as well, auto resize to a nice looking full image. This header image ends up just getting zoomed in on which makes the scrolling length enormous and the image a bit pixelated. Can you help make that image more responsive?

Page in question: http://www.Lostboymemoirs.com/homepage-test

Tested on: iPad and iPhone on Chrome, Firefox, Safari, and Duck Duck Go.

Cheers!

[RadModerator]

Hi Ryan,

Thanks for posting in.

Parallax is disabled on mobile and it will only try to fill the height or width (whichever side is bigger). I checked your site and the height is bigger on mobile, hence, it will try to fill the height while ignoring the width.

You can add this CSS to Admin > Appearance > Customizer > Custom > CSS to make it fill the width no matter which is bigger.

@media ( max-width: 979px ) {
.x-content-band.bg-image {
    background-size: 100% auto !important;
    background-position: top center !important;
}
}

Hope this helps.

[Ryanbrown1987Participant]

Hello team,
I put that into the custom css and that did not seem to work at all. Any other way around it? Cheers!

[ChristopherModerator]

Hi there,

Upon checking your site, header image was displaying fine, please see the attachment.

Please clear cache and confirm me or provide us with some screen shots.

Thanks.

[Ryanbrown1987Participant]

Hello X Team,
The Header image displays, but it’s zoomed in instead of full-width image. The parallax backgrounds below it display as still images at full width, not zoomed in like this. I’d like them to just be responsive and now just zoomed in on when viewed on Mobile since there is a lotto scrolling just to get to content below. Any resolution? Thanks!

[Ryanbrown1987Participant]

Here is an example of how I’d like the header image (which is not the header through Customizer, only through visual composer as the first background image)

Example image below. It’s a different image attached but just to show you the width not zoomed in but responsive.

[Ryanbrown1987Participant]

Image example

[Nabeel AModerator]

Hi there,

Try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.page-id-7840 #x-content-band-1 {
    max-height: 650px !important;
}

Let us know how this goes!

[Ryanbrown1987Participant]

Hey team, I’ve added that code in, refreshed and emptied cache,test on an iPad with Chrome and Duck Duck Go and Safari and it still zooms in on the first background image.

Whats next?

Thanks for the help through this!

[ChristopherModerator]

Hi there,

To resize background image we should use background-size property and it has limitation, please add following code one by one in customizer and check which one give you a better result.

@media (max-width:480px){
.page-id-7840 #x-content-band-1 {
    background-size: contain;
}
}

@media (max-width:480px){
.page-id-7840 #x-content-band-1 {
    background-size: 100% 100%;
}
}

@media (max-width:480px){
.page-id-7840 #x-content-band-1 {
    background-size: cover;
}
}

If you’re not satisfied with result, use visibility options and hide this section in mobile devices, the add another section and display it for mobile. Add appropriate background image to this section.

Hope it helps.

[Ryanbrown1987Participant]

None of the codes worked. Just wondering if you can too me how to change the displays in sections for mobile and non mobile? In visual composer when I click edit it just shows the background and parallax options, and css area.

Thanks

[ChristopherModerator]

Hi there,

I found syntax mistake in your CSS.

Find following code in customizer :

.home .x-topbar img {
    display: block;

a.x-creative-cta {
    text-decoration: none !important;

And close curly brackets.

Then you should see the changes when you add provided CSS.

Note that you should add provided code in Customize -> Custom -> CSS.

Hope it helps.

[Ryanbrown1987Participant]

Hello team,
I did what you instructed and it half worked. It doesn’t zoom in far but it still does crop it, leaving content far below the fold which on mobile isn’t too great. I tried adding every single code on here one by one, and also all in the CSS together. Right now it is still cropping the sides, but when turned landscape view zooms again. The other background images on the page seem to fit perfectly in the page which is nice.

When I added some of the codes above it seems to make the image responsive but created a massive white space hundreds of pixels long between the image and the counters below it.

Thanks!

[RadModerator]

Hi there,

That’s the issue when working with background image where the image aspect ratio doesn’t match with container’s aspect ratio. Hence, background image sizing has many options depending on each scenario. In real life scenario, it’s like putting a landscape photo to portrait frame, you’ll have to crop the sides to fit it, and there will be empty spaces on top or bottom.

How about providing a mockup design of how should it appear on mobile, tablet, landscape, and desktop? That way, we can think or proper sizing for each screen size. There is no universal solution for this as it depends on one existing dimensions of content and image.

Thanks!

[Author]

Posts