Hey Sarah!

That was super informative. This will definitely help me moving forward on other requests. I really appreciate the detail of your explanation. You rock!

For the second option B (CSS to apply to the homepage.)

@media only screen and (max-width: 767px) {
.responsive #top:not(.home) #main) {
padding-top: 80px !important;
}
#top:not(.home) #header {padding-top:0px !imporant}
}

, with this CSS, thats what I want to do! But I just tried the CSS and it looks like the images didnt move away from the header.

Could you help?

Thanks!
Chris

Yo!

Thanks so much man, you saved the day for me haha. You were right! It was this custom CSS that made it jump:

@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency {
background-color: transparent;
position: absolute!important;
}}

Thanks again!
Chris

Hey!

I actually don’t seem to have the problem anymore on my homepage, on desktop. I wonder if it fixed after I changed the grid row containing the text not to “set the height to 100% of browser height”.

It looks good on desktop now, but it’s still happening on my mobile phone when I swipe down? Do you see how the text jumps?

Thanks!

Hey John,

Thanks for the quick response! To specify:

On my homepage, I currently have a short intro then a chevron icon. Below is the masonry portfolio.

I want to create the parallax effect where these two elements stay in place, but when the visitor scrolls down, the masonry portfolio appears, and the chevron goes away.

Let me know if that makes sense, thanks!

• This reply was modified 7 years, 7 months ago by ccyran.

Hey guys!

Sorry I figured it out. You can lock this thread! And for anyone who may search for this in the future, looking for a solution, here’s what to do:

Make sure your Grid Row element called “Custom Minimum Height” isn’t set to “At least 100% of browser window height”. Doing so hides any other grid row elements until you scroll down. Try setting it between 25 – 50%.

And as for the chevron, make it a separate grid row element, but change the “Cell” alignment to bottom. Then just mess with the margins on the grid row above this one containing the chevron arrow.

Thanks!

Hey Rikard,

Excuse my lack of understanding, the part that says “YOUR CSS GOES HERE”… what CSS?

max-width: 1024px;
margin: 0 auto;

Apologies! I figured it out.

Thanks Rikard!

• This reply was modified 7 years, 7 months ago by ccyran.

Hey Ismael,

Specifically, how do I adjust it only to the opening copy on my homepage?

Thank you!

Hey Mike,

I tried that but then it throws off the rest of my page. The masonry grid breaks and I dont get any control over how I want to control the text padding. So in short, I can’t do this because a color section doesn’t give me the same precise control that a grid row does.

I guess I’d have to suggest in the enfold forums to update the grid row elements to include a parallax option.

Okay thanks!

Did you check it out on mobile on your phone? It’s really noticeable there.

Hey I do! Is there anyway to add a margin only on mobile so my fullwidth images don’t sit underneath my header logo and hamburger navigation?

Hey John,

Thanks for the response. I apologize Im confused. My ask isn’t just for that page with the split image, it’s for every one of my projects. Each project opens on a fullbleed photo. But it’s not responsive at all on mobile.

I’m confused by having to upload another image exclusively to mobile screens.

There isn’t simpler CSS that would make those fullscreen images fullwidth on mobile?

Thanks!
Chris

Hey,

Im using a Macbook Pro 13″ Inch with Retina display. 13.3-inch (2560 x 1600).

This affects all grids right? Not just text within a grid?

Thank you,
Chris

Hi Rikard,

See below! Let me know if this makes sense…

Page: http://www.ccyran.com/projects/rga-stories/

I’d like the body copy width to stay around this width regardless of the browser width:
https://ibb.co/kdWoi5

Instead of this happening when the browser width is wider:
https://ibb.co/mUwoi5

So I want to have the similar text responsiveness as this website. The way the body copy width eventually stops expanding after a certain width, regardless of how wide the browser is.

Thanks!
Chris

• This reply was modified 7 years, 7 months ago by ccyran.

Hi Nikko,

No worries. It worked!!!! Dude thank you so much. I super super super super appreciate it!

YOU ARE THE MAN! Thanks so much!

*Got your note about making new threads too*

Thanks Ismael!