Skip to content
OverviewSolutions
7
Comments
9

Mahmoud

@MamoutyAlgeria150 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

  • Mahmoud•150
    @Mamouty

    For this challenge it's better to use the CSS grid to make the component responsive. Follow this link CSS Grid. Also make sure to change the image at break points, for that you should use the <picture> html element. You can find more about it here picture-element

  • Mahmoud•150
    @Mamouty

    Well done for your first project. I've noticed that your page still has the default margin even though you used:

    *{    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    you probably didn't notice it, but you should actually target the body to get rid of its margin:

    body {
  margin: 0;
}

    And good luck for your next projects.

    Marked as helpful
  • Mahmoud•150
    @Mamouty

    Yes, you can definitely use the relative and absolute positioning to keep the buttons at the bottom of their container. Just a remark, in this challenge you have to change the color of the buttons form white to transparent as given in the design folder.

    Marked as helpful
  • Mahmoud•150
    @Mamouty

    To change the color of the background you can simply select the body element to modify its CSS properties:

    body {
  margin: 0;
 background-color: rgb(242, 235, 227);
}

    Now setting the margin to 0 will remove the default margin.

    The image of this challenge should change at a certain break point. To do so, you have to use the picture element which I link down below:

    Using the picture tag for responsive designs

    The card should change shape according to the design. You'll have to work more on the Bootstrap grid or use directly the CSS grid. You can learn more about this last one following the link down below:

    CSS Grid

    Marked as helpful
  • Mahmoud•150
    @Mamouty

    You have to use the picture tag element in order to change the image at break points. You can find out how to use it in this link https://web.dev/learn/design/picture-element/. Also instead of just using divs try using the html elements for accessiblity. Find out more on it through this tutorial https://www.freecodecamp.org/learn/responsive-web-design#applied-accessibility. The font of the paragraph and prices should match the ones given in the design.

  • Mahmoud•150
    @Mamouty

    Thanks for the information. Could you please explain to me when an image should have a description for assistive technology ?

View more comments