Mobile first responsive site using Flexbox and Media Query

Community feedback

• 

  John Rey Faciolan•220

  @juani2Posted over 3 years ago

  Hello, we used similar approach with this challenge. I also used positioning with offsets but combined it with view port units. heres a snippet from my solution:

  .profile-card-section {
      background-color: hsl(185, 75%, 39%);
      background-image: url('/images/bg-pattern-top.svg'), url('/images/bg-pattern-bottom.svg');
      background-repeat: no-repeat, no-repeat;
      background-size: contain, contain;
      background-position: top -35vh left -35vh, bottom -35vh right -35vh;
      display: flex;
      align-items: center;
  }
  

  the top left and bottom right ensures that the two background stays on the opposite corner while the -35vh offsets the background images in all 4 directions.

  the positioning of the background image took most of my time while doing this challenge 😅.

  If you have time, you may check and review my solution too. here's the link: https://www.frontendmentor.io/solutions/vanilla-css-flexbox-dZ5E1TRAu

  0

  ---

  

  dariachi85•50

  @dariachi85Posted over 3 years ago

  @juani2 Hi! That's sounds interesting and look better! ahaha Thanks. I'll try it out if you don't mind :)

  0

  

  John Rey Faciolan•220

  @juani2Posted over 3 years ago

  @dariachi85 , Yes. yes

  Although the 35vh offsets is not that pixel-perfect offset at least it works.

  0