right side gutter(padding)coming up in the page,the horizontal scroll comes up because of that
Your code so far
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.
Link to the challenge:
hi Hamzah, your post is fairly cryptic. Were you trying to ask something?
yes,actually there was unnecessary padding coming up at the right side of my page,idk exactly if its paddign but the horizonal scrollbar came up and right side there was empty space
there is something that exceeds your 100vw width.
just try to add in css for debugging
* {
border: 1px solid red;
}
to see what element causes it or as a hack just add:
body {
overflow-x: hidden;
}
and see if some content is truncated.
the border ends before the extra space,is it something to do with no-js?
try adding box-sizing: border-box; to your * selector to ensure all elements evaluates same way
box sizing:border box is alreaady there
just sharing your code some way using codepen, jsfiddle, etc will help us not “walking blind” and maybe discover whats the problem
umm thing is i have a seperate css file so the code is alot but anyway
body{
border:1px solid black;
box-sizing:border-box;
margin:0;
padding:0;
}
.grid-container{
display:grid;
grid-template-rows:100vh 100vh 100vh;
width:100vw;
}
nav ul{
list-style-type:none;
margin:0;
padding:0;
}
nav ul li{
display:inline-block;
}
#welcome-section{
text-align:center;
}
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="PortfolioPage.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class = "grid-container">
<nav>
<ul>
<li>
<a class = "nav-link">About Me</a>
</li>
<li>
<a class = "nav-link">Projects</a>
</li>
<li>
<a class = "nav-link">Technologies</a>
</li>
</ul>
</nav>
<div id = "welcome-section">
<h1>
Hey!I am Hamzah
</h1>
<p>A web developer always eager for new projects</p>
</div>
<div id = "projects">
<a class = "project-tile" href = "#"><div>1</div>
<label>Project 1</label></a>
<a class = "project-tile" href = "#"><div>1</div>
<label>Project 2</label></a>
</div>
<div id = "technologies">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
<footer>
<div id = "social"></div>
</footer>
<script src="" async defer></script>
</body>
</html>
If you right click on your page and choose “inspect” and view the source code that comes up, you can move your mouse up and down the code to highlight different sections of the page which can help you to identify what is pushing the page outside the viewport.
If you don’t have patience to discover that, you can try some workarounds to force the page to the correct size.
Eg in the root element et max-width:100vw
(Or even a bit less) and set overflow:hidden;
But check your screen if you do that on different devices and screens.
Ps. Your.grid-container should not be 100vw, your root element should be that (body). Also make sure you explicitly zero the margin and padding on each element until your page is fixed. That will help you find the “long element”.
I had something similar happen to me when trying to make a navbar and it was slightly
Try adding
* {
padding: 0;
margin: 0;
}
to the top of your CSS.
The multiplication symbol selects every element on the page, so it might help in case you missed some.