Responsive page using flex

Community feedback

• 

  SuperJulia2024•220

  @SuperJulia2024Posted about 1 year ago

  Hi Juan,

  As Ahmarlftikhar has mentioned, you have to set the height of the container to 100vh in order to give some "space" to your main div so it can center in the page. Once this is done, you have to set "justify-content" to center and "align-items" to center (NOT align-content ! Align-content only takes effect on multi-line flexible containers, where flex-wrap is set to either wrap or wrap-reverse. A single-line flexible container (i.e. where flex-wrap is set to its default value, no-wrap) will not reflect align-content).

  To make your images responsive you have to use media queries. For example:

  • For mobile screen:

    <img src="./images/image-product-mobile.jpg" alt="Product picture" />

  • For desktop screen: @media (min-width: 1200px) { img { content: url("./images/image-product-desktop.jpg"); } }

  I hope it helps !

  Marked as helpful

  1
• 

  AhmarIftikhar123•660

  @AhmarIftikhar123Posted about 1 year ago

  assalamoalaikum! set the height of container(body) to 100vh. for changing image at different seceen use picture tag inside it use source to change the image at different screen .also you can do this by js.

  Css: body{ min-height:100vh; }

  HTML: <picture> <source media="(min-width: 1024px)" srcset="large-image.jpg"> <source media="(min-width: 768px)" srcset="medium-image.jpg"> <img src="small-image.jpg" alt="A responsive image"> </picture>

  1