Upon clicking the mobile menu extra space appears on the right of the page causing a horizontal scroll bar to appear.
It appears that width: 100vw; on line 126 is causing the issue but changing this also changes the size of the menu item.
After investigating this issue I found it only appears on windows and not on mac(tested in firefox and chrome).
Codepen
const toggleButton = document.getElementsByClassName("toggle-button")[0];
const navbarLinks = document.getElementsByClassName("nav-links")[0];
toggleButton.addEventListener("click", () => {
navbarLinks.classList.toggle("active");
});
/****************************
PAGE STYLES
***************************/
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
font-size: 1.3125rem;
line-height: 1.6;
background-color: #e8e8e8;
}
.navbar {
background-color: #333;
color: #fff;
margin-bottom: 1.5rem;
}
.container-nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
width: 80%;
margin: 0 auto;
max-width: 1440px;
}
.nav-logo {
font-size: 1.5rem;
margin: 0.5rem;
}
.nav-links ul {
margin: 0;
padding: 0;
display: flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
text-decoration: none;
color: #fff;
padding: 1rem;
display: block;
font-size: 1rem;
}
.nav-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: 1rem;
right: 1rem;
display: none;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: #fff;
border-radius: 10px;
}
.container {
width: 80%;
margin: 0 auto;
max-width: 1440px;
background-color: #fff;
padding: 2rem;
margin-bottom: 1rem;
}
img {
max-width: 100%;
height: auto;
display: block;
}
#media (max-width: 600px) {
/* NAV */
.toggle-button {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-links {
display: none;
/* width: 100vw; */
}
.navbar {
flex-direction: column;
align-items: flex-start;
/* justify-items: first baseline; */
}
.container-nav {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.nav-links ul {
flex-direction: column;
}
.nav-links li {
text-align: center;
width: 100vw;
}
.nav-links li a {
padding: 0.5rem 1rem;
}
.nav-links.active {
display: flex;
}
/* NAV END*/
.container {
width: 100%;
margin: 0 auto;
max-width: 1440px;
background-color: #fff;
padding: 2rem;
margin-bottom: 1rem;
}
}
<!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/style.css" />
<script src="/scripts/navbar.js" defer></script>
<title>test</title>
</head>
<body>
<nav class="navbar">
<div class="container-nav">
<div class="nav-logo">test</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<section class="">
<div class="container row">
<h2 class="section-title">container 1</h2>
<p>
Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
</p>
</div>
</section>
<section class="">
<div class="container row">
<h2 class="section-title">container 2</h2>
<p>
Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
</p>
</div>
</section>
</body>
</html>
Why is this happening?
The reason this is happening is because 100vw is the full width of the viewport, but your page has a vertical scrollbar so the available width is actually "viewport width - scrollbar width". (If you delete the content from the page so that there is no vertical scrollbar, the horizontal scroll doesn't appear).
So for example, if the viewport width is 600px and the scrollbar is 24px, then 100vw is 600px, but the actual space for the menu item is just 576px (600px - 24px) resulting in a scroll bar.
How to fix it?
It is rare that 100vw is really necessary in CSS layouts - 100% is usually preferable as it takes 100% of the available space of its container. So we just need to make sure each of your menu options' containers are also set up correctly. In your case, you need to make just a few changes to the CSS in your #media (max-width: 600px) query:
.nav-links {
width: 100%; /* change from 100vw; */
}
.nav-links li {
width: 100%; /* change from 100vw; */
}
.nav-links.active {
display: block; /* change from flex (it isn't needed and just affects the display) */
}
.container-nav {
width: 100%; /* this was 80% for some reason? */
}
Working Example
(Note I've changed the media query to #media (max-width: 800px) below, so we can see the dropdown menu here in the snippet window without resizing the screen)
const toggleButton = document.getElementsByClassName("toggle-button")[0];
const navbarLinks = document.getElementsByClassName("nav-links")[0];
toggleButton.addEventListener("click", () => {
navbarLinks.classList.toggle("active");
});
/****************************
PAGE STYLES
***************************/
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
font-size: 1.3125rem;
line-height: 1.6;
background-color: #e8e8e8;
}
.navbar {
background-color: #333;
color: #fff;
margin-bottom: 1.5rem;
}
.container-nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
width: 80%;
margin: 0 auto;
max-width: 1440px;
}
.nav-logo {
font-size: 1.5rem;
margin: 0.5rem;
}
.nav-links ul {
margin: 0;
padding: 0;
display: flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
text-decoration: none;
color: #fff;
padding: 1rem;
display: block;
font-size: 1rem;
}
.nav-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: 1rem;
right: 1rem;
display: none;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: #fff;
border-radius: 10px;
}
.container {
width: 80%;
margin: 0 auto;
max-width: 1440px;
background-color: #fff;
padding: 2rem;
margin-bottom: 1rem;
}
img {
max-width: 100%;
height: auto;
display: block;
}
#media (max-width: 800px) {
/* NAV */
.toggle-button {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
/* justify-items: first baseline; */
}
.container-nav {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: #333;
}
.nav-links ul {
flex-direction: column;
}
.nav-links li {
text-align: center;
width: 100%;
}
.nav-links li a {
padding: 0.5rem 1rem;
}
.nav-links.active {
display: block;
}
/* NAV END*/
.container {
width: 100%;
margin: 0 auto;
max-width: 1440px;
background-color: #fff;
padding: 2rem;
margin-bottom: 1rem;
}
}
<nav class="navbar">
<div class="container-nav">
<div class="nav-logo">test</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<section class="">
<div class="container row">
<h2 class="section-title">container 1</h2>
<p>
Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
</p>
</div>
</section>
<section class="">
<div class="container row">
<h2 class="section-title">container 2</h2>
<p>
Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
</p>
</div>
</section>
Related
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500;700&family=Fraunces:opsz,wght#9..144,700&family=Rye&family=Seymour+One&family=Ultra&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: black;
}
.parent {
display: flex;
flex-direction: column;
max-width: 600px;
font-family: "Montserrat";
border-radius: 10px;
margin: 20px;
background-color: white;
}
picture {
display: block;
}
img {
width: 100%;
height: 100%;
}
.main-content {
padding: 1rem;
}
.cologne {
text-transform: uppercase;
letter-spacing: 0.5rem;
color: #8f8f8f;
}
h1 {
font-family: "Fraunces";
overflow-wrap: break-word;
color: #343434;
}
.description {
color: #8f8f8f;
overflow-wrap: break-word;
}
.price {
display: flex;
gap: 1rem;
align-items: center;
overflow-wrap: break-word;
}
.price p:nth-child(1) {
font-size: 2rem;
font-family: "Fraunces";
color: #343434;
}
.price p:nth-child(2) {
text-decoration: line-through;
}
.cart {
width: 100%;
padding: 0.5rem 0;
font-family: inherit;
color: #343434;
}
<main>
<div class="parent">
<picture>
<source media="(max-width:700px)" srcset="https://images.unsplash.com/photo-1592921248991-dd940d2977e9?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQzMjg&ixlib=rb-4.0.3&q=80" />
<img src="https://images.unsplash.com/photo-1514569369508-d2a48d3a423c?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQ3NTM&ixlib=rb-4.0.3&q=80" alt="perfume" />
</picture>
<div class="main-content">
<span class="cologne">Lorem Ipsum</span>
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<div class="description">
Donec sit amet sapien elit. Etiam et pellentesque justo, id posuere justo. Donec urna neque, lobortis hendrerit ornare vel, laoreet vitae urna.</div>
<div class="price">
<p>$149.99</p>
<p>$169.99</p>
</div>
<button class="cart" href="#">Add to Cart</button>
</div>
</div>
</main>
I created this product-preview card and I set the border-radius on the parent class, however, it is not showing at the top, I do not want this, is there a way to fix this, I suspect that the problem is with the image and that it is blocking the radius from showing in some way but I am not exactly sure.
Adding overflow: hidden; to the .parent container fixes that. Otherwise the "not-rounded" edges of the image overflow the container:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500;700&family=Fraunces:opsz,wght#9..144,700&family=Rye&family=Seymour+One&family=Ultra&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: black;
}
.parent {
display: flex;
flex-direction: column;
max-width: 600px;
font-family: "Montserrat";
border-radius: 10px;
margin: 20px;
background-color: white;
overflow: hidden;
}
picture {
display: block;
}
img {
width: 100%;
height: 100%;
}
.main-content {
padding: 1rem;
}
.cologne {
text-transform: uppercase;
letter-spacing: 0.5rem;
color: #8f8f8f;
}
h1 {
font-family: "Fraunces";
overflow-wrap: break-word;
color: #343434;
}
.description {
color: #8f8f8f;
overflow-wrap: break-word;
}
.price {
display: flex;
gap: 1rem;
align-items: center;
overflow-wrap: break-word;
}
.price p:nth-child(1) {
font-size: 2rem;
font-family: "Fraunces";
color: #343434;
}
.price p:nth-child(2) {
text-decoration: line-through;
}
.cart {
width: 100%;
padding: 0.5rem 0;
font-family: inherit;
color: #343434;
}
<main>
<div class="parent">
<picture>
<source media="(max-width:700px)" srcset="https://images.unsplash.com/photo-1592921248991-dd940d2977e9?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQzMjg&ixlib=rb-4.0.3&q=80" />
<img src="https://images.unsplash.com/photo-1514569369508-d2a48d3a423c?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQ3NTM&ixlib=rb-4.0.3&q=80" alt="perfume" />
</picture>
<div class="main-content">
<span class="cologne">Lorem Ipsum</span>
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<div class="description">
Donec sit amet sapien elit. Etiam et pellentesque justo, id posuere justo. Donec urna neque, lobortis hendrerit ornare vel, laoreet vitae urna.</div>
<div class="price">
<p>$149.99</p>
<p>$169.99</p>
</div>
<button class="cart" href="#">Add to Cart</button>
</div>
</div>
</main>
You're right; the image is blocking its parent's border. You need to add the border-radius property to the image as well:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500;700&family=Fraunces:opsz,wght#9..144,700&family=Rye&family=Seymour+One&family=Ultra&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: black;
}
.parent {
display: flex;
flex-direction: column;
max-width: 600px;
font-family: "Montserrat";
border-radius: 10px;
margin: 20px;
background-color: white;
}
.parent img { /* change this to select your particular image */
border-radius: 10px 10px 0 0;
}
picture {
display: block;
}
img {
width: 100%;
height: 100%;
}
.main-content {
padding: 1rem;
}
.cologne {
text-transform: uppercase;
letter-spacing: 0.5rem;
color: #8f8f8f;
}
h1 {
font-family: "Fraunces";
overflow-wrap: break-word;
color: #343434;
}
.description {
color: #8f8f8f;
overflow-wrap: break-word;
}
.price {
display: flex;
gap: 1rem;
align-items: center;
overflow-wrap: break-word;
}
.price p:nth-child(1) {
font-size: 2rem;
font-family: "Fraunces";
color: #343434;
}
.price p:nth-child(2) {
text-decoration: line-through;
}
.cart {
width: 100%;
padding: 0.5rem 0;
font-family: inherit;
color: #343434;
}
<main>
<div class="parent">
<picture>
<source media="(max-width:700px)" srcset="https://images.unsplash.com/photo-1592921248991-dd940d2977e9?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQzMjg&ixlib=rb-4.0.3&q=80" />
<img src="https://images.unsplash.com/photo-1514569369508-d2a48d3a423c?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQ3NTM&ixlib=rb-4.0.3&q=80" alt="perfume" />
</picture>
<div class="main-content">
<span class="cologne">Lorem Ipsum</span>
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<div class="description">
Donec sit amet sapien elit. Etiam et pellentesque justo, id posuere justo. Donec urna neque, lobortis hendrerit ornare vel, laoreet vitae urna.</div>
<div class="price">
<p>$149.99</p>
<p>$169.99</p>
</div>
<button class="cart" href="#">Add to Cart</button>
</div>
</div>
</main>
P.S. shrink the screen a bit when viewing the snippet. The image in particular that is affecting your output only appears on smaller screens.
You can use overflow: clip; on the container and not have scroll bars vs overflow: hidden; which might allow scroll bars.
I also noticed your white background bleeding through, a common issue with starkly differing colors like white/black. I fixed this by moving the white background to the .main-content container - there are several other ways if this is not acceptable.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500;700&family=Fraunces:opsz,wght#9..144,700&family=Rye&family=Seymour+One&family=Ultra&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: black;
}
.parent {
display: flex;
flex-direction: column;
max-width: 600px;
font-family: "Montserrat";
border-radius: 10px;
margin: 20px;
overflow: clip;
}
picture {
display: block;
}
img {
width: 100%;
height: 100%;
}
.main-content {
padding: 1rem;
background-color: white;
}
.cologne {
text-transform: uppercase;
letter-spacing: 0.5rem;
color: #8f8f8f;
}
h1 {
font-family: "Fraunces";
overflow-wrap: break-word;
color: #343434;
}
.description {
color: #8f8f8f;
overflow-wrap: break-word;
}
.price {
display: flex;
gap: 1rem;
align-items: center;
overflow-wrap: break-word;
}
.price p:nth-child(1) {
font-size: 2rem;
font-family: "Fraunces";
color: #343434;
}
.price p:nth-child(2) {
text-decoration: line-through;
}
.cart {
width: 100%;
padding: 0.5rem 0;
font-family: inherit;
color: #343434;
}
<main>
<div class="parent">
<picture>
<source media="(max-width:700px)" srcset="https://images.unsplash.com/photo-1592921248991-dd940d2977e9?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQzMjg&ixlib=rb-4.0.3&q=80" />
<img src="https://images.unsplash.com/photo-1514569369508-d2a48d3a423c?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg3MjQ3NTM&ixlib=rb-4.0.3&q=80" alt="perfume" />
</picture>
<div class="main-content">
<span class="cologne">Lorem Ipsum</span>
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<div class="description">
Donec sit amet sapien elit. Etiam et pellentesque justo, id posuere justo. Donec urna neque, lobortis hendrerit ornare vel, laoreet vitae urna.</div>
<div class="price">
<p>$149.99</p>
<p>$169.99</p>
</div>
<button class="cart" href="#">Add to Cart</button>
</div>
</div>
</main>
Okay, I'll try to make this pretty quick. I'm working on upgrading my website's looks as a fun project. I used tables before as my site layout, but I'm trying to use CSS Grid as I've learned a lot since then. I'm using a CSS grid of just 3 columns, the outer two act as margins and the center is for content. Whenever there is enough content to make the page scroll down, the margins don't grow with it. In fact, neither does the center, because when I scroll to the bottom after putting something below a tall image it just shows the background color of my container.
To make the question simpler, how do I make the off white parts of my page black like the rest of the margins?
Scrolled to middle of page: Link to first picture
Scrolled all the way to the bottom: Link to second picture
I repeat, the off white color is not intentional, that's there because it's the color of the container. Everything that's the cream color should be black or gray!
body {
margin: 0;
width: 100vw;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
}
.content {
width: 70vw;
height: 100vh;
background-color: #252525;
}
.margin {
width: 15vw;
height: 100vh;
background-color: #000000;
}
table{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
tr {
vertical-align: top;
}
a {
color: dodgerblue;
}
p {
color: #45d163;
font-size: 3.0vh;
text-align: left;
margin-left: 2.5vw;
font-family: Arial, bold;
font-weight: bold;
}
ol {
margin-left: 3.5vw;
}
ul{
}
li{
}
.fixed {
position: fixed;
}
.grid-container {
display: grid;
grid-template-columns: 15% 70% 15%;
background-color: #fceee3;
width: 100vw;
height: 100vh;
min-width: 0;
min-height: 100vh;
}
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
min-height: 100vh;
margin-top: 0%;
}
.grid-center {
background-color: #252525;
color: blue;
font-size: 30vh;
text-align: left;
min-height: 100vh;
margin-top: 0%;
}
<!DOCTYPE html>
<html lang="en" >
<!-- partial:index.partial.html -->
<head>
<meta charset="UTF-8">
<title>Keyboard Mechanic</title>
<link rel="stylesheet" href="style.css"> </link>
<style>
.header {
overflow: hidden;
background-color: #171615;
padding: 1% 1%;
width: 100%;
position: fixed;
height: 7%;
}
.header a {
float: left;
color: #f1f1f1;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
width: max-content !important;
margin-right: 10px;
}
.header a.active {
background-color: dodgerblue;
color: white;
width: 8vw;
margin-right: 10px;
}
.header a.logo {
all: unset;
}
.login {
background-color: dodgerblue;
color: white;
width: 8vw;
margin-right: 10px;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header-right {
float: right;
}
#media screen and (max-width: 100%) {
.header a {
float: none;
display: block;
text-align: left;
}
}
</style>
<style>
.wrapper {
display: grid;
grid-template-columns: 15% 70% 15%;
grid-template-rows: 1fr;
background-color: #fceee3;
width: 100vw;
height: 100%;
overflow: scroll;
min-height: 100# !important;
}
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
margin-top: 0%;
height: auto;
min-height: 100# !important;
}
.grid-center {
background-color: #252525;
margin-top: 0%;
width: 100%;
height: 100%;
min-height: 100# !important;
}
</style>
</head>
<body>
<div class="header">
<div class="header-right">
<a class="active" href="newLook.html">Home</a>
<a class="active" href="games.html">Games</a>
<a class="active" href="webprojects.html">Web Projects</a>
<a class="login" href="login.html">Login</a>
Contact
About
</div>
</div>
<div class="wrapper">
<div class="grid-item"> </div>
<div class="grid-center">
<p>Hello </p>
<img style="width: 100%;" src="https://i.imgur.com/DvlV8Sh.png" />
<p> Stuff outside the picture doesn't sit inside the center grid item, if it did, the background would be gray! </p>
</div>
<div class="grid-item"> </div>
</div>
</body>
</html>
<!-- partial -->
You could have done this with flex, To the best of my knowledge grid is not made for that purpose!
Here's an example made with flex
body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #171615;
}
.header {
/* If you don't want the header to be sticky on scroll remove these lines */
position: sticky;
top: 0;
/* If you don't want the header to be sticky on scroll remove these lines */
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
background: #171615;
}
.header-logo {
height: 55px;
}
.logo {
height: 100%;
width: 135px;
object-fit: cover;
}
.header-menu {
display: flex;
flex-flow: row wrap;
}
.header-menu a {
color: #f1f1f1;
padding: 12px;
text-decoration: none;
border-radius: 4px;
margin-right: 8px;
white-space: nowrap;
}
.header a.active {
background: dodgerblue;
}
.login {
background-color: dodgerblue;
}
.header-menu a:hover {
background-color: #ddd;
color: black;
}
.wrapper {
width: 70%;
color: white;
}
/* you can remove this part */
.white-space {
display: flex;
height: 800px;
font-size: 3rem;
background: darkgray;
}
/* you can remove this part */
<div class="header">
<div class="header-logo">
<img class="logo" src="https://via.placeholder.com/135x55" alt="Logo" />
</div>
<div class="header-menu">
<a class="active" href="#">Home</a>
<a class="active" href="#">Games</a>
<a class="active" href="#">Web Projects</a>
<a class="login" href="#">Login</a>
Contact
About
</div>
</div>
<div class="wrapper">
<!-- put your content here -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
<div class="white-space">
<h2 style="margin: auto">White Space</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
<!-- put your content here -->
</div>
Updated:
added custom height to the header
body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #171615;
}
.header {
/* If you don't want the header to be sticky on scroll remove these lines */
position: sticky;
top: 0;
/* If you don't want the header to be sticky on scroll remove these lines */
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
background: #171615;
}
.header-logo {
height: 55px;
}
.logo {
height: 100%;
width: 135px;
object-fit: cover;
}
.header-menu {
display: flex;
flex-flow: row wrap;
height: 100px;
align-items: center;
}
.header-menu a {
color: #f1f1f1;
padding: 12px;
text-decoration: none;
border-radius: 4px;
margin-right: 8px;
white-space: nowrap;
}
.header a.active {
background: dodgerblue;
}
.login {
background-color: dodgerblue;
}
.header-menu a:hover {
background-color: #ddd;
color: black;
}
.wrapper {
width: 70%;
color: white;
}
/* you can remove this part */
.white-space {
display: flex;
height: 800px;
font-size: 3rem;
background: darkgray;
}
/* you can remove this part */
<div class="header">
<div class="header-logo">
<img class="logo" src="https://via.placeholder.com/135x55" alt="Logo" />
</div>
<div class="header-menu">
<a class="active" href="#">Home</a>
<a class="active" href="#">Games</a>
<a class="active" href="#">Web Projects</a>
<a class="login" href="#">Login</a>
Contact
About
</div>
</div>
<div class="wrapper">
<!-- put your content here -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
<div class="white-space">
<h2 style="margin: auto">White Space</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac ut consequat semper viverra. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.</p>
<!-- put your content here -->
</div>
Remove the min-height for .grid-center and .grid-item:
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
margin-top: 0%;
}
.grid-center {
background-color: #252525;
color: blue;
font-size: 30vh;
text-align: left;
margin-top: 0%;
}
After moving things around, I tried to change the position: absolute to position: relative of the actual iframe class, it made the video position under 'Featured' but the dimension of the video is messed up. If I change it back to position: absolute, the video covers the entire page banner, but the responsiveness is good, however the dimension is too big. How do I make it look like the video is under the Featured page, aligned in the center, and responsive as well?
This is my code:
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/*setting font size as 62.5%=10px for easier REM fontsize calculations*/
html, body {
font-size: 62.5%;
height: 100%;
margin: 0;
font-family: font-family: 'Playfair Display', serif;
}
/*making the image parallax as a banner*/
.parallax1 {
background: url(https://i.imgur.com/6wPsROo.png);
min-height: 100%;
background-position: center;
position: relative;
opacity: .95;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
top: 0;
}
* {
padding: 0;
margin: 0;
text-declaration: none;
list-style: none;
box-sizing: border-box;
}
body {
background-color: white;
}
/*customizing banner text*/
#slogan {
font-size: 4.5rem;
color: white;
text-shadow: 1px 1.5px 1px #A26B40;
font-weight: lighter;
}
.heading2 {
width: 100%;
height: auto;
left: 0;
top: 50%;
position: absolute;
text-align: center;
line-height: 3.2rem;
}
#slogan-subheading {
font-size: 2.5rem;
color: white;
text-shadow: .5px .5px 1px #A26B40;
font-weight: lighter;
}
#shop-now {
background-color: #bd8d58;
width: 10%;
height: auto;
margin: 0 auto;
position: relative;
padding: 0px;
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
}
#shop-now:hover {
cursor: pointer;
}
/*make container for each row comprising an image with caption side by side*/
.prod-container {
flex-direction: row;
display: flex;
padding: 10px 20px;
text-align: center;
justify-content: center;
}
/*customize each cell*/
.image-and-capt {
padding: 10px 40px;
}
/*customize productimg*/
#product-img {
width: 200px;
border-radius: 50%;
box-shadow: 3px 5px 15px rgba(182,124,72,0.3);
}
/*customize product name & description*/
#product-name, #product-descrp {
font-family: 'Open Sans', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: rgba(54, 46, 39, 0.8);
}
#product-name {
font-size: 1.5rem;
padding-top: 10px;
}
#product-descrp {
font-size: 1rem;
padding-top: 4px;
}
.featured-container {
background: rgba(255, 214, 170, 0.6);
padding: 50px 100px;
}
.vid-container {
position: relative;
width: 100%;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
}
.vid-container-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
bottom: 0;
right: 0;
display: block;
margin: 0 auto;
}
/*centering the logo and customizing size*/
#header-img {
max-width: 200px;
max-height: auto;
height: auto;
width: auto;
padding: 10px 0px 0px 0px;
}
/*customizing the navigation links*/
.nav-link {
text-decoration: none;
color: #54473C;
font-family: 'Playfair Display', serif;
display: column;
font-size: 1.5rem;
}
/*customizing the actual navigation bar*/
#nav-bar {
background-color: rgb(248, 234, 203);
height: 80px;
width: 100%;
padding: 0px 20px 0px 50px;
z-index: 1000;
position: fixed;
top: 0;
width: 100%;
transition: 0.6s;
}
/*aligning the nav links on the right of the header image*/
nav ul {
float: right;
padding: 0px 20px;
}
/*aligning the links to become horizontally aligned next to each other*/
nav ul li {
display: inline-block;
padding: 25px 10px 5px 50px;
margin-left: 0px;
}
/* customizing appearance of nav-links when hovered*/
.nav-link:hover, nav-link:focus {
background-color: #dcbd85;
padding: 8px;
border-radius: 5px;
transition: .5s;
color: white;
}
/* customizing nav-link when focused or clicked */
.nav-link:focus {
background-color: #dcbd85;
padding: 8px;
border-radius: 5px;
color: white;
}
/* customizing the three bars, making it invisible if in default full page view */
.check-bar {
font-size: 2.5rem;
color: #BF8D7A;
float: right;
cursor: pointer;
margin-right: 5px;
line-height: 80px;
display: none;
}
/*making the checkbox invisible, this checkbox is used as a condition later, that when checked itll make the navlinks appear in a a specific media query*/
#check {
display: none;
}
body, html {
height: 100%;
}
.products-container {
background: #f6f7e9;
padding: 50px 80px;
}
#sections {
font-family: 'Open Sans', sans-serif;
text-align: center;
width: 45%;
font-weight: 800;
font-size: 4rem;
margin: 0 auto;
text-transform: uppercase;
font-weight: lighter;
color: rgba(54, 46, 39, 0.5);
width: 100%;
text-align: center;
border-bottom: 1px solid rgba(54, 46, 39, 0.1);
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background: #f6f7e9;
padding: 0 10px;
}
#media (max-width: 792px){
.nav-link{
font-size: 1.3rem;
}
#header-img{
max-width: 175px;
max-height: auto;
}
}
#media (max-width: 712px){
.nav-link{
font-size: 1.2rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
}
#media (max-width: 675px){
.nav-link{
font-size: 1.3rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
nav ul li {
padding: 25px 10px 5px 50px;
margin-left: -30px;
}
}
#media (max-width: 675px){
.nav-link{
font-size: 1.1rem;
}
#header-img{
max-width: 150px;
max-height: auto;
}
nav ul li {
padding: 25px 10px 5px 50px;
margin-left: -40px;
}
}
/*configure what happens when you click three bars*/
#media (max-width: 500px){
.check-bar{
display: block;
}
/*center the logo , not yet done */
#header-img {
max-width: 200px;
max-height: auto;
display: block;
margin: auto;
}
ul{
position: fixed;
width: 100%
height: 100vh;
top: 80px;
/*when three bars are clicked the left bottom right values makes the whole ul disappear*/
left: -100%;
bottom: -100%;
right: 100%;
text-align: center;
background: rgba(255, 214, 170, 0.9);
transition: all .5s;
/* for stack, this makes the ul box in front of the parallax image since its z index is greater than the parallax*/
z-index: 2;
}
nav ul li {
display: block;
padding: 20px;
}
.nav-link {
font-size: 1.6rem;
font-weight: bold;
margin-left: 60px
}
#check:checked ~ul {
left: 0;
right: 0;
bottom: 0;
}
.nav-link:hover {
background: none;
color: #BF8D7A;
}
.parallax1 {
z-index: 1;
}
}
#media (max-width: 467px){
#header-img{
max-width: 190px;
}
.nav-link {
font-size: 1.6rem;
}
}
#media (max-width: 314px){
#header-img{
max-width: 200px;
margin: auto auto 0px auto;
padding-top: 10px;
}
.nav-link {
font-size: 1.2rem;
}
.check-bar {
font-size: 1.8rem;
}
#nav-bar {
padding-left: 10px;
}
}
#media (max-width: 271px){
#header-img{
max-width: 200px;
margin: auto auto 0px 0px;
padding-top: 5px;
}
.nav-link {
font-size: 1.2rem;
}
.check-bar{
font-size: 1.8rem;
}
#nav-bar {
padding-left: 10px;
}
}
#media (max-width: 251px){
#header-img{
max-width: 180px;
padding-top: 10px;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}
.nav-link {
font-size: 1.2rem;
}
#nav-bar {
padding-left: 8px;
}
.check-bar {
font-size: 1.8rem;
padding-top: 0px;
}
}
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<body>
<header id="header">
<nav id="nav-bar">
<input type="checkbox" id="check">
<label for="check" class="check-bar">
<i class="fas fa-bars"></i>
</label>
<img id="header-img" src="https://i.imgur.com/zxchwt8.gif">
<ul>
<li id="nav-links-list"><a class="nav-link" href="#the-products">products</a></li>
<li id="nav-links-list"><a class="nav-link" href="#featured" target=_blank>featured</a></li>
<li id="nav-links-list"><a class="nav-link" href="#pricing" target=_blank>pricing</a></li>
<li id="nav-links-list"><a class="nav-link" href="#contacts" target=_blank>contact</a></li>
</ul></nav></header>
<div class="parallax1">
<div class="heading2">
<span class="border">
<h1 id="slogan">Pamper your skin.</h1>
<h3 id="slogan-subheading">Cruelty-free, environmentally conscious, and organic. </h3>.
<span id="box"><h4 id="shop-now">SHOP NOW</h4></span
</div>
</div>
<div class="products-container">
<section id="the-products">
<h2 id="sections"><span>products</span></h2>
<div class="image-and-capt">
<div class="prod-container">
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/iSuRo4f.png" alt ="mock-up foundation">
<h3 id="product-name"> Foundation with SPF 50 </h3>
<p id="product-descrp"> Medium-coverage, long-lasting, and available in 50 shades.
</div>
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/KSXpO9w.png" alt="moisturizer">
<h3 id="product-name"> Moisturizer for All Skin Types</h3>
<p id="product-descrp"> Nourishing and brightening, reduces appearance of fine lines and wrinkles.
</div>
</div>
<div class="prod-container">
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/cqzlfal.png" alt ="mock-up tinted moisturizer">
<h3 id="product-name"> Tinted Moisturizer </h3>
<p id="product-descrp"> Light-coverage with 50 shades, nourishing and brightening.
</div>
<div class="image-and-capt">
<img id="product-img" src="https://i.imgur.com/UdInLk3.png" alt ="mock-up face wash">
<h3 id="product-name"> Facewash </h3>
<p id="product-descrp"> Gentle and hydrating facewash, thourougly cleanses dirt, make-up and sebum.</p>
</div>
</div>
</section>
</div>
<section id="featured">
<div class="featured-container">
<h2 id="sections">featured</h2>
<div class"vid-container">
<iframe class="vid-container-iframe" src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560" height="315" frameborder="0"></iframe>
</div>
</section></div>
<section id="pricing">
<p>Nam fermentum risus libero, ac ultricies leo faucibus nec. Nulla rhoncus nulla massa, dignissim finibus magna bibendum a. Morbi et aliquet justo, eu sagittis lectus. Quisque orci ipsum, aliquet ornare porttitor eget, fringilla quis purus. Integer eu semper eros. Donec quis libero at diam eleifend porttitor rutrum eu ipsum. Mauris sapien ipsum, gravida non ipsum sit amet, viverra facilisis mauris. Proin lacinia lectus vitae interdum condimentum. Quisque viverra sit amet diam ut finibus. Etiam nec ullamcorper magna.</p>
</section>
<section id="contact">
<p>Nam fermentum risus libero, ac ultricies leo faucibus nec. Nulla rhoncus nulla massa, dignissim finibus magna bibendum a. Morbi et aliquet justo, eu sagittis lectus. Quisque orci ipsum, aliquet ornare porttitor eget, fringilla quis purus. Integer eu semper eros. Donec quis libero at diam eleifend porttitor rutrum eu ipsum. Mauris sapien ipsum, gravida non ipsum sit amet, viverra facilisis mauris. Proin lacinia lectus vitae interdum condimentum. Quisque viverra sit amet diam ut finibus. Etiam nec ullamcorper magna.</p>
</section>
</div>
</header>
</body>
Your code is a mess to be honest. You have multiple div without closing tag,p without closing tags,
also some = are missing while declaring classes in your html code.
First go through your code, make sure that every single tag has a closing tag, after that continue with your video because if you dont fix these things, then your responsivity will be broken because of those unclosed tags.
Have a look into that, i have fixed the video so now it is under your featured section, you just have to play around with it to make it responsive after you closed every unclosed tag.
<section id="featured">
<div class="featured-container">
<h2 id="sections">featured</h2>
<div class="vid-container">
<iframe class="vid-container-iframe"
src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560"
height="315" frameborder="0"></iframe>
</div>
</div>
</section>
i had been working on a project in the past days but i came across with a visual error that show my boxes doesn't have a proper right margin.
i had tried changing the flex on css but i didn't get other good results to fix this so i ha to scrap that idea
* {
margin: 0;
padding: 0;
}
body {
background-color: #003300;
}
.nav {
background-color: #00b300;
margin-bottom: 0%;
}
ul {
margin-left: 75%;
}
li {
padding: 20px;
display: inline-block;
}
a {
text-align: center;
color: white;
list-style: none;
text-decoration: none;
}
li:hover {
-moz-transition-duration: 0.3s;
background-color: #004d00;
}
.post {
padding: 20px;
background-color: white;
margin-right: 5%;
margin-left: 30%;
margin-top: 5%;
border-radius: 15px;
}
h1 {
text-align: center;
}
.form {
background-color: #404040;
margin-left: 1%;
margin-right: 70%;
padding: 20px;
border-radius: 15px;
}
.link {
background-color: #19194d;
margin-left: 15px;
margin-right: 15px;
padding: 10px;
border-radius: 15px;
color: white;
}
.link:hover {
background-color: #0c0c27;
-moz-transition-duration: 0.3s;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #003300;
}
.nav {
background-color: #00b300;
margin-bottom: 0%;
}
ul {
margin-left: 75%;
}
li {
padding: 20px;
display: inline-block;
}
a {
text-align: center;
color: white;
list-style: none;
text-decoration: none;
}
li:hover {
-moz-transition-duration: 0.3s;
background-color: #004d00;
}
.post {
padding: 20px;
background-color: white;
border-radius: 15px;
}
h1 {
text-align: center;
}
.form {
background-color: #404040;
padding: 20px;
border-radius: 15px;
}
.link {
background-color: #19194d;
margin-left: 15px;
margin-right: 15px;
padding: 10px;
border-radius: 15px;
color: white;
}
.link:hover {
background-color: #0c0c27;
-moz-transition-duration: 0.3s;
}
/* Flex container */
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
}
/* Make post larger than form */
.post {
flex: 3;
margin-left: -65%;
}
.form {
flex: 1;
}
.tema {
background-color: white;
margin-top: 20px;
margin-left: 2%;
padding: 20px;
border-radius: 15px;
}
.thumbnail {
border: solid;
width: 100%;
height: 100px;
}
.titulo-tema {
text-align: center;
}
.boton-tema {
background-color: #00b300;
text-align: center;
padding: 20px;
margin-left: 150px;
margin-right: 150px;
margin-top: 20px;
border-radius: 15px;
}
.boton-tema:hover {
background-color: #004d00;
-moz-transition-duration: 0.3s;
}
.container-temas {
display: flex;
justify-content: space-between;
padding: 20px;
flex-wrap: wrap;
}
#media screen and (min-width: 480px) {
ul {
margin-left: 0%;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: 0%;
margin-bottom: -40%;
margin-right: 0%;
}
.form {
margin-right: 20%;
margin-left: 20%;
}
li {
padding: 70px;
}
h1 {
font-size: 50px;
}
p {
font-size: 40px;
}
.titulo-tema {
font-size: 50px;
}
}
#media screen and (min-width: 767px) {
ul {
margin-left: 35%;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: 0%;
margin-bottom: -80%;
margin-right: 0%;
}
.form {
margin-right: 20%;
margin-left: 20%;
}
li {
padding: 70px;
}
h1 {
font-size: 70px;
}
p {
font-size: 40px;
}
.titulo-tema {
font-size: 70px;
}
}
#media screen and (min-width: 1030px) {
ul {
margin-left: 75%;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: -65%;
margin-bottom: 0%;
margin-right: 0%;
}
.form {
margin-right: 70%;
margin-left: 0%;
margin-bottom: 0%;
}
li {
padding: 20px;
}
h1 {
font-size: 30px;
}
p {
font-size: 20px;
}
.titulo-tema {
font-size: 30px;
}
}
<html>
<head>
<title>math lizard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav">
<ul>
<a href="">
<li>tema 1</li>
</a>
<a href="">
<li>tema 2</li>
</a>
<a href="">
<li>tema 3</li>
</a>
</ul>
</div>
<div class="container-temas">
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p class="descripcion-breve">Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tincidunt vehicula. Sed nec ante molestie, dignissim sapien et, finibus felis. Mauris a enim eget sapien laoreet interdum id a tellus. Duis blandit et lorem non aliquet. Vivamus
id tellus ut eros finibus tempor ac ac sem. Etiam lacinia nisl eu varius ullamcorper. Vestibulum finibus ligula aliquam ipsum fringilla, nec luctus dolor ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur est est, aliquet
ut commodo at, luctus sit amet nunc. Aenean in aliquet neque, vitae commodo tellus. Nulla et semper massa. Quisque tristique turpis ante, non semper libero fringilla a. Praesent et arcu id massa semper iaculis. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; </p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
</div>
</body>
</html>
i just expect to get a proper margin so this problem won't happend everytime a long text is posted on the index
It's hard for me to tell exactly where you are wanting your end result to be, and I cannot comment due to the fact I don't have 50 reputation. However, after looking over the code, rather than doing a flexbox, you could simply add a "width: 40%" to the .tema class. This will keep the divs from expanding into the other area (I personally don't think the margin is the best way to go with it, at least it isn't what I would do.) Here is the code for this, if I am understanding what you want your end result to be correctly (having the large text div not overflow into the right area). This should at least fix part of the area, but note this code does not fix your media queries nor other classes.. I hope I answered this in the way you were looking
* {
margin: 0;
padding: 0;
}
body {
background-color: #003300;
}
.nav {
background-color: #00b300;
margin-bottom: 0%;
}
ul {
margin-left: 75%;
}
li {
padding: 20px;
display: inline-block;
}
a {
text-align: center;
color: white;
list-style: none;
text-decoration: none;
}
li:hover {
-moz-transition-duration: 0.3s;
background-color: #004d00;
}
.post {
padding: 20px;
background-color: white;
margin-right: 5%;
margin-left: 30%;
margin-top: 5%;
border-radius: 15px;
}
h1 {
text-align: center;
}
.form {
background-color: #404040;
margin-left: 1%;
margin-right: 70%;
padding: 20px;
border-radius: 15px;
}
.link {
background-color: #19194d;
margin-left: 15px;
margin-right: 15px;
padding: 10px;
border-radius: 15px;
color: white;
}
.link:hover {
background-color: #0c0c27;
-moz-transition-duration: 0.3s;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #003300;
}
.nav {
background-color: #00b300;
margin-bottom: 0%;
}
ul {
margin-left: 75%;
}
li {
padding: 20px;
display: inline-block;
}
a {
text-align: center;
color: white;
list-style: none;
text-decoration: none;
}
li:hover {
-moz-transition-duration: 0.3s;
background-color: #004d00;
}
.post {
padding: 20px;
background-color: white;
border-radius: 15px;
}
h1 {
text-align: center;
}
.form {
background-color: #404040;
padding: 20px;
border-radius: 15px;
}
.link {
background-color: #19194d;
margin-left: 15px;
margin-right: 15px;
padding: 10px;
border-radius: 15px;
color: white;
}
.link:hover {
background-color: #0c0c27;
-moz-transition-duration: 0.3s;
}
/* Flex container */
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
/* Make post larger than form */
.post {
flex: 3;
margin-left: -65%;
}
.form {
flex: 1;
}
.tema {
background-color: white;
margin-top: 20px;
margin-left: 2%;
padding: 20px;
border-radius: 15px;
width: 40%;
}
.thumbnail {
border: solid;
width: 100%;
height: 100px;
}
.titulo-tema {
text-align: center;
}
.boton-tema {
background-color: #00b300;
text-align: center;
padding: 20px;
margin-left: 150px;
margin-right: 150px;
margin-top: 20px;
border-radius: 15px;
}
.boton-tema:hover {
background-color: #004d00;
-moz-transition-duration: 0.3s;
}
.container-temas {
display: flex;
justify-content: space-between;
padding: 20px;
flex-wrap: wrap;
}
#media screen and (min-width: 480px) {
ul {
margin-left: 0%;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: 0%;
margin-bottom: -40%;
margin-right: 0%;
}
.form {
margin-right: 20%;
margin-left: 20%;
}
li {
padding: 70px;
}
h1 {
font-size: 50px;
}
p {
font-size: 40px;
}
.titulo-tema {
font-size: 50px;
}
}
#media screen and (min-width: 767px) {
ul {
margin-left: 35%;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: 0%;
margin-bottom: -80%;
margin-right: 0%;
}
.form {
margin-right: 20%;
margin-left: 20%;
}
li {
padding: 70px;
}
h1 {
font-size: 70px;
}
p {
font-size: 40px;
}
.titulo-tema {
font-size: 70px;
}
}
#media screen and (min-width: 1030px) {
ul {
margin-left: 75%;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
}
.post {
margin-left: -65%;
margin-bottom: 0%;
margin-right: 0%;
}
.form {
margin-right: 70%;
margin-left: 0%;
margin-bottom: 0%;
}
li {
padding: 20px;
}
h1 {
font-size: 30px;
}
p {
font-size: 20px;
}
.titulo-tema {
font-size: 30px;
}
}
<div class="nav">
<ul>
<a href="">
<li>tema 1</li>
</a>
<a href="">
<li>tema 2</li>
</a>
<a href="">
<li>tema 3</li>
</a>
</ul>
</div>
<div class="container-temas">
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p class="descripcion-breve">Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p>Esta descripcion demuestra que tema se esta explicando</p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
<div class="tema">
<img src="" class="thumbnail">
<h2 class="titulo-tema">titulo del subtema</h2>
<hr>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tincidunt vehicula. Sed nec ante molestie, dignissim sapien et, finibus felis. Mauris a enim eget sapien laoreet interdum id a tellus. Duis blandit et lorem non aliquet. Vivamus id
tellus ut eros finibus tempor ac ac sem. Etiam lacinia nisl eu varius ullamcorper. Vestibulum finibus ligula aliquam ipsum fringilla, nec luctus dolor ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur est est, aliquet
ut commodo at, luctus sit amet nunc. Aenean in aliquet neque, vitae commodo tellus. Nulla et semper massa. Quisque tristique turpis ante, non semper libero fringilla a. Praesent et arcu id massa semper iaculis. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; </p>
<a href="">
<p class="boton-tema">Entrar</p>
</a>
</div>
</div>
I'm unsure how to make the main container ("main") centred? The div box needs to be centred but it is stuck on the left. I wish to keep a certain amount of margin between the overall space and the main div section, but I don't wish to restrict it to snap left?
I am still learning CSS. Any feedback on the layout or how I've done my coding is appreciated. Many thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Business Title</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<header>
<img class="mainImage" src="image/logo.png">
</header>
</head>
<body>
<div class="main">
<h1>Simple Business.</h1>
<ul>
<li>I need Option 1.</li>
<li>I just need Option 2.</li>
<li>I just need Option 3.</li>
<li>I need Option 4.</li>
</ul>
<footer>
<h1>About THIS BUSINESS.</h1>
<p class="about"> Insert About Text Here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dolor nibh. Ut at pulvinar ex. Cras nibh ante, iaculis quis aliquet at, placerat quis enim. In maximus nulla ut commodo sollicitudin. Etiam a erat laoreet augue tempus pellentesque. Fusce tempor sed urna in cursus. Sed lectus leo, tempor sed magna quis, maximus vulputate velit. Ut non pellentesque arcu, quis placerat magna. Cras ac odio in leo egestas convallis. Nunc egestas pulvinar placerat.
</p>
</footer>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
----------
**CSS:**
/******************************************
/* SETUP
/*******************************************/
/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */
}
.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */
}
/******************************************
/* BASE STYLES
/*******************************************/
body {
color: #000;
background-color: #ececec;
font-size: 12px;
line-height: 1.4;
font-family: Helvetica, Arial, sans-serif;
text-align: center;
}
h1 {
font-family:'Arial Black';
font-size: 4em;
padding-top: 5px;
}
li {
text-decoration: none;
font-size: 2em;
line-height: 2.5em;
color: #FF48D0;
}
ul {
list-style: none;
padding: 0;
}
.mainImage {
width:75%;
max-width:483px;
}
a:active, a:hover {outline: 0 none; text-decoration: none;}
a {text-decoration: none}
/******************************************
/* LAYOUT
/*******************************************/
.main {
background-color: #FFF;
margin:1em;
margin-left: 2em;
margin-right: 2em;
float: center;
max-width: 960px;
}
.about, p {
float:center;
max-width: 960px;
padding-left: 1em;
padding-right: 1em;
text-align: justify;
}
header {
padding:10px;
}
footer {
padding: 5px;
}
/******************************************
/* ADDITIONAL STYLES
/*******************************************/
/* =======================================================================
Media Queries
========================================================================== */
#media only screen and (max-width: 930px) {
.main {
max-width: 95%;
margin: 0 auto;
text-align:center;
padding-bottom: 1.5em;
float: none;
}
h1 {
font-size: 2.5em;
text-align: center;
}
li {
font-size: 2em;
line-height: 2.5em;
}
}
#media only screen and (max-width: 480px) {
.main {
max-width: 95%;
}
h1 {
font-size: 2em;
text-align: center;
}
li {
font-size: 1.4em;
line-height: 2em;
}
}
You just need to add margin: 0 auto; to your css for that element.
Like so:
.main {
margin: 0 auto;
}
This will centre the element automatically to the users browser.
CSS Margins
The classical way to center an element with CSS is to set left and right margin to auto
Your code should be
.main {
background-color: #FFF;
margin: 1em auto;
max-width: 960px;
}
.main {
background-color: #FFF;
max-width: 960px;
display: table;
margin: 0 auto;
}
Fiddle: Demo