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 and Flexbox

@ShahbaazX786

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


1.How to make our text responsive? when i try to minimize the screen width the text and image were overflowing from the card.

2.Is it a best practice to use both flexbox and bootstrap grid at the same time?

Community feedback

Azhar 600

@azhar1038

Posted

Hi Shaik, congratulations on completing the challenge!

I see you have used fixed width for text wrapper and image, this is causing the overflow issue in small mobile view. Try using width: 100% instead of fixed value. You will also need to adjust your button to make its width relative

Also there are 2 different images provided for mobile and desktop. Try using <picture> to display different images based on media query directly from html.

Regarding using bootstrap for grid, why don't you just use CSS Grid!

Hope it helps :)

1

@ShahbaazX786

Posted

@azhar1038 Thanks for suggestions. Peer suggestions always helps!. I still have to learn a lot it seems.... XD.

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