Skip to content
OverviewSolutions
14
Comments
6

Giulia

@GiuliaT97210 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Giulia•210
    @GiuliaT97

    You can try to use picture tag with source and img in your html document instead of using only img tag. Below is an example of the code.

    <picture class="img_content"> <source srcset="assets/images/image-product-desktop.jpg" media="(min-width: 600px)"> <img src="assets/images/image-product-mobile.jpg" alt="perfume"> </picture>
    Marked as helpful
  • Giulia•210
    @GiuliaT97

    I could be wrong but I think you set border-radius:25px to your product-picture because the rounded edges of your box were being covered by the image. If this happened, try deleting the border-radius of product-picture and go to your box and set overflow:hidden

  • Giulia•210
    @GiuliaT97

    Try this to center your card

    body { font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; background-color: hsl(30, 38%, 92%); display: flex; flex-direction:column; align-items: center; }

  • Giulia•210
    @GiuliaT97

    I saw that you didn't do the rounded edges in box3 and in your button. I want to advise you how to do it in case you didn't already know so you can be more true to the challenge designs. To make the edges rounded you have to use border-radius. Usually the most common value is border-radius:0.5rem or if you prefer to write it with px border-radius:8px. This is enough in the case of the button but if you have, as in the case of box3, images or other divs inside you also have to put overflow:hidden so that the parts coming out of box3 (like the corners of the image in this case) are not seen.

    .box3{ width: 40%; height: 400px; background-color: white; display: flex; justify-content: space-between; border-radius:8px; overflow:hidden; }

  • Giulia•210
    @GiuliaT97

    Hello! You can avoid the warning: "All page content should be contained by landmarks" by changing <div class="container"></div> to <main class="container"> and

    <div class="attribution"></div> to <footer class="attribution"></footer>
    Marked as helpful
  • Giulia•210
    @GiuliaT97

    You can avoid the warning: "All page content should be contained by landmarks" by changing <div class="container"> to <main class="container">