Flexbox and boostrap

Community feedback

• 

  Aatypic•490

  @AatypicPosted about 2 years ago

  Hello and congratulations on your solution I like it !

  Concerning your questions.

  -For you media I would change the breakpoint of max-width:375px to something bigger, because right now when the screen is 376px wide it's changing to the desktop image, and the device is still very small and hasn't changed really.

  -You were close, you had your <picture> element already. You can in fact give multiple sources for different media screen sized in a <picture> tag. You need to add a second <source>, for something like this:

  <picture>
    <source media="(max-width:768px)" srcset="images/image-mobile.jpg />
    <source media="(min-width:769px)" srcset="..."/>
    <img src="images/image-dekstop.jpg" alt="...">
  </picture>
  

  more info about <picture>

  Good luck 🙂

  Marked as helpful

  1

  ---

  

  Real uNondaba•90

  @NondabaPosted about 2 years ago

  @Aatypic ,Thank you for the observation. Let me update my code so that it is correct.

  0

  

  Aatypic•490

  @AatypicPosted about 2 years ago

  @Nondaba After checking I don't think you need 2 <source> 😅

  The way you set it was right, just bigger breakpoints will help.

  0

  

  Real uNondaba•90

  @NondabaPosted about 2 years ago

  @Aatypic ,😂 no worries. I am going to read up on break points.

  0
• 

  Galache de Toro Federico•150

  @fico444Posted about 2 years ago

  Hello, i solve that using background-image. in the @media code block just change the url of the background-image. If you want to use img tag on your html you have to use two, one with display: none (remains hidden) and other with display: inline-block. Then in the @media code block switch the values to display the correct image. Sorry for my english, I hope I could help you. ;)

  Marked as helpful

  1

  ---

  

  Real uNondaba•90

  @NondabaPosted about 2 years ago

  @fico444 ,thanks for the help. I used the picture element for changing the pictures . I will take your comment under advisement.

  0
• 

  RobicaCodeaza-AsForGithub•180

  @RobicaCodeazaPosted about 2 years ago

  Hello ! For media queries , you could just use the 'background' property and then set the url("/img/...yourImg) for changing the desktop image to mobile img that you have included in the files downloaded previously from frontendmentor.io .

  Marked as helpful

  1

  ---

  

  Real uNondaba•90

  @NondabaPosted about 2 years ago

  @RobicaCodeaza ,thank you for the insight. I used the picture element to accommodate for that.

  0