Kevin Powell - Community•10mo ago

Part of page without container

I'm doing challenge from fem: https://www.frontendmentor.io/challenges/equalizer-landing-page-7VJ4gp3DE?ref=challenge-roadmap and thinking about layout of page. One tricky part is that one section on mobile is touching sides of screen. For tablet and desktop whole page have padding. My approach is to wrap whole in container but I'm not sure how to solve this mobile tricky part. One solution is to apply mobile only container and override main container.

.container {
  width: min(100% - 3rem, 69.375rem);
  margin-inline: auto;
}
@media screen and (max-width: 40rem) {
  .container--mobile {
    width: 100%;
  }
}

.container {
  width: min(100% - 3rem, 69.375rem);
  margin-inline: auto;
}
@media screen and (max-width: 40rem) {
  .container--mobile {
    width: 100%;
  }
}

Is it good or can you suggest more robust solution to this? https://solracss.github.io/fem-equalizer-landing-page/

Frontend Mentor

Frontend Mentor | Equalizer landing page coding challenge

This challenge will be a perfect test of your HTML & CSS skills. If you're starting to get comfortable building smaller projects, this will be a great step up.

5 Replies

briancross•10mo ago

A div is full width by default so I'd just put a max-width on it for whatever it should be on larger screens. No media query needed.

C4rlos•10mo ago

? I got this solution, but still with media

C4rlos•10mo ago

https://codepen.io/solracss/pen/poqbypj?editors=1100

Carlos

CodePen

poqbypj

...

Mannix•10mo ago

you could watch kevin's latest video it might help you 😉

Jochem•10mo ago

I think the mismatch is that you want a div that keeps growing with the viewport but has a fixed amount of whitespace either side, but setting a max-width will keep the div at a maximum size and grows the whitespace. I don't think you can accomplish the former without media queries

Gaming

Programming

Part of page without container