3-column-preview-card-component-main

Community feedback

• 

  Orlando Guevara•220

  @coding-tomatoPosted over 2 years ago

  Hey! I was fiddling a bit with your website to add the clamp functionality you desired.

  I added a little bit of padding in the body tag so the component wouldn't crash against the edges.

  body {
    display: grid;
    place-content: center;
    min-height: 100vh;
    padding: 2rem;
  }
  

  And of course, I made the main container's width responsive by adding clamp to its width. I used the values shown as an example.

  main {
      width: clamp(920px, 100%, 1200px);
      display: flex;
  }
  

  You can set something lower like 500px but you'd need to adjust the media query too.

  Now, this breaks the site, because now everything is aligned to the left, but you just need to center items in the X axis by adding:

  main {
      width: clamp(920px, 100%, 1200px);
      display: flex;
      justify-self: center;
  }
  

  Overall very good work! Making things responsive can be tricky, as you can very easily break other elements.

  Marked as helpful

  0

  ---

  

  Kipo•80

  @rezokipPosted over 2 years ago

  @coding-tomato Wow thank you for the effort. Gonna test it as soon as I can.

  Yes I’m often playing around to make responsive sites as smooth as possible with min max clamp and so on. But I fail every time. Can’t really get my head around.

  1