Kevin Powell - Community•16mo 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•16mo 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.

C4rlosOP•16mo ago

? I got this solution, but still with media

C4rlosOP•16mo ago

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

Carlos

CodePen

poqbypj

...

Mannix•16mo ago

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

Jochem•16mo 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