Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

How to change Wordpress Parallax container for portrait size iphone scrolling

When iphone position portrait, large blank space between parallax scroll and first text element. In landscape all looks good.

Can you please help me with CSS code to make the parallax scroll fit just the portrait size container?

THANKS!!!

6 Answers

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,240 Points

Hi, Alison. I'm not quite sure what you're getting at. Can you upload a picture and paste the link here so I can see what's going on? Also, it would help if we could see your CSS/HTML so we can more easily identify the problem. :)

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,240 Points

Ah, okay, so it's the scroll down arrow icon that's acting up. I'd have to actually see the site (or the full CSS file; the one you linked was the customization CSS file that you can override default theme styles with) to be able to diagnose what's going on. Is the site live? If so, can you send a link?

One of the screenshots has the link in the picture... THANKS!

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,240 Points

Okay, so what it looks like is happening is the top div under the menu bar is setting its height to 100% upon initial loading of the page and putting the arrow icon in the middle. However, the parallax image behind is wider than it is tall, and the background-size property of the div that contains that image is set to contain, which means it will try to fit the entire image inside the div. So when you view it on a phone (or on a device in portrait orientation), the image will try to fit in the top of the div, leaving white space below it.

This can somewhat be mitigated by setting these background properties on the div:

.upb_row_bg {
  background-size: cover;
  background-position: 50% 50%;
}

However, depending on where the background styles are being set within that WordPress theme, you may have to override it by using the !important flag after each of those values.

That being said, because the image has text on it, that text will become cut off on the sides when viewing the site on devices in portrait orientation. The best solution would be to use the image without text and use a paragraph tag for the text instead.

I understand what you are saying and appreciate your help! 2 heads are better than 1, but...

The CSS lost my images on the iPhone...

Must say, for all the feedback this theme had, I have been truly disappointed. Where to turn now???

Thanks for you time :-)