Skip to content
OverviewSolutions
27
Comments
24
Anar
@anar-sol

All comments

  • Priyanka Roy Choudhury•100
    @PriyankaRC16Submitted about 1 year ago

    Hi everyone!

    I hope this message finds you well.

    I have completed my fourth project on the Product Preview Card Component. These challenges are helping me build my coding skills.

    Please feel free to share your feedback for the following:

    • How can I improve the responsiveness of the design?

    • Any other feedback will be greatly appreciated. Your considered feedback is of great importance to me, and I genuinely look forward to your expert insights.

    Thank you for your time.

    Warm regards,

    Priyanka

    Product Preview Card Component using HTML and CSS

    1
    Anar•700
    @anar-solPosted about 1 year ago

    Hello =)

    You are opening a div element before the body, it's an invalid HTML. body is supposed to be the main element containing all the content of the page.

    You can use the W3C HTML validator to check your HTML.

    Marked as helpful
    0
  • Anar•700
    @anar-solPosted about 1 year ago

    Hello =)

    If you want to include the image as HTML content instead of using CSS background, you can use picture and source to specify different images for mobile and desktop depending on the viewport size.

    In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

    <picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

    As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

    Marked as helpful
    0
  • Anar•700
    @anar-solPosted about 1 year ago

    Hello =)

    Instead of using two separate img elements, you can use picture and source to specify different images for mobile and desktop depending on the viewport size.

    In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

    <picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

    As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

    0
  • Anar•700
    @anar-solPosted about 1 year ago

    Hello =)

    Instead of using CSS background to set the image, you can use picture and source HTML elements to specify different images for mobile and desktop depending on the viewport size.

    In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

    <picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

    As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

    0
  • Anar•700
    @anar-solPosted about 1 year ago

    Hi =)

    Instead of using CSS to change the image, you can use picture and source HTML elements to specify different images for mobile and desktop depending on the viewport size.

    In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

    <picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

    As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

    Marked as helpful
    0
  • Grunt395•40
    @Grunt395Submitted about 1 year ago

    I used Flexbox for the first time in this project and struggled to center the main content of the page. Is there a best way to center the content with or without Flexbox?

    This project involved a desktop and a mobile image included. I ended up displaying both images at the same time on the page, but would hide one of them using display: none; for the respective layout. Is there a better way to display either the desktop or mobile image without having to manually hide one of them?

    Product Preview Card with HTML and CSS

    4
    Anar•700
    @anar-solPosted about 1 year ago

    Hello =)

    Instead of using two separate img elements, you can use picture and source to specify different images for mobile and desktop depending on the viewport size.

    In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

    <picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

    As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

    Marked as helpful
    2
  • Anar•700
    @anar-solPosted about 1 year ago

    Hello =)

    Instead of using two separate img elements, you can use picture and source to specify different images for mobile and desktop depending on the viewport size.

    In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

    <picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

    As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

    Marked as helpful
    0
  • Anar•700
    @anar-solPosted about 3 years ago

    Hi!

    • As shown by the accessibility and structure reports, you are using ids with the same value, multiple times in your code.
    • On medium viewports, the profile section isn't aligned to the top with the other blocks, is this done on purpose?
    • You have problems with the images, they're not displayed

    I hope this will help you =)

    0
  • Anar•700
    @anar-solPosted about 3 years ago

    Hi =)

    I think you are passing too early to the 3 column layout, at 768px when there's not enough space to display the content correctly. You can remove the width: 70% from .container to let it take all the available space.

    Marked as helpful
    1
  • Adrian•190
    @ohsiteSubmitted about 3 years ago

    Hello community! The top image is in the of class "card__image", In desktop version it has the size of an svg image. When i try to cale it's height down for the mobile version weird things happen. Any help would be appreciated!

    Order summary components challenge using SASS

    2
    Anar•700
    @anar-solPosted about 3 years ago

    Hello!

    What problem do you have with the card__image? If you want the image to be exactly the size of its container, add this:

    .card__image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

    MDN object-fit page: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

    0
  • Anar•700
    @anar-solPosted about 3 years ago

    Hi!

    I haven't done this challenge yet, but I'll try to give you my opinion

    According to MDN <progress> page, this element is intended to represent the completion progress of a task. Do you think this is the most suitable element to represent the amount of storage space used? I could be wrong, but I think <meter> is more appropriate in this context.

    Concerning the style, both <pregress> and <meter> seem to be difficult to customize consistently across different browsers...I haven't looked into this subject yet.

    You can add overflow='hidden' to the <progress> element to prevent the blue bar from overflowing

    MDN progress page: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress MDN meter page: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter

    Marked as helpful
    0
  • Anar•700
    @anar-solPosted about 3 years ago

    Hi =)

    The styling is good on large screens, but when the viewport width is <= 1000px the component become larger than the screen, because you are setting a fixed width for the container and moving to the horizontal (or desktop) style too early, when the viewport is 376px wide.

    0