Parallax Pro browser issue with images

[designerwriter]

The homepage images are only partially showing up in the mobile version on an android phone. I was told it was a browser issue. Is there a code that I can set in CSS that makes the browser reveal the full images on the home page in the mobile version? Thanks in advance!

http://i-5cannabisholdingsltd.com/

[designerwriter]

Is anyone out there who can answer my question?

[bwhatley87]

I have this same question.

[ᴅᴀᴠɪᴅ]

Which part of the image isn't showing? If you mean the sides, then this is neccessary otherwise the image would need to be stretched in order to fit.

If you're talking about seeing the end of the image when you scroll, this is due to the parallax effect, so in this case you'd need to upload an image with a larger height.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[Rama.myVA]

I'm having this same problem with parallax.
site is https://ramakalia.com/

on desktop browser, looks great.

on mobile it shows only a blurry abstract of left side of images.
Is it possible to have the images resize more appropriately? Responsively?
Otherwise this is not really a fully responsive theme?

I wanted to add text to my home page background image, but without knowing if it will resize, at this point there is no point?

I have checked site on both iphone and ipad - both vague, blurriness as background.
On the demo site - images anyway - looks like the guitar image adjusts on the mobile?

Any insight? Solutions? Many people must have come across this? Parallax has been around a while. Appreciate your help.

Thanks,
Rama

[Rama.myVA]

on a phone at least your images still look sharp/clear/detailed.
What size images are you using? Do you know the resolution?

My photos are just a blurry abstract. Not sure what to try.
Hope someone has some insight for us.

Thanks.
R

[apple_jax]

Hey There,

I got somewhat of an answer from studiopress:

The default in parallax is to not reduce the original size of the images, so there is plenty of image to fill the screen. In the past, I have used images with items on a smaller scale, and that worked better for mobile not looking so terrible.

If you want your images to reduce, you can replace following code block at line# 1836, in your child theme's "style.css" file.

However, the line that says: "background-size: contain" will ensure that your images are 100% in screen, and might create issues with your home page text/layout.

If anyone has a better solution to this, or knows other options for the background size issue, I would love to know it!

CSS HERE:

Change From:

.home-section-1, .home-section-3, .home-section-5 {
background-attachment: scroll;
background-position: top;
-webkit-background-size: 100%;
-moz-background-size: 100%;
background-size: 100%;
}

To:

.home-section-1, .home-section-3, .home-section-5 {
background-attachment: scroll;
background-position: top;
-webkit-background-size: 100%;
-moz-background-size: 100%;
background-size: contain;
}

[apple_jax]

Scratch that. I changed 'contain' to 'cover' and that seems to work the best.

[Rainbowsplash]

I'm ready to dive in and get Parallax Pro for a band site, but the demo doesn't even show on iphone properly. Have you been able to get this working properly? Here's the live demo link, which only shows a small portion of the home page image: https://my.studiopress.com/themes/parallax/#demo-full

[apple_jax]

Yes. Mine is working fabulously: http://flourishboston.com/

[Rainbowsplash]

Yes, I checked on my iphone and your site looks great. It seems like the best images will be where the sides aren't so important. 🙂 Thanks for letting me know.

[apple_jax]

Yes. The thing to remember is that mobile & desktop images are different proportions.

Choose photos that have objects near the center and give your edges some space for adjusting to screen size

[Author]

Posts