I am studying CSS and creating a responsive web page. I have started working in a media query. When I maximize the screen, all works as expected, but when I reduce its size, the content that does not fit in the viewport is hidden, and a white space stays in its place. That space can be seen scrolling the screen to side. Why is that space appearing instead the rest of the content? I also don't understand why my content doesn't fit in the screen, because I am using percentage values to elements' width. My code is below:
#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;
}
html, body{
width: 99.13vw;
}
body{
font-family: 'Open Sans', sans-serif;
margin: 0;
}
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: 10px 30px;
width: 100%;
}
header img{
width: 45px;
}
header h1{
font-family: 'Doppio One', cursive;
margin-left: 10px;
color: rgb(214, 245, 210);
}
nav ul{
display: flex;
list-style: none;
}
nav ul li a{
margin-left: 55px;
}
nav a{
color: rgb(230, 245, 229);
font-size: 17px;
}
nav a:hover{
background-color: rgb(143, 182, 135);
padding: 10px 15px;
margin: 0 -15px 0 40px;
}
nav img{
display: none;
width: 30px;
height: 35px;
}
#firstsection{
background-image: url(Images/coffee-3289259_1280.jpg);
background-size: cover;
height: 900px;
position: relative;
}
#firstsection div{
margin-top: 0;
position: absolute;
left: 100px;
top: 150px;
color: rgb(47, 119, 27);
text-align: center;
}
#firstsection h1{
margin-bottom: 45px;
}
#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);
}
#textboxes{
display: flex;
margin-top: 50px;
flex-wrap: wrap;
}
#textboxes div{
text-align: center;
margin: 15px 60px;
border: 2px solid rgb(93, 158, 76);
padding: 30px 30px;
width: 27%;
}
#middlesection img:first-of-type{
width: 55px;
}
#middlesection h2{
text-align: center;
width: 100%;
}
#lastsection{
text-align: center;
}
#lastsection img{
width: 30%;
margin: 100px auto 0px;
}
#lastsection div{
position: relative;
bottom: 450px;
}
#lastsection div a:visited{
color: blue;
}
footer{
background-color: rgb(93, 158, 76);
padding: 15px;
color: rgb(214, 245, 210);
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
footer img{
height: 35px;
width: 35px;
margin-right: 15px;
}
footer div{
text-align: center;
}
#media screen and (max-width: 800px){
#textboxes div{
width: 100%;
}
#lastsection img{
width: 85%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Control you spending and manage your money easily. Your finances by the short hairs." name="description">
<meta content="Bruno M. B. Sdoukos" name="author">
<meta content="finances, managing money, spending control" name="keywords">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<img src="Images/icons8-fund-accounting-80.png"> <a href="index.html">
<h1>Finances</h1></a>
<nav>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact us
</li>
<li>
Register
</li>
<li>
Login
</li>
</ul>
</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%20(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>
Actually it's not hidden. The links in the header just happen to have a color that's close enough to white that the contrast is really low. They're overflowing the right side of the header when the header's content is wider than the viewport.
The simplest solution would be to give flex-wrap:wrap to header, but I recommend using a media query to override the display:flex instead (for better backwards compatibility).
#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;
}
html,
body {
width: 99.13vw;
}
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
}
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: 10px 30px;
width: 100%;
}
#media all and (max-width:56em) {
header {
display: block;
}
header>a,
header>nav {
display: inline-block;
}
}
header img {
width: 45px;
}
header h1 {
font-family: 'Doppio One', cursive;
margin-left: 10px;
color: rgb(214, 245, 210);
}
nav ul {
display: flex;
list-style: none;
}
nav ul li a {
margin-left: 55px;
}
nav a {
color: rgb(230, 245, 229);
font-size: 17px;
}
nav a:hover {
background-color: rgb(143, 182, 135);
padding: 10px 15px;
margin: 0 -15px 0 40px;
}
nav img {
display: none;
width: 30px;
height: 35px;
}
#firstsection {
background-image: url(Images/coffee-3289259_1280.jpg);
background-size: cover;
height: 900px;
position: relative;
}
#firstsection div {
margin-top: 0;
position: absolute;
left: 100px;
top: 150px;
color: rgb(47, 119, 27);
text-align: center;
}
#firstsection h1 {
margin-bottom: 45px;
}
#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);
}
#textboxes {
display: flex;
margin-top: 50px;
flex-wrap: wrap;
}
#textboxes div {
text-align: center;
margin: 15px 60px;
border: 2px solid rgb(93, 158, 76);
padding: 30px 30px;
width: 27%;
}
#middlesection img:first-of-type {
width: 55px;
}
#middlesection h2 {
text-align: center;
width: 100%;
}
#lastsection {
text-align: center;
}
#lastsection img {
width: 30%;
margin: 100px auto 0px;
}
#lastsection div {
position: relative;
bottom: 450px;
}
#lastsection div a:visited {
color: blue;
}
footer {
background-color: rgb(93, 158, 76);
padding: 15px;
color: rgb(214, 245, 210);
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
footer img {
height: 35px;
width: 35px;
margin-right: 15px;
}
footer div {
text-align: center;
}
#media screen and (max-width: 800px) {
#textboxes div {
width: 100%;
}
#lastsection img {
width: 85%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Control you spending and manage your money easily. Your finances by the short hairs." name="description">
<meta content="Bruno M. B. Sdoukos" name="author">
<meta content="finances, managing money, spending control" name="keywords">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<img src="Images/icons8-fund-accounting-80.png">
<a href="index.html">
<h1>Finances</h1>
</a>
<nav>
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact us
</li>
<li>
Register
</li>
<li>
Login
</li>
</ul>
</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%20(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
I am working on a personal project and i use scroll-snap in this project
but for some reason the scroll snap sometimes overshoots or lands at an awkward position between 2 parts of the page
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght#600&display=swap');
:root {
--bg-color: rgb(33, 32, 41);
--header-color: rgb(255, 170, 55);
--color-white: white;
--color-black: black;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
html{
scroll-snap-type: y mandatory;
}
html, body {
font-family: 'Titillium Web', sans-serif;
background-color: var(--bg-color);
color: var(--color-white);
width: 100%;
}
body div {
scroll-snap-align: start;
}
header {
background: var(--header-color);
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
}
header div {
width: 80%;
margin: 0 auto;
}
header div::after {
content: '';
display: table;
clear: both;
}
header div img {
position: absolute;
float: left;
margin: 0.6em;
}
nav ul {
width: auto;
float: right;
margin: 2em;
}
nav ul li {
display: inline-block;
margin-left: 2em;
font-family: 'Roboto', sans-serif;
}
nav ul li a {
font-size: 1.5em;
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav ul li a:hover {
color: rgb(93, 93, 93);
}
#about {
display: flex;
justify-content: center;
align-items: center;
width: clamp(750px, 80%, 100%);
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
}
#about p {
display: inline;
color: var(--header-color);
}
#about h1 {
margin-bottom: 1em;
}
#invite {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
background-color: var(--header-color);
color: var(--color-black);
}
#invite div {
width: clamp(750px, 80%, 100%);
}
#invite div h1 {
margin-bottom: 2em;
}
#invite div button {
width: 6em;
height: 3em;
background-color: rgba(0, 0, 0, 0);
color: var(--color-black);
font-size: 1em;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
border: 1px solid black;
transition: 0.2s;
}
#invite button:hover {
margin-top: 0.3em;
}
#invite button a {
color: var(--color-black);
text-decoration: none;
}
#contact {
display: flex;
justify-content: center;
align-items: center;
width: clamp(750px, 80%, 100%);
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
}
#contact div h1 {
margin-bottom: 1em;
}
<!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>FoxoBot</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div>
<img src="files/logo.png" alt="Logo" height="72em">
<nav>
<ul>
<li>About</li>
<!--<li>showcase</li>-->
<li>Invite</li>
<li>contact</li>
</ul>
</nav>
</div>
</header>
<div id="about">
<div>
<h1>About</h1>
<p><p>FoxoBot</p> is a Discord bot developed by Lappland and Ralkey.</p>
<br>
<p><p>FoxoBot</p> is a easy to use and a friendly bot for general, fun & administrative commands on Discord</p>
<br>
<p><p>FoxoBot</p> is always in development and we also learn alot along the way</p>
</div>
</div>
<!--<div id="showcase">
-- i dont have anything for showcase yet --
</div>-->
<div id="invite">
<div>
<h1>Invite FoxoBot to your server</h1>
<button>Invite!</button>
</div>
</div>
<div id="contact">
<div>
<h1>Contact us</h1>
<p>you can contact us throught Discord.</p>
<p>our tags are:</p>
<p>Ralkey: blank</p>
<p>Lappland: blank</p>
</div>
</div>
</body>
</html>
(I recommend opening the snippet in full page)
after countless amounts of time searching for a solution I have given up and landed here
I hope atleast one of you is able to help me
It appears your problem is that you're applying scroll-snap-align: start; to every div within body and so when you scroll it is snapping to each div in your page. Whereas you only want to be applying it to its first child of the body or in your case each section of your page.
So all I have done in the example below is changed body div to body > div in your css.
You can see more information on the greater than sign in css here: What does the ">" (greater-than sign) CSS selector mean?
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght#600&display=swap');
:root {
--bg-color: rgb(33, 32, 41);
--header-color: rgb(255, 170, 55);
--color-white: white;
--color-black: black;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
html{
scroll-snap-type: y mandatory;
}
html, body {
font-family: 'Titillium Web', sans-serif;
background-color: var(--bg-color);
color: var(--color-white);
width: 100%;
}
body > div {
scroll-snap-align: start;
}
header {
background: var(--header-color);
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
}
header div {
width: 80%;
margin: 0 auto;
}
header div::after {
content: '';
display: table;
clear: both;
}
header div img {
position: absolute;
float: left;
margin: 0.6em;
}
nav ul {
width: auto;
float: right;
margin: 2em;
}
nav ul li {
display: inline-block;
margin-left: 2em;
font-family: 'Roboto', sans-serif;
}
nav ul li a {
font-size: 1.5em;
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav ul li a:hover {
color: rgb(93, 93, 93);
}
#about {
display: flex;
justify-content: center;
align-items: center;
width: clamp(750px, 80%, 100%);
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
}
#about p {
display: inline;
color: var(--header-color);
}
#about h1 {
margin-bottom: 1em;
}
#invite {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
background-color: var(--header-color);
color: var(--color-black);
}
#invite div {
width: clamp(750px, 80%, 100%);
}
#invite div h1 {
margin-bottom: 2em;
}
#invite div button {
width: 6em;
height: 3em;
background-color: rgba(0, 0, 0, 0);
color: var(--color-black);
font-size: 1em;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
border: 1px solid black;
transition: 0.2s;
}
#invite button:hover {
margin-top: 0.3em;
}
#invite button a {
color: var(--color-black);
text-decoration: none;
}
#contact {
display: flex;
justify-content: center;
align-items: center;
width: clamp(750px, 80%, 100%);
height: 100vh;
margin: 0 auto;
text-align: center;
font-size: 1.5em;
}
#contact div h1 {
margin-bottom: 1em;
}
<!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>FoxoBot</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div>
<img src="files/logo.png" alt="Logo" height="72em">
<nav>
<ul>
<li>About</li>
<!--<li>showcase</li>-->
<li>Invite</li>
<li>contact</li>
</ul>
</nav>
</div>
</header>
<div id="about">
<div>
<h1>About</h1>
<p><p>FoxoBot</p> is a Discord bot developed by Lappland and Ralkey.</p>
<br>
<p><p>FoxoBot</p> is a easy to use and a friendly bot for general, fun & administrative commands on Discord</p>
<br>
<p><p>FoxoBot</p> is always in development and we also learn alot along the way</p>
</div>
</div>
<!--<div id="showcase">
-- i dont have anything for showcase yet --
</div>-->
<div id="invite">
<div>
<h1>Invite FoxoBot to your server</h1>
<button>Invite!</button>
</div>
</div>
<div id="contact">
<div>
<h1>Contact us</h1>
<p>you can contact us throught Discord.</p>
<p>our tags are:</p>
<p>Ralkey: blank</p>
<p>Lappland: blank</p>
</div>
</div>
</body>
</html>
I need my work done soon, but I don't have access to my bigger monitor. I assume the teacher also has a big monitor where he'll look at my work, so it shouldn't be a problem.
But my site only looks normal on 70% and I'm having a big headache trying to make it work so I have to work on 70%.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
}
header {
display: flex;
width: 50%;
height: 8vh;
margin: auto;
align-items: center;
}
.nav-links,
.search-container {
display: flex;
}
nav {
position: relative;
flex: 1;
}
.nav-links {
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link {
color: #ffffff;
font-size: 18px;
text-decoration: none;
}
.search-container {
flex: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
background-color: #c4c4c4;
display: flex;
width: 50%;
height: 30vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
width: 500px;
height: 30px;
margin: 20px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
text-align: justify;
width: 70%;
font-size: 13px;
}
.sideimage {
position: absolute;
right: 640px;
top: 390px;
}
.polygon {
position: absolute;
right: 960px;
bottom: 260px;
width: 0;
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
background-color: #222222;
display: flex;
width: 50%;
height: 29vh;
margin: auto;
flex-direction: column;
align-items: flex-start;
}
.piirkonnad p {
position: absolute;
left: 554px;
bottom: 270px;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
.copyright p {
position: absolute;
right: 803px;
bottom: 24px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
position: absolute;
right: 550px;
bottom: -2px;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
body {
background-color: #000000;
}
</style>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</nav>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance" ;>
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer" ;>
</div>
<div class="polygon"></div>
</div>
</main>
<section>
<div class="piirkonnad">
<p>Piirkonnad</p>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
I've heard about responsive design already, but I can't figure it out. I'm not the greatest at coding and it was hard to achieve what I have so help is appreciated a ton.
Your code has some mistakes on it, you have ; on your img element and your style element should be in the head tag, and the reason why your website is not responsive is because you are using position:absolute, keep your website simple, or if you really want to still use position:absolute, then that div should be contained on another div but set it it to position:relative.
Anyways, I fixed it and now totally responsive, here it is:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
padding-top:20px;
}
header{
display:flex;
justify-content:space-evenly;
width: 50%;
margin: auto;
flex-wrap:wrap;
}
.nav-links{
display: flex;
}
.nav-links{
justify-content: space-evenly;
max-width: 300px;
list-style: none;
}
.nav-link{
color: #ffffff;
font-size: 18px;
padding:10px;
text-decoration: none;
}
#justdance {
display: flex;
width: 50%;
margin: auto;
align-items: top;
}
.about {
padding:10px;
background-color: #c4c4c4;
width: 50%;
margin: auto;
}
.search-container{
min-width:30px
}
.quote {
text-align: center;
display: block;
border-radius: 10px;
border-style: solid;
box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 2px 0px;
padding:5px;
margin: 10px auto 0 auto;
}
.description {
margin: 30px auto 0 auto;
width: 70%;
font-size: 13px;
}
.polygon {
height: 0;
border-top-width: 82px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 90px;
border-right-style: solid;
border-right-color: #c4c4c4;
transform: rotate(-180deg);
}
.piirkonnad {
position:relative;
display:flex;
background-color: #222222;
display: flex;
width: 50%;
padding-top:30px;
height: 29vh;
margin: auto;
justify-content:space-evenly;
}
.piirkonnad p {
text-align:center;
font-family: Roboto;
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
footer{
margin-top:1em;
}
.copyright p {
text-align:center;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 12px;
color: #FFFFFF;
}
.social {
display:flex;
justify-content:center;
}
.fa {
padding: 15px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: #c4c4c4;
color: black;
}
.fa-twitter {
background: #c4c4c4;
color: black;
}
.fa-facebook {
background: #c4c4c4;
color: black;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Just Dance</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
background-color: #000000;
}
</style>
</head>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#">Avaleht</a></li>
<li><a class="nav-link" href="#">Meist</a></li>
<li><a class="nav-link" href="#">Login</a></li>
</ul>
</nav>
<div class="search-container">
<input type="text" placeholder="Otsing" name="search">
</div>
</header>
<main>
<img src="header.jpg" alt="Just Dance" id="justdance">
<div class="about">
<div class="quote">“Dance is the hidden language of the soul” - Marta Graham</div>
<div class="description">
<div class="text">
<p>Kunagi pole liiga hilja alustada. Just Dance veebilehelt leiad<br>
tantsukursusi üle Eesti.</p>
<br>
<p>Sulle sobiva kursuse leidmine on imelihtne - vali piirkond või<br>
tantsustiil ning sulle avaneb loetelu kursustest.</p>
<br>
<p>Ka tantsukaaslaste leidmine on imelihtne. Kirjuta sulle sobiva<br>
kursuse kommentaaridesse oma kaaslaseotsingust ning jää<br>
ootama vastust. Ehk leiad juba homme oma unelmate partneri?<br>
Kursuste kommenteerimiseks registreeru "Just Dance" kasutajaks.</p>
</div>
</div>
</div>
<section>
<div class="piirkonnad">
<div class="polygon"></div>
<p>Piirkonnad</p>
<div class="sideimage">
<img src="dancers.png" alt="Dancers" id="dancer">
</div>
</div>
<div class="row1">
<img src="1.jpg" alt="Harjumaa" width="170" height="100">
</div>
</section>
</main>
<footer>
<div class="copyright">
<p>Just Dance © Noor Meister Kõik õigused kaitstud</p>
</div>
<div class="social">
</div>
</footer>
</body>
</html>
For make a website responsive you need to avoid px and use %, vw (viewport width) or vh (viewport height).
After in your css you need to declare #media only screen and (max-width: screenSizepx) and inside make the responsive layout for each screen.
Usually i make this with:
#media only screen and (max-width: 1000)
#media only screen and (max-width: 550px)
#media only screen and (max-width: 400px)
When I run my code in the browser, I have this little line of white space at the bottom of the page. I’ve been trying different solutions but can’t seem to find one that works. Below is the home.html page. Maybe someone here can shed some light into the problem.
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="cooper, scooper, dog, pop, pick, up>
<meta name="author" content="primarysnail">
<meta name="viewport" content="width=device-width">
<meta name="description" content="connecting clients in need of dog pick pick up srvice with scoopers who will come to the client and scoop the poop">
<title>CoopersScoopers || Home</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
</head>
<body>
<header> <!-- company name top left; nav bar top right -->
<div class="container">
<div class="branding">
<h1><span>cooper</span>Scoopers</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Contact Us</li>
<li>Find a Scooper</li>
</ul>
</nav>
</div>
</header>
<section class="showcase"> <!-- showcase section; button to find scooper (./find.html) -->
<div class="container">
<h1>Leave the</h1>
<br>
<h1>Poo to the</h1>
<br>
<h1>Professionals.</h1>
<button type="button">Connect With a Scooper Today</button>
</div>
</section>
<section class="info-bar"> <!-- info bar; shows scooper process in 3 sections -->
<div class="container">
<div class="box">
<img src="../images/poop.jpg">
<h3>Connect With a Local Scooper</h3>
</div>
<div class="box">
<img src="../images/location.jpg">
<h3>Mark Your Poo</h3>
</div>
<div class="box">
<img src="../images/calendar.jpg">
<h3>Schedule Future Scoops</h3>
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h1>Come Experience the Joy of a Poop-Free Life.</h1>
</section>
</body>
<footer>
<p>Copyright © primarySnail//</p>
</footer>
</html>
Here is the linked style.css file:
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
}
/* global */
.container {
margin: auto;
width: 80%;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
button {
height: 50px;
background-color: #ffff00;
opacity: 0.8;
border: none;
padding-right: 30px;
padding-left: 30px;
float: left;
margin-top: -20px;
float: right;
}
button a {
text-decoration: none;
color: #4b0082;
font-weight: bold;
font-size: 25px;
}
/* header */
header {
padding-top: 30px;
min-height: 70px;
border-bottom: 4px solid #f0e68c;
background-color: #ffffff;
color: #8a2be2;
font-size: 10px;
}
header a {
text-decoration: none;
}
nav a {
color: #8a2be2;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
}
header span {
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0px 10px 0px 10px;
}
.branding {
float: left;
}
.branding h1 {
margin: 0;
padding: 0px 10px 0px 10px;
border: 4px solid #8a2be2;
}
header nav {
float: right;
margin-top: 10px;
}
header .current {
border: 1px solid #999;
background-color: #8a2be2;
border-collapse: collapse;
}
header .current a {
color: #ffffff;
font-weight: bold;
}
/* showcase */
.showcase {
background-color: #8a2be2;
color: #ffffff;
text-align: left;
min-height: 200px;
border-bottom: 4px solid #f0e68c;
}
.showcase h1 {
font-size: 55px;
margin-top: 0;
margin-bottom: 0;
padding: 0px;
display: inline-block;
}
/* info bar*/
.info-bar {
margin-top: 20px;
border-bottom: 4px solid #f0e68c;
}
.info-bar .box {
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
.info-bar .box img {
width: 90px;
height: 90px;
}
/* testimonials */
.testimonials {
background-color: #8a2be2;
color: #ffffff;
}
.testimonials h1 {
text-align: center;
}
/* footer */
footer {
background-color: #f0e68c;
margin-top: 0px;
padding: 5px;
text-align: center;
color: black;
opacity: 0.6;
}
I cannot for the life of me figure out why that little line of white space is in there at the very bottom. screenshot
Yes, I have observed white space showing in the bottom. It is because the elements inside body tag is not occupying the full available body size.
elemets heights are as
body- 722
header- 104
.showcase- 251enter code here
.info-bar- 201
.testimonials- ~71
footer- ~62
the white space in the botom is remaining area of viewport. If you make the browser smaller the white space will go away.
To fix this proble you can use below css to the body.
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
/* Add below lines*/
display: flex;
flex-direction: column;
align-items: stretch;
}
I'm working on a Site for myself, but I have no clue how I get the Navigationbar centered in the site.
I thought that maybe someone else has an idea :) the whole navigation bar is slightly to the left & I don't know how to fix it.. Hope you guys out there can do this :) I'm a beginner # coding & I have so much more to learn ..
screenshot of the page
logo
thank you for your help :)
Html:
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li>Sets</li>
<li>About</li>
<li class="logo">SueZ Logo</li>
<li>Gigs</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="features">
<figure>
<img src="" alt="trololololol">
<figcaption>Fresh Baked Techno</figcaption>
</figure>
<figure>
<img src="" alt="lalala">
<figcaption>?</figcaption>
</figure>
<figure>
<img src="" alt="Bla bli blub">
<figcaption>?</figcaption>
</figure>
</section>
<footer>Copyright © 2020 SueZ</footer>
</body>
</html>
CSS:
body {
background: rgb(58, 58, 58);
color: rgb(174, 62, 50);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: black;
background-image: url("Fotos/background-warehouse.jpg");
background-size: 100%;
background-position: center;
height: 150px;
padding: 20px;
text-align: center;
}
header a {
color: rgb(174, 62, 50);
text-decoration: none;
text-transform: uppercase;
margin-top: 60px;
text
}
header .logo a {
background-image: url(Fotos/SueZ_Logo_Red_BG_Transparent.PNG);
background-size: 100px;
background-repeat: no-repeat;
display: inline-block;
height: 190px;
position: relative;
text-indent: -9999999px;
top: -40px;
width: 200px;;
margin-left: 20%;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 50%;
box-shadow: gray 0 0 10px;
width: 200px;
}
footer {
background: black;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
Here I made a snippet for the solution of your issue. check it. Hope it helps.
Updated CSS marked with /*----------*/
...............................................................................
A TIP for you
Don't use height.
body {
background: rgb(58, 58, 58);
color: rgb(174, 62, 50);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
/*------------------------*/
header {
background-color: black;
background-image: url("Fotos/background-warehouse.jpg");
background-size: 100%;
background-position: center;
/*height: 150px;*/
padding: 40px;
text-align: center;
position:relative;
}
.logo{width:100px;position:absolute; left:0; right:0; margin: 0 auto; top:0; z-index:10;}
.logo img{width:100%;}
/*------------------------*/
header a {
color: rgb(174, 62, 50);
text-decoration: none;
text-transform: uppercase;
margin-top: 60px;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
/*------------------------*/
nav li:last-child{margin-right:0}
nav li:nth-child(2){margin-right:120px}
/*------------------------*/
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 50%;
box-shadow: gray 0 0 10px;
width: 200px;
}
footer {
background: black;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">
<img src="https://i.stack.imgur.com/yfW19.png" alt="logo">
</div>
<nav>
<ul>
<li>Sets</li>
<li>About</li>
<li>Gigs</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="features">
<figure>
<img src="" alt="trololololol">
<figcaption>Fresh Baked Techno</figcaption>
</figure>
<figure>
<img src="" alt="lalala">
<figcaption>?</figcaption>
</figure>
<figure>
<img src="" alt="Bla bli blub">
<figcaption>?</figcaption>
</figure>
</section>
<footer>
Copyright © 2020 SueZ
</footer>
I am building a responsive web page. Now I am going to start working with media queries, but when I insert <meta name="viewport" content="width=device-width"> and make the screen get smaller, part of the background of my header, first section and footer is cutted, remaining only a part of them and white space with their text. You can see it in the on the snippet. Why is it happening and what can I do do fix it?
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
body{
font-family: 'Open Sans', sans-serif;
margin: 0;
}
a{
text-decoration: none;
transition: 0.2s linear;
}
header{
background-color: rgb(93, 158, 76);
display: flex;
align-items: center;
padding: 0px 30px;
}
header img{
width: 45px;
}
header h1{
font-family: 'Doppio One', cursive;
margin-left: 10px;
color: rgb(214, 245, 210);
}
nav ul{
display: flex;
list-style: none;
}
nav ul li a{
margin-left: 55px;
}
nav a{
color: rgb(230, 245, 229);
font-size: 17px;
}
nav a:hover{
background-color: rgb(143, 182, 135);
padding: 10px 15px;
margin: 0 -15px 0 40px;
}
#firstsection{
background-image: url(Images/coffee-3289259_1280.jpg);
background-size: cover;
height: 900px;
position: relative;
}
#firstsection div{
margin-top: 0;
position: absolute;
left: 100px;
top: 150px;
color: rgb(47, 119, 27);
text-align: center;
}
#firstsection h1{
margin-bottom: 45px;
}
#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);
}
#textboxes{
display: flex;
margin-top: 50px;
}
#middlesection div div{
text-align: center;
margin: 15px 60px;
border: 2px solid rgb(93, 158, 76);
padding: 30px 30px;
}
#middlesection img:first-of-type{
width: 55px;
}
#middlesection h2{
text-align: center;
width: 100%;
}
#lastsection{
text-align: center;
}
#lastsection img{
width: 500px;
margin: 100px auto 0px;
}
#lastsection div{
position: relative;
bottom: 450px;
}
#lastsection div a:visited{
color: blue;
}
footer{
background-color: rgb(93, 158, 76);
padding: 15px;
color: rgb(214, 245, 210);
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
footer img{
height: 35px;
width: 35px;
margin-right: 15px;
}
footer div{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<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="stylesheet.css">
<link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/8.0.1/normalize.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>
</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>
Have made some changes to your code. The initial problem was with the midsection. When the midsection has a width greater than the screen width a horizontal scrollbar appears to allow the user to see the rest of the content.
To fix that you could make the alignment vertical instead of horizontal depending on the width of the screen. In the solution below I wrap the content.
The second problem was when the width of the contents in the header exceeds the width of the screen that is when the width of the container tries to be the same width as the screen(remember the meta name="viewport") but the content overflows(as it has a greater width).
To fix that you could show your header items inside of a menu. In my solution below I have just made it take no space in the header(display: none). E.g solution might be like this.
NOTE: The solution below does not have elegant styling maybe you could add a padding here and there to make it look elegant
<!DOCTYPE html>
<html>
<head>
<title>Finances | Manage your money easily</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<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="stylesheet.css" />
<link
rel="stylesheet"
type="text/css"
href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<script>
function myFunction() {
var x = document.getElementById("topulid");
if (x.className === "topul") {
x.className += " responsive";
} else {
x.className = "topul";
}
}
</script>
<header>
<img src="Images/icons8-fund-accounting-80.png"/>
<h1>Finances</h1>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</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>
#charset "UTF-8";
#import url("https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap");
body {
font-family: "Open Sans", sans-serif;
margin: 0;
}
a {
text-decoration: none;
transition: 0.2s linear;
}
header {
background-color: rgb(93, 158, 76);
display: flex;
align-items: center;
}
header img {
width: 45px;
}
header h1 {
font-family: "Doppio One", cursive;
margin-left: 10px;
color: rgb(214, 245, 210);
}
.topnav {
overflow: hidden;
flex: 1;
display: flex;
justify-content: space-around;
align-items: center;
max-width: 500px;
padding-left: 50px;
}
.topnav a {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav .icon {
display: none;
}
.icon {
display: none;
}
#firstsection {
background-image: url(Images/coffee-3289259_1280.jpg);
background-size: cover;
height: 900px;
position: relative;
}
#firstsection div {
margin-top: 0;
position: absolute;
left: 100px;
top: 150px;
color: rgb(47, 119, 27);
text-align: center;
}
#firstsection h1 {
margin-bottom: 45px;
}
#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);
}
#textboxes {
display: flex;
/* flex-wrap: wrap; */
margin-top: 50px;
justify-content: space-around;
flex-wrap: wrap;
}
#middlesection div div {
text-align: center;
/* margin: 15px 0px; */
border: 2px solid rgb(93, 158, 76);
padding: 30px 30px;
max-width: 300px;
}
#middlesection img:first-of-type {
width: 55px;
}
#middlesection h2 {
text-align: center;
width: 100%;
}
#lastsection {
text-align: center;
}
#lastsection img {
width: 500px;
margin: 100px auto 0px;
}
#lastsection div {
position: relative;
bottom: 450px;
}
#lastsection div a:visited {
color: blue;
}
footer {
background-color: rgb(93, 158, 76);
padding: 15px;
color: rgb(214, 245, 210);
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
footer img {
height: 35px;
width: 35px;
margin-right: 15px;
}
footer div {
text-align: center;
}
#media screen and (max-width: 830px) {
.topnav a {
display: none;
}
.icon {
float: right;
display: block;
}
}
Do a simple global reset with:
html,
body,
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
then set the body to:
body {
width: 100vw;
}