CODEWITHSUNDEEP
htmlcss
Leonardo Gonzalez Dantas
Leonardo Gonzalez Dantas

Reputation: 83

Columns overlapping when screen size is smaller

I'm setting up my personal website and I want to include a background video in my index page, then using bootstrap I set the title of my website and my navigation bar to be side by side in a large screen and under each other in medium to smaller screens, however whenever I shrink the page they end up overlapping.

I believe the problem is either on the video size or in the position of my texts. Whenever I state that the position of my divs to be relative the video is bigger than the screen which allows for side scrolling which is something I do not want, however when i set them to relative they behave correctly. Setting their position to fixed avoids the side scrolling but causes the overlapping.

body, html{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	width: 100%;
	height: 100%;
}
#home_vid{
	position: fixed;
	margin:0;
	top:0;
    left:0;
	min-width: 100%;
	width: 100%;
	min-height: 100%;
	max-height: 100%;
	box-sizing: border-box;
	object-fit: cover;
}

#header_home{
	color: green;
	position: fixed;
}

#nav{
	margin: 0;
	position: fixed;
	padding-top: 1%;
}

ul#nav {
	padding-top: 1%;
	font-size: 0;
	box-sizing: border-box;


}
ul#nav li{
	text-align: center;
	display: inline-block;
	border-collapse: collapse;
	padding-right: 1%;


}

ul#nav li a{
	color: white;
	text-transform: uppercase;
    text-decoration: none;
    font-size: calc(2vw + 40%);
}

ul#nav li:hover{
	background-color: rgba(255,255,255,0.2);
}
body #nav:hover{
	display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Home | My Website</title>
	<link rel="stylesheet" type="text/css" href="home.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
	<video autoplay muted loop id="home_vid" src = "videos/website_home.mp4">
	</video>
	<div class="row">
		<div class="col-lg-3 col-md-12"><div id="header_home"> My Website</div></div>
		<div class="col-lg-9 col-md-12">
		<ul id = "nav">
			<li><a href="">About Me</a></li>
			<li><a href="">Lived</a></li>
			<li><a href="">Visited</a></li>
			<li><a href="">Interests</a></li>
			<li><a href="">College</a></li>
			<li><a href="">Contact</a></li>
		</ul>
	</div>
</div>
</body>
</html>

Here is the video

https://www.dropbox.com/s/l6jyaohgwvcpp9i/website_home.mp4?dl=0

These are the two possibilities: I will bold the preferred behavior for each possibility.

You can see side scrolling bar on the bottom https://www.dropbox.com/s/r6gj5kc0kyoa6gg/Screen%20Shot%202019-04-03%20at%2011.07.00%20AM.png?dl=0

However when you make the screen smaller the element are under one another https://www.dropbox.com/s/yoamtz66hj79dfq/Screen%20Shot%202019-04-03%20at%2011.07.25%20AM.png?dl=0

There is no side scrolling https://www.dropbox.com/s/5xmt0mgrwean90d/Screen%20Shot%202019-04-03%20at%2011.06.21%20AM.png?dl=0

However smaller screens overlap https://www.dropbox.com/s/y0499kbddavh5ex/Screen%20Shot%202019-04-03%20at%2011.07.51%20AM.png?dl=0

Upvotes: 1

Views: 1103

Answers (2)

Xenio Gracias
Xenio Gracias

Reputation: 2758

added a class header to row div and added below css.

.header {
  position: fixed;
  top: 0;
}


body,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
}

#home_vid {
  position: fixed;
  margin: 0;
  top: 0;
  left: 0;
  min-width: 100%;
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  object-fit: cover;
}

#header_home {
  color: green;
}

.header {
  position: fixed;
  top: 0;
}


#nav {
  margin: 0;
  position: fixed;
  padding-top: 1%;
}

ul#nav {
  padding-top: 1%;
  font-size: 0;
  box-sizing: border-box;
}

ul#nav li {
  text-align: center;
  display: inline-block;
  border-collapse: collapse;
  padding-right: 1%;
}

ul#nav li a {
  color: black;
  text-transform: uppercase;
  text-decoration: none;
  font-size: calc(2vw + 40%);
}

ul#nav li:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

body #nav:hover {
  display: block;
}

.body {
    margin-top: 50px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Home | My Website</title>
  <link rel="stylesheet" type="text/css" href="home.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <video autoplay muted loop id="home_vid" src="videos/website_home.mp4">
	</video>
  <div class="row header">
    <div class="col-lg-3 col-md-12 brand-name">
      <div id="header_home"> My Website</div>
    </div>
    <div class="col-lg-9 col-md-12 navbar" >
      <ul id="nav">
        <li><a href="">About Me</a></li>
        <li><a href="">Lived</a></li>
        <li><a href="">Visited</a></li>
        <li><a href="">Interests</a></li>
        <li><a href="">College</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </div>
    
  </div>
  
  <div class="body">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</body>

</html>

Upvotes: 1

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

Remove position:fixed. Maybe in the end your header will need it but I see that rule on 3 different elements. This is surely contributing to the stacked layout behavior.

Upvotes: 0

Related Questions