TheBugCoder Posts - Answer Overflow

TheBugCoder

•Created by TheBugCoder on 7/5/2024 in #front-end

How can I give items in a flex column the same width?

I've got this code:



  <body>
    <Header />
    <main><slot /></main>
    <Footer />
  </body>
</html>
<style is:global>
  

  body {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  main {
    max-width: 60%;
  }

  @media (max-width: 640px) {
    main {
      max-width: 95%;
    }
  }
</style>

I want the header and footer to have the same width as main. I've got different pages that have different widths of the main, so I couldn't set a static width of the header and footer. How would I do this?

7 replies

KPCKevin Powell - Community

•Created by TheBugCoder on 5/9/2024 in #front-end

Creating a responsive grid which always maintains the same gap

I'm trying to create a grid, kind of like the iPhone photo library. There's a gap that can never increase. So for responsiveness the items in the grid need to increase in size. How would I achieve this? :)

14 replies

Gaming

Programming