I'm building a web page and working in the layout for small screens (max-width: 600px). When the screen gets narrow, the page gets a bit of horizontal scroll, as you can see in the code snippet, but it is unexpected for me. I am not finding anything wider than the viewport's width in my code. Why is there that scroll?
/* CSS from index_default.css */
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html, body, *, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Open Sans', sans-serif;
}
h2, h3{
margin-top: 10px;
margin-bottom: 10px;
}
a{
text-decoration: none;
transition: 0.2s linear;
}
header{
background-color: rgb(93, 158, 76);
display: flex;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
}
header h1{
font-family: 'Doppio One', cursive;
color: rgb(214, 245, 210);
}
nav a{
color: rgb(230, 245, 229);
}
#menu{
width: 30px;
}
#firstsection div a{
font-weight: bold;
border: 2px solid rgb(47, 119, 27);
padding: 13px 30px;
font-size: 16.5px;
color: rgb(47, 119, 27);
}
#firstsection div a:hover{
color: rgb(133, 163, 131);
border: 2px solid rgb(133, 163, 131);
}
#lastsection img{
display: block;
margin-right: auto;
margin-left: auto;
}
#lastsection div a:visited{
color: blue;
}
footer{
background-color: rgb(93, 158, 76);
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
color: rgb(214, 245, 210);
}
/* CSS from index_small.css */
#charset "UTF-8";
body{
width: 100vw;
text-align: center;
}
header{
padding-right: 10px;
padding-left: 10px;
}
header img:first-of-type{
width: 40px;
margin-right: 5px;
}
header ul{
display: none;
}
#menu{
margin-left: 15vh;
}
#firstsection{
background-color: rgb(220, 255, 211);
height: 40vh;
padding: 10% 20px 0;
margin-bottom: 8%;
}
#firstsection div{
margin-bottom: 30px;
}
#firstsection a{
position: relative;
top: 35px;
}
#middlesection{
margin: 0 5vw;
}
#textboxes div{
margin-bottom: 8%;
}
#lastsection img{
width: 90%;
margin-top: 8vh;
}
#lastsection div{
position: relative;
bottom: 18.5vh;
}
#lastsection div h2{
font-size: 1.2rem;
}
footer img{
width: 40px;
margin-right: 8px;
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Control you spending and manage your money easily. Your finances by the short hairs.">
<meta name="author" content="Bruno M. B. Sdoukos">
<meta name="keywords" content="finances, managing money, spending control">
<link rel="stylesheet" type="text/css" href="index_default.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)" href="index_small.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1500px)" href="index_large.css">
</head>
<body>
<header>
<img src="Images/icons8-fund-accounting-80.png">
<h1>Finances</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Register</li>
<li>Login</li>
</ul>
<img src="Images/icons8-menu-50.png" id="menu">
</nav>
</header>
<main>
<section id="firstsection">
<div>
<h1>Manage your money easily, anywhere, anytime.</h1>
Get started
</div>
</section>
<section id="middlesection">
<div id="textboxes">
<div>
<img src="Images/icons8-increase-64.png">
<h3>Concrete data</h3>
<p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
</div>
<div>
<img src="Images/icons8-navigation-toolbar-left-filled-50 (1).png">
<h3>Easy interface</h3>
<p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
</div>
<div>
<img src="Images/icons8-natural-user-interface-2-filled-50.png">
<h3>Fast access</h3>
<p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
</div>
</div>
</section>
<section id="lastsection">
<img src="Images/board-1362851_1280.png">
<div>
<h2>Register now and enjoy<br>the best of Finances.</h2>
Create an account
</div>
</section>
</main>
<footer>
<img src="Images/icons8-fund-accounting-80.png">
<div>
<p>A work of Bruno Sdoukos.</p>
</div>
</footer>
</body>
</html>
Change to css file
body{
width: 100vw;
text-align: center;
}
to
body{
width: 100%;
text-align: center;
}
It is the width: 100vw given to body which is causing the scroll. This may be happening as you might have given left or right margin to other sections of the page or assigned widths such that it exceeds the viewport.
Now you can inspect them one by one and rectify. Alternatively, you can adopt any one of these styles for your body tag in addition to what you're using:
Get rid of width: 100vw or
Add max-width:100vw or
Add overflow-x: hidden
Adopting any one of these should fix your issue. Cheers!!
The 100vw width of the body span the whole viewport width. If a vertical scrollbar appears (which is almost always the case), this scrollbar covers / cuts off a small part of those 100vw, so the body actually has to become narrower than 100vw to be fully visible - like "100vw minus the width of the vertical scrollbar". Otherwise a * horizontal* scrollbar will appear (like in your example).
To avoid this, you can simply erase width: 100vw from body, which will set the width to the default auto and will work as expected:
/* CSS from index_default.css */
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
html, body, *, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Open Sans', sans-serif;
}
h2, h3{
margin-top: 10px;
margin-bottom: 10px;
}
a{
text-decoration: none;
transition: 0.2s linear;
}
header{
background-color: rgb(93, 158, 76);
display: flex;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
}
header h1{
font-family: 'Doppio One', cursive;
color: rgb(214, 245, 210);
}
nav a{
color: rgb(230, 245, 229);
}
#menu{
width: 30px;
}
#firstsection div a{
font-weight: bold;
border: 2px solid rgb(47, 119, 27);
padding: 13px 30px;
font-size: 16.5px;
color: rgb(47, 119, 27);
}
#firstsection div a:hover{
color: rgb(133, 163, 131);
border: 2px solid rgb(133, 163, 131);
}
#lastsection img{
display: block;
margin-right: auto;
margin-left: auto;
}
#lastsection div a:visited{
color: blue;
}
footer{
background-color: rgb(93, 158, 76);
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
color: rgb(214, 245, 210);
}
/* CSS from index_small.css */
#charset "UTF-8";
body{
text-align: center;
}
header{
padding-right: 10px;
padding-left: 10px;
}
header img:first-of-type{
width: 40px;
margin-right: 5px;
}
header ul{
display: none;
}
#menu{
margin-left: 15vh;
}
#firstsection{
background-color: rgb(220, 255, 211);
height: 40vh;
padding: 10% 20px 0;
margin-bottom: 8%;
}
#firstsection div{
margin-bottom: 30px;
}
#firstsection a{
position: relative;
top: 35px;
}
#middlesection{
margin: 0 5vw;
}
#textboxes div{
margin-bottom: 8%;
}
#lastsection img{
width: 90%;
margin-top: 8vh;
}
#lastsection div{
position: relative;
bottom: 18.5vh;
}
#lastsection div h2{
font-size: 1.2rem;
}
footer img{
width: 40px;
margin-right: 8px;
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Control you spending and manage your money easily. Your finances by the short hairs.">
<meta name="author" content="Bruno M. B. Sdoukos">
<meta name="keywords" content="finances, managing money, spending control">
<link rel="stylesheet" type="text/css" href="index_default.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)" href="index_small.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1500px)" href="index_large.css">
</head>
<body>
<header>
<img src="Images/icons8-fund-accounting-80.png">
<h1>Finances</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Register</li>
<li>Login</li>
</ul>
<img src="Images/icons8-menu-50.png" id="menu">
</nav>
</header>
<main>
<section id="firstsection">
<div>
<h1>Manage your money easily, anywhere, anytime.</h1>
Get started
</div>
</section>
<section id="middlesection">
<div id="textboxes">
<div>
<img src="Images/icons8-increase-64.png">
<h3>Concrete data</h3>
<p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
</div>
<div>
<img src="Images/icons8-navigation-toolbar-left-filled-50 (1).png">
<h3>Easy interface</h3>
<p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
</div>
<div>
<img src="Images/icons8-natural-user-interface-2-filled-50.png">
<h3>Fast access</h3>
<p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
</div>
</div>
</section>
<section id="lastsection">
<img src="Images/board-1362851_1280.png">
<div>
<h2>Register now and enjoy<br>the best of Finances.</h2>
Create an account
</div>
</section>
</main>
<footer>
<img src="Images/icons8-fund-accounting-80.png">
<div>
<p>A work of Bruno Sdoukos.</p>
</div>
</footer>
</body>
</html>
Related
For a few days I am trying to eliminate the horizontal scroll on the website, but I am unable to do so. Here is the codepen for it: https://codepen.io/170mayank/pen/gOXExag
This is a simple website code made of basic HTML & CSS and only has two sections. I am making it mobile-first, but the problem is in all screen sizes. Sorry for the bad code, I am a total beginner to web dev. I also haven't uploaded the images, as they don't matter.
I have tried my best to solve the issue but was unsuccessful at it :(. Your help would be highly appreciated.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
line-height: 1.25;
}
body{
font-family: gimlet-text, serif;
font-size: 16px;
font-weight: 400;
color: #344559;
min-height: 100vh;
width: 100vw;
}
/* Hero Section */
.sec1{
background-color: #F7F6F4;
}
.sec1__wrap{
display: flex;
flex-direction: column;
margin: 0 15px;
padding: 50px 0;
}
.sec1__wrap__img{
height: 250px;
width: 100%;
object-fit: cover;
object-position: center;
}
.sec1__wrap__h1{
font-size: 48.83px;
font-family: balboa, sans-serif;
font-weight: 600;
margin: 25px 0 15px 0;
}
.sec1__wrap__p{
margin-bottom: 20px;
}
.sec1__wrap__wrap{
display: flex;
gap: 20px;
align-items: center;
}
.sec1__wrap__wrap__btn1{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #F9826A;
padding: 10px 20px;
}
.sec1__wrap__wrap__btn1__text{
font-size: 12.8px;
color: #F7F6F4;
font-weight: 500;
}
/* .sec1__wrap__wrap__btn1__img{
} */
.sec1__wrap__wrap__btn2{
font-size: 12.8px;
color: #F9826A;
text-decoration: underline;
font-weight: 500;
}
/* Section Separator */
.separator{
width: 100vw;
height: 1px;
background-color: #D5D5D5;
}
/* Website Section 2: Services */
.sec2{
background-color: #F7F6F4;
}
.sec2__wrap{
display: flex;
flex-direction: column;
padding: 40px 15px;
}
.sec2__wrap__box-wrap{
background-color: #fff;
border-radius: 20px 20px 0 20px;
overflow: hidden;
/* display: flex;
flex-direction: column; */
}
.sec2__wrap__box-wrap__img{
height: 200px;
width: 100%;
object-fit: cover;
object-position: center;
}
.sec2__wrap__box-wrap__h3{
font-size: 31.25px;
font-family: balboa, sans-serif;
font-weight: 600;
margin: 20px 0 10px 0;
}
.sec2__wrap__box-wrap__dash{
width: 100px;
height: 3px;
background-color: #F9826A;
margin-bottom: 15px;
}
.sec2__wrap__box-wrap__p{
margin-bottom: 30px;
}
.sec2__wrap__box-wrap__btn-wrap{
background-color: #F9826A;
gap: 10px;
}
.sec2__wrap__box-wrap__btn-wrap__p{
color: #fff;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.typekit.net/btg4pzb.css">
</head>
<body>
<section class="sec1">
<div class="sec1__wrap">
<img src="/Images/1. Home/hero.jpg" class="sec1__wrap__img">
<h1 class="sec1__wrap__h1">The Best Freight Solution Company</h1>
<p class="sec1__wrap__p">We provide the most specialized and helpful experience by removing hassle associated with your transportation needs.</p>
<div class="sec1__wrap__wrap">
<a href="#"><div class="sec1__wrap__wrap__btn1">
<p class="sec1__wrap__wrap__btn1__text">Contact Us Today!</p>
<img src="/Images/1. Home/hero mail.svg" class="sec1__wrap__wrap__btn1__img">
</div></a>
<div class="sec1__wrap__wrap__btn2">Apply for job</div>
</div>
</div>
</section>
<div class="separator"></div>
<section class="sec2">
<div class="sec2__wrap">
<div class="sec2__wrap__box-wrap box1">
<img class="sec2__wrap__box-wrap__img" src="/Images/1. Home/image1.jpg">
<h3 class="sec2__wrap__box-wrap__h3">Freight Transportation</h3>
<div class="sec2__wrap__box-wrap__dash"></div>
<p class="sec2__wrap__box-wrap__p">Our company specializes in delivery across multi road transportation platform while providing most competitive rates in the industry.</p>
<div class="sec2__wrap__box-wrap__btn-wrap">
<a href="#">
<p class="sec2__wrap__box-wrap__btn-wrap__p">Request a Quote</p>
</a>
<a href="#">
<img class="sec2__wrap__box-wrap__btn-wrap__img" src="/Images/1. Home/arrow1.svg">
</a>
</div>
</div>
</div>
</section>
</body>
</html>
You can use overflow css property.
Give.
overflow:'hidden'
In you css file on body it will eliminate scroll
You can read documentation of mozilla
EDIT.overflow-x: hidden; its work fore me
EDIT2
.separator {
width: 100%;
height: 1px;
background-color: #D5D5D5;
}
instead of width 100vw here give 100%
So, the problem is that you use width: 100vw; for body and .seperator class. Just change them as width: 100%;.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
line-height: 1.25;
}
body{
font-family: gimlet-text, serif;
font-size: 16px;
font-weight: 400;
color: #344559;
min-height: 100vh;
width: 100%;
}
/* Hero Section */
.sec1{
background-color: #F7F6F4;
}
.sec1__wrap{
display: flex;
flex-direction: column;
margin: 0 15px;
padding: 50px 0;
}
.sec1__wrap__img{
height: 250px;
width: 100%;
object-fit: cover;
object-position: center;
}
.sec1__wrap__h1{
font-size: 48.83px;
font-family: balboa, sans-serif;
font-weight: 600;
margin: 25px 0 15px 0;
}
.sec1__wrap__p{
margin-bottom: 20px;
}
.sec1__wrap__wrap{
display: flex;
gap: 20px;
align-items: center;
}
.sec1__wrap__wrap__btn1{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #F9826A;
padding: 10px 20px;
}
.sec1__wrap__wrap__btn1__text{
font-size: 12.8px;
color: #F7F6F4;
font-weight: 500;
}
/* .sec1__wrap__wrap__btn1__img{
} */
.sec1__wrap__wrap__btn2{
font-size: 12.8px;
color: #F9826A;
text-decoration: underline;
font-weight: 500;
}
/* Section Separator */
.separator{
width: 100%;
height: 1px;
background-color: #D5D5D5;
}
/* Website Section 2: Services */
.sec2{
background-color: #F7F6F4;
}
.sec2__wrap{
display: flex;
flex-direction: column;
padding: 40px 15px;
}
.sec2__wrap__box-wrap{
background-color: #fff;
border-radius: 20px 20px 0 20px;
overflow: hidden;
/* display: flex;
flex-direction: column; */
}
.sec2__wrap__box-wrap__img{
height: 200px;
width: 100%;
object-fit: cover;
object-position: center;
}
.sec2__wrap__box-wrap__h3{
font-size: 31.25px;
font-family: balboa, sans-serif;
font-weight: 600;
margin: 20px 0 10px 0;
}
.sec2__wrap__box-wrap__dash{
width: 100px;
height: 3px;
background-color: #F9826A;
margin-bottom: 15px;
}
.sec2__wrap__box-wrap__p{
margin-bottom: 30px;
}
.sec2__wrap__box-wrap__btn-wrap{
background-color: #F9826A;
gap: 10px;
}
.sec2__wrap__box-wrap__btn-wrap__p{
color: #fff;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.typekit.net/btg4pzb.css">
</head>
<body>
<section class="sec1">
<div class="sec1__wrap">
<img src="/Images/1. Home/hero.jpg" class="sec1__wrap__img">
<h1 class="sec1__wrap__h1">The Best Freight Solution Company</h1>
<p class="sec1__wrap__p">We provide the most specialized and helpful experience by removing hassle associated with your transportation needs.</p>
<div class="sec1__wrap__wrap">
<a href="#"><div class="sec1__wrap__wrap__btn1">
<p class="sec1__wrap__wrap__btn1__text">Contact Us Today!</p>
<img src="/Images/1. Home/hero mail.svg" class="sec1__wrap__wrap__btn1__img">
</div></a>
<div class="sec1__wrap__wrap__btn2">Apply for job</div>
</div>
</div>
</section>
<div class="separator"></div>
<section class="sec2">
<div class="sec2__wrap">
<div class="sec2__wrap__box-wrap box1">
<img class="sec2__wrap__box-wrap__img" src="/Images/1. Home/image1.jpg">
<h3 class="sec2__wrap__box-wrap__h3">Freight Transportation</h3>
<div class="sec2__wrap__box-wrap__dash"></div>
<p class="sec2__wrap__box-wrap__p">Our company specializes in delivery across multi road transportation platform while providing most competitive rates in the industry.</p>
<div class="sec2__wrap__box-wrap__btn-wrap">
<a href="#">
<p class="sec2__wrap__box-wrap__btn-wrap__p">Request a Quote</p>
</a>
<a href="#">
<img class="sec2__wrap__box-wrap__btn-wrap__img" src="/Images/1. Home/arrow1.svg">
</a>
</div>
</div>
</div>
</section>
</body>
</html>
I have this issue with my CSS where I have lots of content in my HTML but in my browser, in the responsive version it won't scroll anymore, in other words, it stops when there is more content to display. How can I prevent that from occurring? It's been happening for quite some time now. Here is my HTML and CSS code I will add the full code.
p.s. what I mean is that in the developer tools in chrome in order to view the website on different devices it stops in the about section it does not show my javascript skills.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto+Slab:wght#100&display=swap"
rel="stylesheet">
<title>Portfolio</title>
</head>
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 100px;
background-color: #111;
padding: 0 5px;
}
header .logo-link {
}
header .logo-link .logo-img {
width: 100px;
height: 100px;
}
header .box {
display: inline-block;
float: right;
}
header .box .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
}
nav {
display: none;
position: absolute;
right: 0;
top: 100px;
width: 45%;
height: 40%;
background-color: #111;
padding-bottom: 20px;
}
nav .ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
nav .ul .li {
margin-top: 30px;
padding: 0 15px;
padding-bottom: 15px;
}
nav .ul li .li-a {
text-transform: capitalize;
color: #fff;
text-decoration: none;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.landing-page {
background-color: #111;
width: 100%;
height: 100vh;
}
.landing-page .title {
margin: 0 0 20px 2px;
color: #fff;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.landing-page .name {
font-size: 40px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
color: #fff;
padding-left: 15px;
}
.landing-page h3 {
font-size: 40px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
color: #fff;
margin: 10px 0 0;
padding-left: 15px;
padding-top: 20px;
}
.landing-page .mission {
color: #fff;
margin-top: 20 0 0px;
font-size: 18px;
padding-top: 20px;
line-height: 18px;
}
.landing-page .check-out {
border: 1px solid #fff;
color: #fff;
text-align: center;
padding-left: 15px;
padding-right: 15px;
width: 200px;
margin-left: 80px;
margin-top: 50px;
}
#about {
background-color: #111;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
}
#about .bar .skill,
p {
color: #fff;
font-size: 18px;
}
#about .bar {
width: 100%;
background-color: #ddd;
}
#about .bar .skill {
text-align: right;
padding-top: 10px;
}
#about .bar p {
text-align: left;
}
<body>
<header class="header">
<img src="img/logo.png" alt="" class="logo-img">
<div class="box">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
</header>
<nav class="nav">
<ul class="ul">
<li class="li">About</li>
<li class="li">Projects</li>
<li class="li">Contact</li>
</ul>
</nav>
<section class="landing-page">
<h1 class="title">Hello world! My name is</h1>
<h2 class="name"> Jorge Artaza. </h2>
<h3>I am a Full Stack Developer</h3>
<p class="mission">My mission is to develop lightning fast website, apps, games, and software that are user friendly.</p>
<p class="check-out">Check out my <br> Portfolio <span>▼</span></p>
</section>
<section id="about">
<div class="img-about">
<img src="" alt="">
<h2>Who am I?</h2>
<p>I am a self taught developer. My interest started at a young age and started to create from that point onward. When I am not developing I am working out or relaxing.</p>
</div>
<p class="my-skills">My Skills</p>
<div class="bar">
<div class="skill ">
<p>HTML</p>
80%
</div>
</div>
<div class="bar">
<div class="skill">
<p>CSS</p>
80%
</div>
</div>
<div class="bar">
<div class="skill js">
<p>JavaScript</p>
70%
</div>
</div>
</section>
</body>
Here is the solution, you need to put that in the head, for the site adjust for mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
If you want know more: Meta viewport - Mozilla
Also, i will recomend you make some changes on your code:
1 - Remove the heights 100vh and put a fix hight for you components, like 500px, 400px. Examples: height: 300px;;
2 - Your code is like a puzzle, put a background-color in your body, not in the components, if you want that the entire page has a black background-color;
3 - Put the sections inside of a main(father element), with that you can use the flex box for adjust your code;
4 - There is on Youtube some great videos about do a better header, i realy don't like this float:righ, because it can bring some problems for you code, like messing the positions of the others elements;
6 - Use the media queries for a better display on the mobile devices, as well - Media Queries | Media Queries - Mozilla
Exemple about the sections:
<main class="main">
<section></section>
<section></section>
</main>
I will recomend this video about the header, because is the only i have watched in english, but you can have an idea: Header video
I have searched and tweek around and the last image still shows up very close to the second. This is a very simple responsive web layout that, for some mistake, it is not displaying properly. this keeps asking me for more details but I have no more details to give.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/* Global */
.container {
widows: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
.button_1 {
height: 38px;
background: #e8491d;
border: none;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
}
/* Header */
header {
background: #35424a;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 4px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 12px;
}
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('../Assets/for\ rent.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
text-align: center;
color: #3433FF;
}
#showcase h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 20px;
}
/* For Tenants */
#cozy {
padding: 15px;
background: #35424a;
}
.button_1 {
float: right;
margin-top: 15px;
}
/*Boxes*/
#boxes {
margin-top: 20px;
}
#boxes .box {
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#main {
margin-top: 20px;
}
#main .box {
float: left;
text-align: center;
width: 33%;
padding: 10px;
display: inline-block;
}
#main .box assets {
width: 100px;
}
/*Footer*/
footer {
padding: 20px;
margin-top: 20px;
color: #ffffff;
background-color: #e8491d;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<meta name="description" content="Properties for lease">
<meta name="keywords" content="lakeland, oldsmar, lutz">
<meta name="author" content="SAGS PROPERTIES LLC">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SAGS PROPERTIES</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./css/style.css" />
<script src="main.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span>SAGS Properties LLC</span></h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Lutz</li>
<li>Oldsmar</li>
<li>Lakeland</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Well Managed Properties</h1>
<p>In Lutz, Oldsmar and Lakeland</p>
</div>
</section>
<section id="cozy">
<div class="container">
<button type="submit" class="button_1">Tenants Click Here</button>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="box">
<img src="./Assets/Entrance Lutz.jpg">
<h3>Lutz</h3>
<p>Lakeview at Calusa Trace</p>
</div>
<div class="container">
<div class="box">
<img src="./Assets/Entrance Lakeland.jpg">
<h3>Lakeland</h3>
<p>Cobblestone Landing</p>
</div>
<div class="container">
<div class="box">
<img src="./Assets/Entrance Oldsmar.jpg">
<h3>Oldsmar</h3>
<p>Gardens at Forrest Lakes</p>
</div>
</div>
</section>
<footer>
<p>SAGS PROPERTIES LLC © 2018</p>
</footer>
</body>
</html>
There are no more details to give. Making a question is as frustrating as learning this!!!
I added a footer in which it is not reaching the bottom of the page and is covering content from my website, here is a picture of this problem. the footer covers text from underneath the two images. Is there any way for the footer to always remain at the bottom; not covering any extra content added in the future.
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
*{
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#content {
min-height: 100%;
position: relative;
margin-bottom: 200px;
}
#main {
padding-bottom: 100px;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
#Header-1 {
font-family: 'Lobster', cursive;
font-size: 35px;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
.container {
margin: 0 auto;
background: #f9f9f9;
font-size: 24px;
object-fit: cover;
}
.parallax {
background: url('images/background-1.jpeg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px;
min-height: 400px;
z-index:-1;
}
p {
font-family: 'Karla', sans-serif;
margin: 2.5%;
padding:0;
}
.b1{
text-align: center;
}
.pic-1{
height:280px;
width:420px;
float: left;
padding-left: 100px;
}
.pic-2{
height:280px;
width:420px;
float: right;
padding-right: 100px;
}
/*----------footer------------*/
#footer {
width:100%;
background-color:#222;
padding: 60px 0px;
position: relative;
clear:both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Croydon Cycles</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Location</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div id="content">
<div id="main">
<div class="container">
<div class="parallax" data-parallax="scroll" data-z-index="-1">
</div>
<div class="content">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.
</p>
</div>
</div>
<div class="profiles">
<p id="Header-1">Here are some of the members of Croydon Cycles:</p>
<div class="pic-1">
<img src="https://cdn.pixabay.com/photo/2017/08/09/10/08/saddle-2614038_960_720.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
<div class="pic-2">
<img src="https://cdn.pixabay.com/photo/2013/10/03/23/19/bike-190483_960_720.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
</div>
</div>
</div>
<footer id="footer">
</footer>
</div>
</body>
</html>
Have a look at the example below. I've added comments to the changes made
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
*{
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
/* Instead of a margin or bottom set nothing unless recuired. Better to use padding */
#content {
min-height: 100%;
position: relative;
}
#main {
padding-bottom: 100px;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
#Header-1 {
font-family: 'Lobster', cursive;
font-size: 35px;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
.container {
margin: 0 auto;
background: #f9f9f9;
font-size: 24px;
object-fit: cover;
}
.parallax {
background: url('images/background-1.jpeg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px;
min-height: 400px;
z-index:-1;
}
p {
font-family: 'Karla', sans-serif;
margin: 2.5%;
padding:0;
}
.b1{
text-align: center;
}
/* Remove hard coded height */
.pic-1{
width:420px;
float: left;
padding-left: 100px;
}
.pic-2{
width:420px;
float: right;
padding-right: 100px;
}
/*----------footer------------*/
/* Set to position relative and bottom 0 */
#footer {
width:100%;
background-color:#222;
padding: 60px 0px;
position: relative;
bottom: 0;
clear:both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Croydon Cycles</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Location</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div id="content">
<div id="main">
<div class="container">
<div class="parallax" data-parallax="scroll" data-z-index="-1">
</div>
<div class="content">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.
</p>
</div>
</div>
<div class="profiles">
<p id="Header-1">Here are some of the members of Croydon Cycles:</p>
<div class="pic-1">
<img src="https://cdn.pixabay.com/photo/2017/08/09/10/08/saddle-2614038_960_720.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
<div class="pic-2">
<img src="https://cdn.pixabay.com/photo/2013/10/03/23/19/bike-190483_960_720.jpg" alt="Proffesional biker" height="280px" width="420px">
<p>The Croydon Cycles was founded in 2001 in order to promote and encourage
all areas of cyclesports. The club has a rich history of racing both on the
road and track. We also have an active social side and regular training trips away.
Croydon Cycles is located in mostly around Thornton heath pond,
however we still are active around all of Croydon.</p>
</div>
</div>
</div>
</div>
<footer id="footer">
</footer>
</div>
</body>
</html>
I'm making a responsive website using bootstrap 3, and I've only just started using it, so I haven't really gotten the hang of it yet. I've made 2 columns inside a container. In the first column I have a nav bar/image and on the second column I have text. I'm trying to add 3 images (in divs) under the nav bar/image I have, but when I try to do this, the divs show but the right column moves to what it should display as on a mobile. I think my media queries have something to do this but I'm unsure on how to fix it. This is what I want it to look like, as well as being responsive, and this is what happened when I tried to implement the images.
/*style sheet*/
#Backg
{
background-image: url("Graphics/ravenna.png");
background-repeat: repeat;
height: 100%;
}
/*Biggest Container and Pattern Backg*/
#PrimaryC {
padding: 10px;
background-image: url("Graphics/paper_fibers.png");
background-repeat: repeat;
height: 100%;
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
}
#Header /*Retro Games Arcade Logo*/
{
height: 100px;
width: 100%;
background-image: url("Graphics/SiteLogo.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
.Content /*Holds Arcade Photo and Text in 2 columns*/
{
width: 100%;
background-color: white;
resize: both;
border-radius: 0px 25px 25px 25px;
border: 1px solid white;
}
#HeaderText /*Title*/
{
font-family:'Rokkitt', serif;
font-size: 35px;
color: black;
text-decoration: underline;
padding-right: 20px;
}
#RegularText /*Main Text Body*/
{
font-family:'Rokkitt', serif;
font-size: 18px;
padding-right: 20px;
}
.dropcap
{ float: left;
color: #903;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}
#Arcade /*Arcade Photo*/
{
width: 100%;
}
/*Navigational Buttons*/
.post-content
{
font-family:'Didact Gothic', sans-serif;
font-size: 150%; /*20px*/
top: 120px;
left:15px;
position: relative;
letter-spacing: 2px;
}
#RightRow
{
Position: relative;
}
.centerBlock
{
position: relative;
top: -200px;
padding-left: 10px;
}
.img-responsive.gallery
{
float: left;
width: 158px;
height: 162px;
margin-right: 25px;
}
158, 162
.col-md-12
{
position: relative;
}
.footer-basic-centered{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: center;
font: normal 18px sans-serif;
padding: 15px;
margin-top: 80px;
}
.footer-basic-centered .footer-company-motto{
color: #8d9093;
font-size: 24px;
margin: 0;
}
.footer-basic-centered .footer-company-name{
color: #8f9296;
font-size: 14px;
margin: 0;
}
.footer-basic-centered .footer-links{
list-style: none;
font-weight: bold;
color: #ffffff;
padding: 35px 0 23px;
margin: 0;
}
.footer-basic-centered .footer-links a{
display:inline-block;
text-decoration: none;
color: inherit;
}
#media (max-width: 600px) {
.footer-basic-centered{
padding: 35px;
}
.footer-basic-centered .footer-company-motto{
font-size: 18px;
}
.footer-basic-centered .footer-company-name{
font-size: 12px;
}
.footer-basic-centered .footer-links{
font-size: 14px;
padding: 25px 0 20px;
}
.footer-basic-centered .footer-links a{
line-height: 1.8;
}
}
/*Desktop*/
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 22px;
position: relative;
top: -360px;
}
/*Tablet Devices*/
#media (min-width: 768px) and (max-width: 969px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 18px;
position: relative;
top: -270px;
font-size: 50%;
}
}
/*Mobile Devices*/
#media(max-width: 767px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 18px;
position: relative;
font-size: 20%;
top: auto;
}
.post-content
{
top: 20px;
font-size: 80px;
}}
/*1200*/
#media (min-width: 970px) and (max-width: 1119px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 25px;
position: relative;
top: -310px;
font-size: 60%;
}}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="Styles.css" />
<!--Main Style Sheet-->
<link rel="stylesheet" href="bootstrap.min.css" />
<!--Bootstrap Style Sheet-->
<link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css' />
<!--Permanent Marker Font-->
<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css' />
<!--Press Start 2P Font-->
<link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Didact+Gothic' rel='stylesheet' type='text/css' />
<title>Retro Games Arcade</title>
</head>
<body>
<div id="Backg">
<div id="PrimaryC" class="container">
<!--Primary Container-->
<div id="Header">
<!--Site Logo-->
</div>
<div class="Content">
<!--Main Content Container-->
<div class="row">
<!--Row 1-->
<div class="col-sm-6">
<!--Left Col-->
<img src="Graphics/Arcade.png" id="Arcade" class="hidden-xs" />
<div class="caption post-content">
<div id="Home">home</div>
<!--Home Button-->
<div id="Stock">stock</div>
<!--Stock Button-->
<div id="AboutUs">about us</div>
<!--About Us Button-->
<div id="ContactUs">contact us</div>
<!--Contact Us Button-->
</div>
<div class="centerBlock">
<div><img class="img-responsive gallery" src="Graphics/">
</div>
<div><img class="img-responsive gallery" src="Graphics/">
</div>
<div><img class="img-responsive gallery" src="Graphics/">
</div>
</div>
<div class="col-sm-6" id="RightRow">
<!--RightCol-->
<p id="HeaderText">Welcome to the Retro Games Arcade</p>
<p id="RegularText">
<span class="dropcap">H</span>ere you can find a treasure of Retro Video Games, sell your unwanted hardware/software;
and also have our professional team repair any damaged hand-held gaming devices.
<br />
<br />We have one of the biggest collectecions of Retro Video Games in the UK, and have genres ranging from Puzzle
Games and Platformers, to Roleplaying Games and Stratgey Games.
<br />
<br />Our staff have over 100 years combined experience of playing retro video games and a professional certified
Nintendo technician, so if you want a recommendation for your
<br />sons birthday present, or you need to get your old GameCube repaired; we are your guys.</p>
</div>
</div>
</div>
<div class="row">
<!--Row 2-->
<div class="col-md-12">
<img src="Graphics/Aracde3.png" id="Vector" class="img-responsive center-block" class="hidden-xs" />
</div>
</div>
<footer class="footer-basic-centered">
<p class="footer-company-motto">Expand Your Retro Playground.</p>
<p class="footer-links">
Home ·
Stock ·
About Us ·
Contact Us</p>
<p class="footer-company-name">Retro Games Arcade ɠ2015</p>
</footer>
</div>
</div>
</body>
</html>
Any help is appreciated! If any other info is needed I'm happy to help also.
The right column is contained on the left side of the page because it's a class="col-sm-6" inside the class="col-sm-6" before it.
It looks like you have a missing </div> before <div class="col-sm-6" id="RightRow">.