Как отключить overflow-x
Всем привет! Я сейчас делаю сайт и столкнулся с такой проблемой, что в мобильной версии не могу отключить overflow-x, точнее в коде он отключен, но на практике всё равно работает.
Ссылка на веб-сайт: https://jintropine.kz/
$red: #588EF7
$light_red: #EEA6A1
$main_cream: #F4F5F8
$main_blue: #00346E
$selected_blue: #008AA2
$background: #FFFF
$button_hover: #2B6FF5
// Margins
$eightclamp: clamp(4px,0.4166666666666667vw,16px)
$sixteenclamp: clamp(8px,0.8333333333333334vw,32px)
$twentyclamp: clamp(10px,1.0416666666666667vw,40px)
$thirtytwoclamp: clamp(16px,1.6666666666666667vw,64px)
$sixtyfourclamp: clamp(32px,3.3333333333333335vw,128px)
$onetwoeightclamp: clamp(64px,6.666666666666667vw,256px)
$twofivesixclamp: clamp(128px,13.333333333333334vw,512px)
// Fonts
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap')
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap')
*
margin: 0
padding: 0
body
width: 100%
height: 100%
font-family: 'Raleway', sans-serif
background-color: $background !important
font-display: fallback
overflow-x: hidden !important
button, a
cursor: pointer
transition: 0.3s all
border: none
.main-screen
width: 100%
height: auto
display: flex
margin: auto
flex-direction: column
.arrow-blue
position: absolute
width: clamp(97.5px,10.15625vw,390px)
height: clamp(120.5px,12.552083333333334vw,482px)
left: clamp(418.115px,43.553645833333334vw,1672.46px)
top: clamp(243.5px,25.364583333333332vw,974px)
.separator
width: 86.45833333333333%
height: 1px
background-color: $main_blue
margin: auto
margin-top: $thirtytwoclamp
.container
width: 86.45833333333333%
height: auto
display: flex
margin: auto
margin-top: clamp( 50px,5.208333333333333vw,200px)
justify-content: space-between
.proto-photo
width: clamp(319.5px,33.28125vw,1278px)
height: clamp(249.795px,26.0203125vw,999.18px)
.main-heading
width: clamp(350px,36.458333333333336vw,1400px)
height: clamp(80px,8.333333333333334vw,320px)
font-family: 'Roboto Condensed'
font-style: normal
font-weight: 700
font-size: clamp(32.5px,3.3854166666666665vw,130px)
color: #1e1e1e
.hormone
color: $red
.description
width: clamp(323px,33.645833333333336vw,1292px)
height: clamp(54px,5.625vw,216px)
font-family: 'Raleway'
font-style: normal
font-weight: 400
font-size: clamp(11.5px,1.1979166666666667vw,46px)
font-size: clamp(11.5px,1.1979166666666667vw,46px)
margin-top: $thirtytwoclamp
color: #1e1e1e
.buttons
width: auto
height: auto
display: flex
margin-top: clamp(42.5px,4.427083333333333vw,170px)
.main-button
width: clamp(203.5px,21.197916666666668vw,814px)
height: $sixtyfourclamp
text-decoration: none !important
background-color: $red
display: flex
align-items: center
border-radius: 52px
justify-content: center
font-weight: 500
border: none
color: $background
font-family: 'Roboto Condensed'
font-style: normal
font-size: clamp(13px,1.3541666666666667vw,52px)
margin-top: $sixtyfourclamp
&:hover
background-color: $button_hover
.telegram-icon
margin-right: clamp(6px,0.625vw,24px)
@media screen and (max-width: 448px)
.main-screen
width: 100%
height: 100vh
display: flex
margin: auto
flex-direction: column
.arrow-blue
display: none !important
.separator
display: none
.container
width: 86.45833333333333%
height: auto
display: flex
flex-direction: column
.proto-photo
display: none
.main-content
.main-heading
width: clamp(149.5px,69.85981308411215vw,598px) !important
height: clamp(118px,55.14018691588785vw,472px) !important
margin: auto
font-size: clamp(27.5px,12.850467289719626vw,110px) !important
text-align: center
.description
width: clamp(150px,72.46376811594203vw,600px) !important
height: clamp(105px,49.06542056074766vw,420px) !important
text-align: center
margin: auto
font-weight: 400
font-size: clamp(11.5px,5.897435897435898vw,46px) !important
margin-top: clamp(32px,14.953271028037383vw,128px) !important
.buttons
display: flex
flex-direction: column
align-items: center
justify-content: center
margin-top: clamp(145px,74.35897435897436vw,580px) !important
.main-button, .more-button
width: 84% !important
height: clamp(31.5px,14.719626168224298vw,126px) !important
font-size: clamp(12px,5.607476635514018vw,48px)
margin: auto
margin-top: clamp(45px,23.076923076923077vw,180px) !important
.main-button
height: clamp(34px,15.88785046728972vw,136px) !important
.more-button
width: 83% !important
margin-top: clamp(16px,7.4766355140186915vw,64px)
margin-bottom: clamp(32px,14.953271028037383vw,128px)