Mobile responsive have overflow-y - css

Question

Trying to find issue two days and maybe I miss something. I create grid website. All working fine, but when is on mobile view have overflow-y. When I create template all be fine, and when start adding styles and colors, then problem start. I don't know why, if anyone can check code and tell me what I wrong. Thanks
:root {
--first: #7d9aff;
--hover: #9bbeff;
}
body {
font-family: 'Dosis', sans-serif;
max-height:100%;
margin: 0;
}
h1 { font-size: 70px }
h2 { font-size: 50px }
h3 { font-size: 30px }
h4 { font-size: 20px }
p { font-size: 18px }
a { text-decoration: none; }
ul.korisniLinkoiv {
padding-left: 7px;
font-size: 18px;
}
.korisniLinkoiv li {
list-style-type: none;
}
.korisniLinkoiv li a {
color: white;
}
.top,
.menu,
.features,
.webDesign,
.webHosting,
.servisRacunara,
.podrska {
margin: 15px;
font-size: 15px;
}
button {
background: var(--first);
color: white;
border: 0;
padding: 10px 20px;
}
button:hover {
background: #5979ce;
cursor: pointer;
}
#btn-large {
padding: 18px 55px;
font-size: 14px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 7px rgba(155, 190, 255, 0.52);
-moz-box-shadow: 0 5px 7px rgba(155, 190, 255, 0.52);
box-shadow: 0 5px 7px rgba(155, 190, 255, 0.52);
-webkit-transition: all 0.3s ease 0.0s;
-moz-transition: all 0.3s ease 0.0s;
transition: all 0.3s ease 0.0s;
}
#btn-large:hover {
-webkit-transform: scale(1.1) rotate(4deg);
transform: scale(1.1) rotate(4deg);
}
img {
max-width: 100%;
}
/* .wrapper */
.wrapper {
display: grid;
grid-gap: 20px;
}
/* Top */
.top {
display: grid;
grid-gap: 20px;
grid-template-areas:
"hero hero cta1"
"hero hero cta2";
min-height: 97vh;
}
.hero {
grid-area: hero;
min-height: 400px;
background: url(assets/images/razvoj.jpg);
background-size: cover;
background-position: bottom right;
padding: 50px;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
}
.hero > * {
background: var(--first);
padding: 5px;
}
.cta {
background: var(--first);
display: grid;
align-items: center;
justify-items: center;
align-content: center;
}
.cta p {
margin: 0;
}
.cta1 {
grid-area: cta1;
}
.cta2 {
grid-area: cta2;
}
.price {
font-size: 60px;
font-weight: 300;
}
/* Navigation */
.menu ul {
display: grid;
grid-gap: 10px;
padding: 0;
list-style: none;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.menu li a {
display: grid;
grid-template-columns: 1fr;
align-items: center;
min-height: 34px;
background: var(--first);
color: #fff;
font-size: 14px;
}
.menu a {
display: block;
margin: 1px;
text-decoration: none;
padding: 10px;
text-align: center;
color: var(--black);
text-transform: uppercase;
font-size: 20px;
background: white;
box-shadow: 0 0 4px rgba(0,0,0,0.1);
}
.menu a:hover {
background: var(--hover);
color: white;
border-radius: 5px;
transition: ease-out 200ms;
}
[aria-controls="menu-list"] {
display: none;
}
/* Features! */
.features {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.feature {
background: white;
padding: 10px;
border: 1px solid white;
text-align: center;
box-shadow: 0 0 4px rgba(0,0,0,0.1);
}
.feature p {
color: rgba(0,0,0,0.5);
}
.icon {
width: 130px;
}
/* webDesign, webHosting, servisRacunara, podrska Section */
.webDesign,
.webHosting,
.servisRacunara,
.podrska {
background: white;
padding: 50px;
min-height: 400px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
align-items: center;
justify-items: center;
}
.about {
background: url("assets/images/clouds.png");
}
img.about__mockup {
width: 350px;
}
/* Gallery */
.gallery {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
.gallery img {
width: 100%;
}
/* Counter Statistika */
section.statistika {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 50px;
background-image: url("assets/images/stats.jpg");
background-size: cover;
background-position: bottom right;
}
.stats {
text-align: center;
font-size: 20px;
color: white;
}
.counter-value{
padding: 0 50px;
text-align: center;
font-size: 70px;
font-weight: 600;
color: white;
}
/* Kontakt */
.kontakt {
display: grid;
grid-template-columns: 1fr 1fr;
text-align: center;
justify-items: center;
align-items: center;
}
footer {
text-align: center;
}
/* Web Dizajn Page */
.website li a {
background: #9e027b;
}
.website a:hover {
background: #c3278b;
}
button.website {
background: #9e027b;
}
button.website:hover {
background: #c3278b;
}
.top-page {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr;
min-height: 200px;
}
.header-line {
min-height: 200px;
background: url(assets/images/trianglify.svg);
background-size: cover;
background-position: bottom right;
padding: 50px;
color: #000;
}
/* Portfolio section */
.portfolio h2 {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-gap: 20px;
align-items: center;
}
.portfolio h2:before, .portfolio h2:after {
display: block;
content: '';
height: 10px;
background: linear-gradient(to var(--direction, left), var(--first), transparent);
}
.portfolio h2:after {
height: 10px;
--direction: right;
}
#media (max-width: 1000px) {
.menu {
order: -1;
perspective: 800px;
}
[aria-controls="menu-list"] {
display: block;
margin-bottom: 10px;
}
.menu ul {
max-height: 0;
overflow: hidden;
transform: rotateX(90deg);
transition: all 0.5s;
}
[aria-expanded="true"] ~ ul {
display: grid;
max-height: 500px;
transform: rotateX(0);
}
[aria-expanded="false"] .close {
display: none;
}
[aria-expanded="true"] .close {
display: inline-block;
}
[aria-expanded="true"]
[aria-expanded="true"] .open {
display: none;
}
}
#media (max-width: 700px) {
.top {
grid-template-areas:
"hero hero"
"cta1 cta2";
margin: 0;
}
.cta {
padding: 20px 0;
}
/* About */
.webDesign,
.webHosting,
.servisRacunara,
.podrska,
.statistika,
.kontakt{
grid-template-columns: 1fr;
}
.about__mockup {
order: -1;
}
section.statistika {
grid-template-columns: 1fr;
}
}
#media (max-width: 500px) {
.top {
grid-template-areas:
"hero"
"cta1"
"cta2"
}
.header-info h1 {
font-size: 34px;
}
.menu {
margin: 0;
}
.cta {
padding: 20px 0;
}
.about__mockup {
order: -1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>iDizajner - Web Dizajn Srbija | Izrada web sajtova, izrada web prodavnica</title>
</head>
<body>
<div class="wrapper">
<div class="top-page">
<header class="header-line">
<nav class="menu website">
<button aria-expanded="false" aria-controls="menu-list" class="website">
<span class="open">Ξ</span>
<span class="close">X</span>
Meni
</button>
<ul id="menu-list">
<li>
Web Dizajn
</li>
<li>
Web Hosting
</li>
<li>
Servis Računara
</li>
<li>
Podrška
</li>
<li>
Kontakt
</li>
</ul>
</nav>
<div class="header-info">
<h1>Web Dizajn</h1>
<p>Budite u korak sa vremenom!</p>
</div>
</header>
</div>
<section class="webDesign about">
<img src="assets/images/icon/webDizajn.svg" alt="" class="about__mockup">
<div class="about about__webDesign">
<h2>WEB DIZAJN</h2>
<p>Neki tekst bi isto trebao da ide ovde ali moze da saceka</p>
<p>Jos jedan tekst nekog obisa</p>
<button id="btn-large">PROČITAJ VIŠE</button>
</div>
</section>
<section class="webHosting">
<div class="about__webHosting">
<h2>WEB HOSTING</h2>
<p>Neki tekst bi isto trebao da ide ovde ali moze da saceka</p>
<p>Jos jedan tekst nekog obisa</p>
<button id="btn-large">PROČITAJ VIŠE</button>
</div>
<img src="assets/images/icon/webHosting.svg" alt="" class="about__mockup">
</section>
<section class="servisRacunara about">
<img src="assets/images/icon/servisRacunara.svg" alt="" class="about__mockup">
<div class="about__servisRacunara">
<h2>SERVIS RAČUNARA</h2>
<p>Neki tekst bi isto trebao da ide ovde ali moze da saceka</p>
<p>Jos jedan tekst nekog obisa</p>
<button id="btn-large">PROČITAJ VIŠE</button>
</div>
</section>
<section class="podrska">
<div class="about__podrska">
<h2>PODRŠKA</h2>
<p>Neki tekst bi isto trebao da ide ovde ali moze da saceka</p>
<p>Jos jedan tekst nekog obisa</p>
<button id="btn-large">PROČITAJ VIŠE</button>
</div>
<img src="assets/images/icon/podrska.svg" alt="" class="about__mockup">
</section>
<section class="statistika">
<div class="stats">
<div class="counter-value" data-count="39">0</div>
Klijenti
</div>
<div class="stats">
<div class="counter-value" data-count="77">0</div>
Projekti
</div>
<div class="stats">
<div class="counter-value" data-count="3">0</div>
Partner Agencije
</div>
</section>
<section class="kontakt">
<img src="assets/images/kontakt.png" alt="">
<div class="naruci">
<h3>Potreban vam je web sajt?</h3>
<a href="#">
<button id="btn-large">NARUČI ODMAH</button>
</a>
</div>
</section>
<footer>
<p>iDizajner 2018</p>
</footer>
</div>
<script>
const navButton = document.querySelector('button[aria-expanded]');
function toggleNav({ target }) {
const expanded = target.getAttribute('aria-expanded') === 'true' || false;
navButton.setAttribute('aria-expanded', !expanded);
}
navButton.addEventListener('click', toggleNav);
// counter statistika
var a = 0;
$(window).scroll(function() {
var oTop = $('.statistika').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 6000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});
a = 1;
}
});
</script>
</body>
</html>

Answer 1

You need to remove some margin on the different sections. It works with 10px:
.top, .menu, .features, .webDesign, .webHosting, .servisRacunara, .podrska {
margin: 10px;
font-size: 15px;
}
It happens because you have an image with width that expands content on mobile resolution:
<img src="assets/images/icon/webDizajn.svg" alt="" class="about__mockup">