css Question posted in
Some basic documentation can be found here.

Css – Why there is a horizontal scroll on mobile

If you shorten the width of the window or check on mobile, there is a horizontal scroll, breaking the layout.

Live Link

I believe most probably navigation is causing this, but no clue how. Tried everything from setting width/max-width to 100%, overflow: hidden, etc.

Can someone help how to resolve this?

Tags:

2

Answers


  1. 0 
    #about {
    overflow-x: clip;
}

    Will fix your issue. It’s caused by your container padding (5rem horizontal), which is quite a lot for a mobile view because although it’s a relative unit, it’s not relative to viewport width. You could use something like padding: 3rem clamp(1rem, 5vw, 5rem); instead so that the padding is responsive.

    Login or Signup to reply.
  2. 0

    So it seems to be caused by padding in these 2 places

    #header-content .container {
    display: flex;
    align-items: center;
    justify-content: end;
    text-align: right;
    position: relative;
/*  padding: 5rem; */
}

    #about-content .container {
/*  padding: 3rem 5rem; */
}

    One tip you could use to find the place that is overflowing is to put this code at the top of your file

    * {
  outline: 1px solid red;
}

    This will add an red outline to every object so you can see them quicker

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search