CSS: max-width not on maximal width

Question

I have simple css animation and I use max-width to make horizontal scroll bar to not scroll.

Element need be visible only this what is in 1200px not more not less.

I tried following max-width but not working.

section {
  max-width: 1200px;
}
.box {
    width: 100%;
	max-width: 540px;
    position: relative;
    z-index: -1;
    top: 0px;
    transform: rotate(80deg); 
    left: 1500px;
  }
  
  .wave {
    position: absolute;
    opacity: .4;
    width: 1500px;
    height: 1300px;
    margin-left: -150px;
    margin-top: -250px;
    border-radius: 43%;
  }

@keyframes rotate {
    from { transform: rotate(0deg); }
    from { transform: rotate(360deg); }
}

.wave.-one {
    animation: rotate 9000ms infinite linear;
    opacity: .1;
    background: #6FC4FF;
}

.wave.-two {
    animation: rotate 5000ms infinite linear;
    opacity: .1;
    background: #319DE8;
}

.wave.-three {
    animation: rotate 9500ms infinite linear;
    background-color: #0087E5;
}

<section>
  <div class='box'>
    <div class='wave -one'></div>
    <div class='wave -two'></div>
    <div class='wave -three'></div>
  </div>
</section>

user9408899 · Accepted Answer · 2019-08-14 17:53:09Z

2

I use max-width to make horizontal scroll bar to not scroll.

You need to use overflow-x property to hide the horizontal scroll

section {
  overflow-x: hidden;
  width:1200px;
}

answered Aug 14, 2019 at 17:53

user9408899

4,5805 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Henfs · Accepted Answer · 2019-08-14 17:56:14Z

0

A simple way to solve this, if it causes no side effects to you, is to add overflow: hidden to body:

body {
  overflow: hidden;
}

answered Aug 14, 2019 at 17:56

Henfs

5,45912 gold badges33 silver badges48 bronze badges

Collectives™ on Stack Overflow

CSS: max-width not on maximal width

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related