Skip to content
OverviewSolutions
6
Comments
5
Xavier O.
@XavOli

All comments

  • radhaBharadwaj•130
    @radhaBharadwajSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I used em,rem for the first time in my projects...

    What specific areas of your project would you like help with?

    feedbacks are welcome...

    Product Preview card using css and HTML

    1
    Xavier O.•80
    @XavOliPosted about 2 months ago

    Amazing job! I notice that your card is not quite aligned vertically when on desktop. This can likely be corrected by adding a height of 100% in your global container (which here I believe you use the body itself as your global container). On that global container, you can then use justify-content-center and align-items-center to vertically and horizontally align your card (content container).

    Hope that helps!

    Marked as helpful
    0
  • Xavier O.•80
    @XavOliPosted 2 months ago

    I would recommend adding a media query to resize your container to be fullscreen to make it more responsive like in the provided screenshots. This is how I did it in mine and I found it worked pretty well!

    @media (max-width:600px) {
    .container{
        border-radius: 0;
        position:absolute;
        top:0;
        left:0;
        width: 100vw;
    }
}

    Love to see that you're using bootstrap, I started learning it today and it'd been really interesting. Continue with the good work!

    0
  • SWARNA LATHA G•40
    @SWARNALATHARAJANSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    now this time I am improve my coding style

    What challenges did you encounter, and how did you overcome them?

    make the grid

    What specific areas of your project would you like help with?

    css

    social_Link_Profile

    1
    Xavier O.•80
    @XavOliPosted 2 months ago

    Amazing job! I would recommend changing your media query so that your card doesn't take the full width when using on mobile. It could likely be done as setting the width to some section of the viewport in the query you already created. Generally, the max-width for that query would be 768px from the information I was able to find. At least that's how I was able to do it in an earlier project, hopefully it works for you too!

    @media  screen and {min-width: 768;
    .container{
        width: 90vw;
    } 
}
    0
  • Xavier O.•80
    @XavOliPosted 2 months ago

    I believe the hover effect was meant to activate when hovering the whole card. You can do so by adding the hover selector over the whole card, but specifying which class to modify when that occurs. .card:hover .title { (color) } From the feedback I received on my project, I believe it is also best practice to wrap the principal content of the page in a <main> attribute. Great work!

    0
  • CrazyGreek•60
    @CrazyGreekGRSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of this whole project, as I managed to do it on myself, no ChatGPT! Some googling was needed, of course

    What challenges did you encounter, and how did you overcome them?

    I didn't know some things like the drop shadow behind the box, but that was easily fixed by googling and messing around

    What specific areas of your project would you like help with?

    In this solution, I believe I did a good job, but any correction are appreciated :)

    Solutioned the thingamajig #3

    2
    Xavier O.•80
    @XavOliPosted 2 months ago

    I believe the border-radius of the image could be increased to round up the edges. I would recommend looking into how to import the specific font that was mentioned in the style guide and the colors mentioned in the guide would've taken care of the difference in style for the paragraph. Overall great job!

    1