Using Flexbox

Community feedback

• 

  FalejevV•500

  @FalejevVPosted over 2 years ago

  There is an element in html called <picture>.

  Inside tag you can specify multiple screen sizes and images to show. Im bad at explaining, so you better google about it. If you dont want to use multiple div's and css, <picture> is your solution.

  Marked as helpful

  1

  ---

  

  Billy•40

  @DavincyProjectPosted over 2 years ago

  @FalejevV thanks for your solution, i didn't know there is a tag called <picture> before XD

  0
• 

  Aurel•290

  @Aur71Posted over 2 years ago

  Put bouth images inside your img-container. To the desktop image give an id = "desktop-img". To the mobile image give an id = "mobile-img"

  #desktop-img { display: block; } #mobile-img { display: none; }

  Now you just have to use a media querie so you can switch the display when you hit a break point.

  @media only screen and (max-width: 600px) {

  #desktop-img { display: none; } #mobile-img { display: block; }

  And last change the direction of your container

  .container { flex-direction: column; } }

  Marked as helpful

  1
• 

  Tobani Esan-George•110

  @TobshubPosted over 2 years ago

  Hi, regarding your question: the best way for me is to use a div element instead of an image, and give the div a background-image of the image you want. This way in the media queries, you can specify which image you want (i.e. in the media query for mobile, use the background image for the mobile design on the div, and similarly for the desktop).

  Marked as helpful

  1