All comments

• 

  Daniel Dekany•920

  @dknydSubmitted almost 2 years ago

  Hi Peeps,

  Hope everyone is doing great! :)

  So I have finished -so to say- this project, I know it is kinda bootleg still (please keep in mind, im self taught), so as usual, any constructive criticism is apreciated.

  My main questions would be:

  1.) How can I change the order of elements? I should use that for the mobile view with the media query. The star ratings are over the reviews and under the paragraphs when in mobile view -while in desktop view, star ratings are on he top of my 3rd column in a grid container, so as you can see the star ratings get between the reviews when you change the view to mobile.

  2.) How to change the stars to be on top of the text when in mobile view? You can see, the star ratings' layout changes when in mobile view, in desktop view they are on the left side of the container with the text being on the right side, but when in mobile view, they get to the top of the text and both the text and the stars are centered.

  3.) Any other way to put the 5 stars than to actually make 5 <img> tags? Sounds kinda complicated, is this how it is done?

  Many thanks in advance as usual guys!

  

  Basic Grid / Flex excercise

  1

  40
  

  LorenaFrias•80

  @LorenaFriasPosted almost 2 years ago

  Hey Daniel!

  I'm still working on this challenge but I'd like to help anyway.

  • You could begin mobile-first design: title section then ratings and finally testimonials. That way you've got the right order for mobile devices.

  • About your second question: in your media query .rate# { display: flex; flex-direction: column; } This should place the stars above the text.

  Hope this helps! 😊

  Marked as helpful

  1

  This comment has received 3 repliesShow
• 

  mbedon•80

  @mbedonSubmitted about 2 years ago

  The part I found hard and took me about 2 weeks to get it was changing the product images when the screen size changes, I have seen a lot of approaches (using as background, using transform, ...) but I decided to do it using the "picture" element. But it also had some trouble with it, and it was an 18px line below the product pictures. For that I used "display: block;" on the img. What I could do to make my project better? There is a more simple way to do it?

  

  Responsive Product Preview Card Component - Using picture element

  2

  50
  

  LorenaFrias•80

  @LorenaFriasPosted about 2 years ago

  Hi @mbedon! Your solution looks great! Your approach was quite accurate to me. Mind you, I'm still learning, but you could try using a css reset: img { display: block; max-width: 100% } Since images are inline elements display: block should get rid of that unexpected gap and max-width:100% prevents large images from overflowing their container. Hope that was helpful!

  Marked as helpful

  0