A more coherent scheme to make my parallax responsive

GH:https://github.com/nnall/hm-frontend-Nick.git

I have a 2 - page site in react where, in each of 'page''s directory, 'Home' & 'AboutUs', each has a similarly laid out/schemed 'parallax.css', solely for adjusting my parallax groups inside of the parallax wrapper parent, root element of the component.

I'm only using CSS and 'perspective' currently and my components' structure for parallax look like this:

<div className = "parallax_wrapper home_container">
  <div className = "parallax_group">
      <div className = "parallax_layer">centered content box</div>
  </div>
</div>

<div className = "parallax_wrapper home_container">
  <div className = "parallax_group">
      <div className = "parallax_layer">centered content box</div>
  </div>
</div>

The "

wrapper

wrapper

" component gets the

perspective

perspective

setting, and then all "

group

group

" and "

layer

layer

" elements get "

transform-style: preserve-3d

transform-style: preserve-3d

".

My question here has to do with my

parallax.css

parallax.css

code, which is working mobile first on these parallax wrapper containers, and is setting and resetting the

heights

heights

of the first-child "

group

group

" elements, in

vh

vh

, starting tallest for mobile, and gradually with media-query breakpoints, tapering the heights down to less and less '

vh

vh

'. Not all "

groups

groups

" are the same height, so that also has to be accounted for. Is there a better strategy for this with respect to handling responsiveness so that my "group" elements - scrolling slightly slower than their "top_layer" children- can be more reliably resized when the screen changes, so as to not constantly risk overflow/too much height, etc? I continue to spot breaks in the layout, although I've somewhat got everything scrolling with enough space at this point. I'm just looking for a more reliable approach.

GitHub

GitHub - nnall/hm-frontend-Nick

Contribute to nnall/hm-frontend-Nick development by creating an account on GitHub.

A more coherent scheme to make my parallax responsive

<div className = "parallax_wrapper home_container">
  <div className = "parallax_group">
      <div className = "parallax_layer">centered content box</div>
  </div>
</div>

<div className = "parallax_wrapper home_container">
  <div className = "parallax_group">
      <div className = "parallax_layer">centered content box</div>
  </div>
</div>

The "

wrapper

wrapper

" component gets the

perspective

perspective

setting, and then all "

group

group

" and "

layer

layer

" elements get "

transform-style: preserve-3d

transform-style: preserve-3d

".

My question here has to do with my

parallax.css

parallax.css

code, which is working mobile first on these parallax wrapper containers, and is setting and resetting the

heights

heights

of the first-child "

group

group

" elements, in

vh

vh

, starting tallest for mobile, and gradually with media-query breakpoints, tapering the heights down to less and less '

vh

vh

'. Not all "

groups

groups

GitHub

GitHub - nnall/hm-frontend-Nick

Contribute to nnall/hm-frontend-Nick development by creating an account on GitHub.

A more coherent scheme to make my parallax responsive

A more coherent scheme to make my parallax responsive

Similar Threads

Similar Threads

Similar Threads