Responsive preview component with CSS and HTML

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello Galeana, congratulations for your solution!

  You've done pretty much everything here, the container is super flexible, I like it.

  I've two tips for your:

  1.Note that the container image isn't scaling properly and lose its proportion a little before the media query. Ins't a big deal, but is visible.

  2.The pricing section is getting cropped when the mobile section starts to scale down and the price gets covered by the container bounds, this is due the overflow: hidden added to the container. You can fix that creating a media query that changes the flex-direction: column; when the container gets 300px. See the example below:

  @media (max-width: 300px) {
  .price {
  display: flex;
  flex-direction: column;}
  

  See if works and tell me then, happy coding Galeana!

  00