Styling this page with CSS Flex-box and also media-Queries

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello there, @comendrun! 👋

  You only need one media query to make the site responsive. Initial styling and another styling for a different layout. I highly recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles. So, the initial styling is for the mobile layout and then a media query for the desktop layout.

  Before getting into the image overlay, I recommend using picture element because there are two versions of the image, mobile, and desktop. By using picture you can decide which version of the image should appear based on the user's screen size. Then, you can use mix-blend-mode and adjust the opacity until it looks similar to the design. For your reference, you can see @DarrickFauvel's solution.

  That's it! Hope this helps.

  Marked as helpful

  0

  ---

  

  KamRan•370

  @comendrunPosted over 2 years ago

  @vanzasetia Wow!Great advice, dear Vanza. I should definitely try what you said. And I really appreciate your advice and helpful advice, it really means a lot to me

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @comendrun Thank you! It's good to know that it's helpful for you! 😄

  0

  

  P

  Darrick Fauvel•490

  @DarrickFauvelPosted over 2 years ago

  @vanzasetia Thanks for the mention, Vanza!😊

  1