All comments

• 

  prjwl16•80

  @prjwl16Submitted over 1 year ago

  I am struggling with media queries and when working with images. Dont, understand how to align them properly.

  

  Plain CSS and HTML - Not perfectly responsive

  1

  30
  

  Bl4ngk•110

  @Bl4ngkPosted over 1 year ago

  You need to use a <picture></picture> tag to display different image based on your screen width

  For the media query you don't need to set max-height:667px. You also need to provide padding to the body if you see the mobile design there is padding on the top and side

  Marked as helpful

  0
• 

  Nosaroki•30

  @wea2neSubmitted over 1 year ago

  I've been struggling with the responsive a little even if I feel like it's quite simple to solve, I cannot manage to have the correct design on the desktop view and on the mobile view...

  

  Product Preview Card Component Solution

  3

  00
  

  Bl4ngk•110

  @Bl4ngkPosted over 1 year ago

  You don't need to use display: flex and all of it's properties on body for the Mobile layout as articles are Block element they will automatically start on new line

  You will also need to refactor your HTML.One easy trick that will help with that is to start with the desktop design and see how many distinct blocks of content you have and put them in rectangle don't go super detail you just need a broad view.I see two rectangles one for the image and one for all the text content.Try rapping the image in one block level element and all the text content in one block level element this will make styling things easier

  Remove the <span class="parted"></span> from your H1 tag

  You can use a <picture></picture> tag to display different image based on your screen width

  Marked as helpful

  0