Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product preview card component, using bootstrap library and custom css

@lilthyonecy

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How can i make the image reponsive and mobile friend? How can i edge the two columns at once, like "A border-radius"?

Community feedback

@sulyman09

Posted

Hello @lilthyonecy what an amazing work being your first project. Let start from simple to complex You made made mention of border-radius right, this is how to fix it firstly, in the 'img-container' which you made use of background url in your style sheet add (border-top-left-radius and border-bottom-left-radius) and set the value in either pixel or percentage.

secondly, in the 'item-container' also add (border-top-right-radius and border-bottom-right-radius) and set the same value you set to 'img-container' to it

back to your first question which you made mention of responsiveness, but don't forget that boostrap make use of min-width so to make your work responsive replace this ( col-sm-12 col-md-6) with 'col-lg-6' in 'column1' that is your work will remain the same untill the the screen size exceed middle screen and it then change to column I mean the image will be in column with the text.

Hope am Helpful, Happy Coding.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord