Product Preview Card Component

Community feedback

• 

  Sebastian Heitmann•150

  @DonHeidiPosted about 1 year ago

  Hey there GGSWEngineer,

  nicely done! To make the component behave more responsive you could use something like this on your .container class.

  min-width: 343px;
  width: 100%;
  max-width: 600px;
  

  or shorthand

  width: clamp(343px, 100%, 600px)
  

  The container will respect the size of its children if it is between 343px or 600px.

  You can also use the HTML picture element instead of your Script.

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

  Hope this helps!

  Marked as helpful

  2

  ---

  

  Gerardo Garcia•170

  @GGSWEngineerPosted about 1 year ago

  @DonHeidi thanks so much Don! I don't see the picture element being used often but I'll apply it in my other projects.

  0
• 

  Moises Castillo•220

  @mcasti19Posted about 1 year ago

  Hello GGSWEngineer, how are you? I am a beginner, I think your work is very good, the more you practice, the better the skills.

  Since 2015, Google had announced that the majority of traffic and searches on the internet were being done from mobile devices, which is why the so-called "Mobile First" approach was born, which is why it is currently customary to first design and develop sites for mobile and then the other sizes. for other devices, I usually use 3, mobile, tablet and desktop.

  As for the colors, I have experienced some slight differences, but I use a chrome extension called "colorzilla" and it helps me have the colors much more similar when it is difficult for me to see them the same. In the case of the background the color was "- Cream: hsl(30, 38%, 92%)"

  As for the mediaQueries, the properties that you must place are those that will really affect the design since many are already inherited from the 1st design, therefore there is no need to repeat them if they are not going to affect the new size

  I hope it is useful to you, you can also take a look at my work and give me some suggestions to improve :) happy day

  Marked as helpful

  1

  ---

  

  Gerardo Garcia•170

  @GGSWEngineerPosted about 1 year ago

  Thanks Moises! @mcasti19

  1

  

  Gerardo Garcia•170

  @GGSWEngineerPosted about 1 year ago

  Also, can you help explain this warning message?

  "Document should have one main landmark"

  "All page content should be contained by landmarks" @mcasti19

  0
• 

  HenriettTipi•200

  @BlanchevalenPosted about 1 year ago

  Dear GGSWENGINEER!

  I learned a simple explanation why the mobile version is the first: what we see, we can read on mobile, even if it is not beautiful, it will be readable and understandable on the desktop version as well. But conversely, this is not necessarily true (too small letters, elements that have slipped apart, invisible scrollable elements, etc.).

  Regarding the media requests, I just want to say (I'm a beginner too), if you use more relative units of measurement in the code (for example, em, rem), not absolute (pixel), then maybe less things need to be modified in another view.

  I think you are on the right track, keep it up!

  Marked as helpful

  0

  ---

  

  Gerardo Garcia•170

  @GGSWEngineerPosted about 1 year ago

  The relative units of measurement makes a ton of sense, thanks! @Blanchevalen

  0