I want the links email, LinkedIn and GitHub to be responsive by having it directly at the bottom of the title let's connect when in mobile view. Also I would like the margin top of 200px to be none when in mobile view. Apologies for the newbie question.
#media only screen and (max-width: 1200px) {
footer.content-container {
margin-left: 10px;
margin-right: 10px;
}
}
.footer {
grid-area: footer;
margin-top: 38px;
margin-left: 10%;
margin-right: 10%;
height: 700px;
margin-bottom: 100px;
}
.footer-text {
padding: 200px 100px;
font-family: "Khula", sans-serif;
font-weight: 600;
font-size: 80px;
color: #bbbbbb;
line-height: 80px;
letter-spacing: -1px;
display: inline-block;
}
.footer-contact {
font-family: "Khula", sans-serif;
font-weight: 600;
font-size: 35px;
color: #222222;
line-height: 50px;
letter-spacing: -1px;
text-decoration: none;
padding-top: 0px;
margin-left: 60px;
margin-right: 60px;
}
.footer-text-color {
color: #222222;
}
ul {
list-style-type: none;
text-decoration: none;
margin-top: 200px;
float: right;
}
<footer class="content-container footer">
<div class="footer-text">Let's <br> <span class="footer-text-color">Connect</span></div>
<ul>
<li>Email</li>
<li>LinkedIn</li>
<li>GitHub</li>
</ul>
</footer>
add this to your css:
#media only screen and (max-width: 845px) {
.footer-text {
padding-bottom: 0;
}
ul {
margin-top: 0;
float: unset;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#media only screen and (max-width: 1200px) {
footer.content-container {
margin-left: 10px;
margin-right: 10px;
}
}
.footer {
grid-area: footer;
margin-top: 38px;
margin-left: 10%;
margin-right: 10%;
height: 700px;
margin-bottom: 100px;
}
.footer-text {
padding: 200px 100px;
font-family: "Khula", sans-serif;
font-weight: 600;
font-size: 80px;
color: #bbbbbb;
line-height: 80px;
letter-spacing: -1px;
display: inline-block;
}
.footer-contact {
font-family: "Khula", sans-serif;
font-weight: 600;
font-size: 35px;
color: #222222;
line-height: 50px;
letter-spacing: -1px;
text-decoration: none;
padding-top: 0px;
margin-left: 60px;
margin-right: 60px;
}
.footer-text-color {
color: #222222;
}
ul {
list-style-type: none;
text-decoration: none;
margin-top: 200px;
float: right;
}
#media only screen and (max-width: 845px) {
.footer-text {
padding-bottom: 0;
}
ul {
margin-top: 0;
float: unset;
}
}
</style>
</head>
<body>
<footer class="content-container footer">
<div class="footer-text">
Let's <br />
<span class="footer-text-color">Connect</span>
</div>
<ul>
<li>Email</li>
<li>LinkedIn</li>
<li>GitHub</li>
</ul>
</footer>
</body>
</html>
Related
So I'm creating this website for a student project and my content on the top of the page is disappearing under the fixed nav bar I made.
How do I make it so the content area starts under the nav bar and doesn't end up under it?
(Temporarily fixed with <br> tags)
See code below:
HTML and CSS (The About page I'm working on)
#font-face {
font-family: "Roboto Light";
src: url(font/Roboto-Light.ttf)
}
#font-face {
font-family: "Roboto Regular";
src: url(font/Roboto-Regular.ttf);
}
#font-face {
font-family: "Roboto Medium Italic";
src: url(font/Roboto-MediumItalic.ttf);
}
#media (max-width:1200px) {
.indexsIMG img {
display: none !important;
}
}
body {
margin: 0 0;
padding: 0 0;
font-family: "Roboto Light";
background-color: #3aafa9;
}
.topbox {
font-size: 25px;
}
.topbox ul {
position: fixed;
top: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3aafa9;
max-width: 100%;
}
.flex-navbar {
display: flex;
justify-content: center;
margin-right: 15%;
font-family: "Roboto Light";
}
.leftbox {
margin-left: 5%;
font-family: "Roboto Medium Italic";
color: #171717;
}
.flex-navbar .active {
color: #171717;
}
.topbox li a {
display: block;
color: #feffff;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 1em;
float: left;
text-align: center;
}
.flex-navbar li a:hover {
color: #2b7a78;
}
.indexClickbox{
background-color: #2b7a78;
}
.index{
display: flex;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
}
.index h1{
font-size: 8rem;
}
.index p{
font-size: 2rem;
}
.indexOpphavIMG{
font-size: 1rem;
}
.indexTXT{
width: 50%;
float: right;
padding-left: 2%;
}
.index img{
max-width: 100%;
border-radius: 10px;
}
.indexIMG{
width: 50%;
float: left;
padding-top: 7%;
}
.index button{
width: auto;
margin-left: 5%;
background-color:#2b7a78;
border: none;
font-weight: 500;
font-size: 3rem;
color: #3aafa9;
border-radius: 4px;
}
.index button:hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
cursor: pointer;
}
.index a:link{
text-decoration: none;
}
.container {
display: block;
width: 0 auto;
text-align: center;
}
.box {
display: inline-block;
text-align: center;
padding: 0 5%;
}
.footer{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Stylesheet.css">
</head>
<body>
<nav class="topbox">
<ul>
<li class="leftbox"><a class="active" href="index.html">INOVA</a></li>
<div class="flex-navbar">
<li><a class="active" href="about.html">About</a></li>
<li>Innovation Camps</li>
<li>Contact</li>
</div>
</ul>
</nav>
<br>
<br>
<div class="container">
<div class="box">
<h1>About Inova</h1>
</div>
</div>
<footer>
<div class="footer">
<p></p>
</div>
</footer>
</body>
</html>
By adding padding to the top of the body, you can push the main content down so that it isn't below the fixed navbar:
#font-face {
font-family: "Roboto Light";
src: url(font/Roboto-Light.ttf)
}
#font-face {
font-family: "Roboto Regular";
src: url(font/Roboto-Regular.ttf);
}
#font-face {
font-family: "Roboto Medium Italic";
src: url(font/Roboto-MediumItalic.ttf);
}
#media (max-width:1200px) {
.indexsIMG img {
display: none !important;
}
}
body {
margin: 0 0;
padding: 80px 0 0;
font-family: "Roboto Light";
background-color: #3aafa9;
}
.topbox {
font-size: 25px;
}
.topbox ul {
position: fixed;
top: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3aafa9;
max-width: 100%;
background-color: rgba(0, 0, 0, .2);
}
.flex-navbar {
display: flex;
justify-content: center;
margin-right: 15%;
font-family: "Roboto Light";
}
.leftbox {
margin-left: 5%;
font-family: "Roboto Medium Italic";
color: #171717;
}
.flex-navbar .active {
color: #171717;
}
.topbox li a {
display: block;
color: #feffff;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 1em;
float: left;
text-align: center;
}
.flex-navbar li a:hover {
color: #2b7a78;
}
.indexClickbox {
background-color: #2b7a78;
}
.index {
display: flex;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
}
.index h1 {
font-size: 8rem;
}
.index p {
font-size: 2rem;
}
.indexOpphavIMG {
font-size: 1rem;
}
.indexTXT {
width: 50%;
float: right;
padding-left: 2%;
}
.index img {
max-width: 100%;
border-radius: 10px;
}
.indexIMG {
width: 50%;
float: left;
padding-top: 7%;
}
.index button {
width: auto;
margin-left: 5%;
background-color: #2b7a78;
border: none;
font-weight: 500;
font-size: 3rem;
color: #3aafa9;
border-radius: 4px;
}
.index button:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
cursor: pointer;
}
.index a:link {
text-decoration: none;
}
.container {
display: block;
width: 0 auto;
text-align: center;
}
.box {
display: inline-block;
text-align: center;
padding: 0 5%;
}
.footer {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Stylesheet.css">
</head>
<body>
<nav class="topbox">
<ul>
<li class="leftbox"><a class="active" href="index.html">INOVA</a></li>
<div class="flex-navbar">
<li><a class="active" href="about.html">About</a></li>
<li>Innovation Camps</li>
<li>Contact</li>
</div>
</ul>
</nav>
<div class="container">
<div class="box">
<h1>About Inova</h1>
</div>
</div>
<footer>
<div class="footer">
<p></p>
</div>
</footer>
</body>
</html>
The easiest way in my opinion is replacing position: fixed with position: sticky and also move this property to .topbox because it is the element, that you want to keep at the top of viewport.
Keep in mind that position: sticky has smaller browser support,
body {
margin: 0 0;
padding: 0 0;
font-family: "Roboto Light";
background-color: #3aafa9;
}
.topbox {
font-size: 25px;
top: 0;
position: sticky;
}
.topbox ul { width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3aafa9;
max-width: 100%;
}
.flex-navbar {
display: flex;
justify-content: center;
margin-right: 15%;
font-family: "Roboto Light";
}
.leftbox {
margin-left: 5%;
font-family: "Roboto Medium Italic";
color: #171717;
}
.flex-navbar .active {
color: #171717;
}
.topbox li a {
display: block;
color: #feffff;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 1em;
float: left;
text-align: center;
}
.flex-navbar li a:hover {
color: #2b7a78;
}
.indexClickbox {
background-color: #2b7a78;
}
.index {
display: flex;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
}
.index h1 {
font-size: 8rem;
}
.index p {
font-size: 2rem;
}
.indexOpphavIMG {
font-size: 1rem;
}
.indexTXT {
width: 50%;
float: right;
padding-left: 2%;
}
.index img {
max-width: 100%;
border-radius: 10px;
}
.indexIMG {
width: 50%;
float: left;
padding-top: 7%;
}
.index button {
width: auto;
margin-left: 5%;
background-color: #2b7a78;
border: none;
font-weight: 500;
font-size: 3rem;
color: #3aafa9;
border-radius: 4px;
}
.index button:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
cursor: pointer;
}
.index a:link {
text-decoration: none;
}
.container {
display: block;
width: 0 auto;
text-align: center;
}
.box {
display: inline-block;
text-align: center;
padding: 0 5%;
}
.footer {
}
<body>
<nav class="topbox">
<ul>
<li class="leftbox"><a class="active" href="index.html">INOVA</a></li>
<div class="flex-navbar">
<li><a class="active" href="about.html">About</a></li>
<li>Innovation Camps</li>
<li>Contact</li>
</div>
</ul>
</nav>
<div class="container">
<div class="box">
<h1>About Inova</h1>
</div>
</div>
<footer>
<div class="footer">
<p></p>
</div>
</footer>
</body>
This is full css of the code. On tablet and on the computer it looks good but not on the mobile device when the website is published. Logo and h1 are not responsive. This is full css of the code. On tablet and on the computer it looks good but not on the mobile device when the website is published. Logo and h1 are not responsive.
body {
margin: 0;
padding: 0;
}
/* header */
.logo-img {
width: 420px;
}
h1 {
text-align: right;
font-family: 'Abel', sans-serif;
font-size: 35px;
margin-top: 20px;
color: #1a1a1a;
text-transform: uppercase;
}
h2 {
text-align: right;
font-family: 'Abel', sans-serif;
font-size: 21px;
color: #1a1a1a;
font-weight: 100;
text-transform: uppercase;
letter-spacing: 6px;
}
.line {
width: 97.5%;
}
/* end header */
/* content */
.main-img {
width: 100%;
}
p {
text-align: center;
margin-top: 10px;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
font-weight: 100;
color: #1a1a1a;
}
.copy {
font-size: 15px;
font-weight: 100;
font-family: 'Quicksand', sans-serif;
}
/* #map {
width: 55%;
height: 200px;
box-sizing: border-box;
text-align: right;
} */
/* end content */
/* footer */
.footer-img {
width: 350px;
margin-right: 15px;
}
h3 {
text-align: center;
font-family: 'Abel', sans-serif;
font-size: 30px;
color: #5d75ab;
text-decoration: none;
margin-top: 10px;
text-transform: uppercase;
}
h4 {
text-align: center;
margin-top: 30px;
text-transform: uppercase;
letter-spacing: 2px;
font-family: 'Abel', sans-serif;
font-size: 24px;
font-weight: 100;
color: #1a1a1a;
}
h5 {
text-align: center;
margin-top: 30px;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
font-weight: 100;
color: #1a1a1a;
}
a href {
text-align: center;
}
a:link {
color: #5d75ab;
text-decoration: none;
}
a:visited {
color: #5d75ab;
text-decoration: none;
}
a:hover {
color: #5d75ab;
text-decoration: none;
color: #1a1a1a;
}
a:active {
color: #5d75ab;
text-decoration: none;
}
.footer-img-container,
.top-row {
margin-top: 30px;
}
.link {
text-align: center;
display: block;
}
/* end footer */
/* Mobile Phone Responsiveness - Nexus 5 */
#media screen and (max-width: 414px) {
h1 {
font-size: 14px !important;
line-height: 80%;
margin-top: 10px;
}
h2 {
font-size: 11px;
letter-spacing: 1.2px;
}
p {
font-size: 12px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 10px;
}
h5 {
font-size: 11px;
}
.logo-img {
width: 180px;
position: absolute;
}
.main-img {
width: 100%;
}
.footer-img {
width: 100%;
}
.line {
width: 90%;
}
.copy {
font-size: 10px;
font-weight: 100;
font-family: sans-serif;
}
}
/* Tablet Responsiveness - IPad */
#media screen and (min-width:416px) and (max-width: 768px) {
h1 {
font-size: 25px;
margin-top: 0px;
}
h2 {
font-size: 20px;
letter-spacing: 2px;
}
p {
font-size: 16px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 12px;
}
.logo-img {
width: 250px;
position: absolute;
}
.main-img {
width: 100%;
}
.footer-img {
width: 100%;
}
.line {
width: 95%;
}
.copy {
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
}
}
You can use bootstrap image responsive class.
<img src="images/logo.png" alt="logo" class="img-responsive"/>
And for H1 tag you can use media query to make it responsive font size.
h1 {
font-size: 22px;
}
.img-responsive {
width: 100%;
max-width: 200px
}
#media screen and (max-width: 360px) {
h1 {
font-size: 12px !important;
line-height: 80%;
margin-top: 10px;
}
.img-responsive {
width: 100%;
max-width: 100px
}
}
<img src="https://www.freelancingdesign.com/wp-content/uploads/2015/04/fd-theme-590x300.jpg" alt="logo" class="img-responsive" />
<h1>Logo Goes here</h1>
#media screen and (max-width: 360px) {
h1 {
font-size: 12px !important;
line-height: 80%;
margin-top: 10px;
}
}
Make sure the media query css should be below the main css then it will work, Sequence is matter.
Hope this helpful.
/*Desktop responsive*/
.logo-img {
width: 260px;
}
h1 {
font-size: 58px !important;
line-height: 80%;
margin-top: 10px;
}
/* Mobile Phone Responsiveness */
#media screen and (max-width: 360px) {
h1 {
font-size: 12px !important;
line-height: 80%;
margin-top: 10px;
}
h2 {
font-size: 9px;
letter-spacing: 1.2px;
}
p {
font-size: 12px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 8px;
}
h5 {
font-size: 11px;
}
.logo-img {
width: 160px;
position: absolute;
}
.main-img {
width: 100%;
}
.footer-img {
width: 100%;
}
.line {
width: 90%;
}
.copy {
font-size: 10px;
font-weight: 100;
font-family: sans-serif;
}
}
<!DOCTYPE html>
<html lang="sh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Frigo MMB</title>
</head>
<body>
<!-- header -->
<div class="container">
<div class="row top-row">
<div class="col-md-6">
<img src="https://www.stickpng.com/assets/images/580b57fcd9996e24bc43c529.png" alt="logo img" class="logo-img">
</div>
<div class="col-md-6">
<h1>Hladjenje & <span style="color: #5d75ab">Klimatizacija</span></h1>
<h2>011.8525636 | 063.7591345</h2>
</div>
</div>
</body>
</html>
May some of the existing code overwriting your h1 tag so i have added !important it will help overwrite the other h1 class.
Hope this snippet will help you.
You can try something like this, if image have width of 400px, then use:
#media screen and (max-width: 400px) {
img {
width: 100%;
}
}
You may need to use different selector for img, same that set the width in your other CSS if you set it.
With header you can put it above the image if it's next to image on desktop.
So my mission is to get the gray rectangle (<div class="brand"> </div>) to go automatic below the others, right now it's stuck between the header and my two other body divs. As I am a beginner I have no idea about how to fix this, i've searched a little and tried to add a clear: both, but that didn't solve my problem. Would love if someone out there can take a look at my code and see what's wrong. I'm sorry for no structure in my code.
Thanks,Filip
:D
CODE (CSS FIRST, THEN HTML):
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: #fff;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-search{
color: black;
font-size: 14px;
transform:scaleX(-1);
margin-left: 50px;
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
nav i:hover{
color: red;
cursor: pointer;
}
.wrapper{
position: relative;
height: 100%;
width: 100%;
}
.bild1{
height: 350px;
width: 600px;
margin-top: 100px;
margin-left: 80px;
position: absolute;
z-index: 4;
background-image: url('Img/KBA.jpg');
background-position: 10% 30% ;
background-size: 180%;
}
.bild2{
height: 350px;
width: 600px;
margin-top: 140px;
margin-left: 120px;
z-index: 3;
position:absolute;
background-color: #3D6BB8;
}
.entrytext{
float: right;
margin-right: 90px;
margin-top: 175px;
clear: both;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand{
height: 100px;
weight: 400px;
background-color: gray;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<i class="fas fa-search"></i>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
</div>
<div class="bild1">
</div>
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div>
<div class="brand">
</div>
</body>
</html>
Sorry for no structure ;D
//Filip
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: #fff;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-search{
color: black;
font-size: 14px;
transform:scaleX(-1);
margin-left: 50px;
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
nav i:hover{
color: red;
cursor: pointer;
}
.package {
width: 80%;
margin: 30px auto;
}
.bild2 {
height: 350px;
width: 50%;
background-color: #3D6BB8;
float: left;
}
.entrytext {
margin-left: 30px;
float: left;
margin-bottom:70px;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand {
height: 100px;
background-color: gray;
clear: both;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<i class="fas fa-search"></i>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
</div>
<div class="bild1">
</div>
<div class="package">
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div></div>
<div class="brand">
</div>
</body>
</html>
Add position its styling and add botom:0;
So, my goal is to create a simple navigation bar with centered links/elements. I kinda succeeded... Kinda because when i set the floating option it changes spaces between elements and twitches the text out of position (run the snippet to see the efect).
Wanna have some space between the words, but to stay fixed when floated over or activated/selected.
I tried to make it work with styling only ul and li tags but it didnt work, so i tried placing the li tags into separate divisions. Still no success.
Looked through every possible solution i could think of - adding margins, padding, setting them to auto, looked through similar questions here and around web and i got nothing.
Obviously i'm missing something and i would appreciate your help very much so i can continue working on my website.
Here is the code:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
margin: 0;
position: fixed;
height: 85px;
width: 100%;
text-align: center;
background-color: #002345;
}
.about {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.portfol {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.cont {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.active {
display: block;
padding-left: 15px;
padding-right: 15px;
background-color: #fff;
color: #002345;
}
a:hover {
display: block;
padding-left: 15px;
padding-right: 15px;
background-color: #777;
color: #002345;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PortfolioPage</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<div class="about"> <li>ABOUT ME</li> </div>
<div class="portfol"> <li>PORTFOLIO</li> </div>
<div class="cont"> <li>CONTACT</li> </div>
</ul>
</div>
</header>
</body>
it happens because you have added padding on the :hover state but it is not present in the normale state rule...
a {
padding-left: 15px;
padding-right: 15px;
}
a:hover {
display: block;
/*padding-left: 15px;
padding-right: 15px;*/
background-color: #777;
color: #002345;
}
It is because in your hover class you are adding padding to the a tag, add them by default like the example
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
margin: 0;
position: fixed;
height: 85px;
width: 100%;
text-align: center;
background-color: #002345;
}
.about {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.portfol {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.cont {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.active {
display: block;
padding-left: 15px;
padding-right: 15px;
background-color: #fff;
color: #002345;
}
a{
padding-left: 15px;
padding-right: 15px;
}
a:hover {
display: block;
background-color: #777;
color: #002345;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PortfolioPage</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<div class="about"> <li>ABOUT ME</li> </div>
<div class="portfol"> <li>PORTFOLIO</li> </div>
<div class="cont"> <li>CONTACT</li> </div>
</ul>
</div>
</header>
</body>
just remove
padding-left: 15px;
padding-right: 15px;
from
a: hover
I just started coding CSS and i am very mad because my login form in the header is going below my contact us nav link on smaller screens then my desktop. Can anyone tell me why? HTML & CSS BELOW
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Site Description">
<meta name="keywords" content="Site Keywords">
<title>AffAttraction | Performance Based Marketing Network</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/showcase.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>AffAttraction</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Advertisers</li>
<li>Publishers</li>
<li>About Us</li>
<li>Contact Us</li>
</nav>
<div id="login">
<form action="publishers/login.php" method="post">
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit" class="header_login_btn">Login</button>
</form>
</div>
</div>
</header>
<section id="showcase">
<div class="container">
<h1><span class="highlight">Performance</span> Based Marketing</h1>
<p>AffAttraction will help you make money from your Websites, Apps, Games, and More!</p>
</div>
</section>
</body>
</html>
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: : 1.5;
margin: 0;
padding: 0;
background-color: #F4F4F4;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
.header_login_btn {
color: #FFFFFF;
background-color: #00CF03;
width: 70px;
height: 35px;
margin-top: 10px;
border: #00CF03 2px solid;
border-radius: 2px;
}
.header_login_btn:hover {
color: #FFFFFF;
background-color: #42DB4C;
width: 70px;
height: 35px;
margin-top: 10px;
border: #42DB4C 2px solid;
border-radius: 2px;
}
/* Header */
header {
color: #FFFFFF;
background-color: #418DD9;
padding-top: 15px;
min-height: 50px;
}
header a {
color: #FFFFFF;
text-decoration: none;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding-right: 20px;
padding-left: 20px;
}
header #branding {
float: left;
font-weight: bold;
}
header #branding h1 {
margin: 0;
}
header nav {
float: center;
padding-top: 10px;
}
header a:hover {
color: #42DB4C;
}
header #login {
margin-top: -15px;
float: right;
}
header #login input {
height: 25px;
width: 110px;
border: #FFFFFF;
border-radius: 8px;
padding: 5px;
float: none;
}
/* Showcase */
#showcase {
color: #FFFFFF;
min-height: 500px;
background: url('../img/cover.jpg') no-repeat;
text-align: center;
}
#showcase h1 {
margin-top: 100px;
font-size: 50px;
font-weight: bold;
}
#showcase p {
font-size: 30px;
}
#showcase .highlight {
color: #42DB4C;
}
Any help is appreciated!
(1) In your css file, you should set header #login margin-top to -35px.
header #login {
margin-top: -35px;
float: right;
}
（2）Use position:absolute to solve the problem
header {
color: #FFFFFF;
background-color: #418DD9;
padding-top: 15px;
min-height: 50px;
position: relative;
}
header #login {
position: absolute;
right: 20px;
transform: translateY(-50%);
}
(3)
header {
color: #FFFFFF;
background-color: #418DD9;
padding-top: 15px;
min-height: 50px;
position: relative;
}
header #login {
position: absolute;
top: 50%;
right: 20px;
margin-top: -22.25px;
}