Search code examples
cssresponsive-designmedia-queriesparallax

Is there a way to make this parallax effect responsive? (CodePen inside)

I'm in love with this super simple template:

CodePen page

I was wondering how could I make this look good on mobile devices. I tried adding media queries, ending up with messing the whole parallax thing.

Any help will be much appreciated!

Thanks.

Solution

  • First of all you need to add the following to the settings of your HTML in the codepen (usually you add this inside the <head>.

    <meta name='viewport' content='width=device-width'>

    Now that you're ready for responsive you need to work out how you want it to look on the smallest viewport (mobile first).

    In this case I've updated the width to be 80% rather than a fixed em value, but the same logic applies by adding a margin-left of negative half the width.

    #bannertext { 
  width: 80%; 
  position: fixed; 
  top: 20%;   
  left: 50%;
  border: .5em solid #fff; 
  margin-left: -40%; 
  padding: 2em 0; }

    Now that you've got it working on the small screens you just set your breakpoints including either other percentage values or fixed values. This is only one additional breakpoint, but you should see how you can expand that to your needs.

    @media screen and (min-width:30em){

  #bannertext { 
  max-width: 24em;
  margin-left: -12em;    
  }
}

    CodePen here