Responsive Product Preview Page using HTML and CSS

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 6 months ago

  Hi there!

  I see you are using absolute positioning here. It's good for practice but not quite fit for this challenge =)

  Also there not need to wrap every item in the container as h1, p and img is block elements so you can style them directly.

  Basically in this case you need flex with two parts. For example it can be main tag or .container - but don't forget that every page should contain main tag for semantical reasons.

  <main>
      <img src="" alt=""/>
      <div className="content">
          <p>PERFUME</p>
          <h1>Title</h1>
          <p>Description</p>
          ...
      </div>
  </main>
  

  Sorry, I didn't rewrite everything, but I hope you understand in general =)

  So, you set display of main to flex, img and .content will take a half of it's width and than you can style .content as qr-code card in the previous challenge.

  Well, that's a main idea =)

  Marked as helpful

  0

  ---

  

  Uche Ofatu•260

  @Macnelson9Posted 6 months ago

  @Alex-Archer-I Oh okay. I'll work on it using your method and give you a feedback on how it's going. Thank you so much.

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 6 months ago

  @Macnelson9

  There are often a few ways to achieve required result. Flex is just the easier one, and absolute positioning could be very unpredictable in various screen sizes =)

  Alas, I didn't do this challenge, so I can't see the design template for mobile devises. But I see, that there is another picture for mobile screens and I can assume that it is located above the content. In that case you can change flex-direction on column in the media queries.

  You can change img source depending on the screen size via picture tag which contains img and source tags:

  <picture>
      <source srcset="mobile.jpg" media="(max-width: 400px)">
      <img src="desktop.jpg" alt="">
  </picture>
  

  This element will check conditions of every source tag (they are similar to media in css) and load image from it's srcset. If none of the conditions match it'll load image from the src of img tag.

  Or, you can have two img tags and change their display via media, but semantically picture tag will be better and a bit more professional =)

  Marked as helpful

  0

  

  Uche Ofatu•260

  @Macnelson9Posted 6 months ago

  @Alex-Archer-I Hey, thanks so much! I figured it out. Check out the new solution I submitted.

  0