The website is done and looks good when the browser is in maximized state but when I minimize the page, the heading and the footer changes its format and looks really bad. I need some help to fix this issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
</head>
<style>
body {margin:0;
background-image: url("Road.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.socialmedia {
position:fixed;
right:150px;
top:35px;
transform:translate(0,-50%);
display: flex; /* add this */
align-items: center; /* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
margin-top: 319px;
}
</style>
<body>
<div class="Coming Soon" style=" color: white;">
<h1 style = "text-align: center; font-family: Verdana; font-size: x-large; font-style: italic">Some Header</h1>
<style>
a{text-decoration: none;
color: white;}
</style>
<div class="socialmedia">
<img src="Logo.png" style=" width: 130px; height: 80px; margin-right: 100px">
<a class="Facebook">
<img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class="Instagram">
<img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class="Youtube">
<img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
</div>
<p style="font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px">Some Paragraph</p>
<div class="footer" style=" color: white;">
<p style="font-family: Verdana; font-size: small; padding-left: 55%;">2017 Some Company LLC | City State Company Website All Right Reserved.</p>
</div>
</div>
</body>
</html>
Here is how I have a ton of my pages setup. This one uses Bootstrap components. I have a cutom.css page to override the Bootstrap css.
body {margin:0;
background-image: url("Road.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
p {
font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px;
}
h1 {
text-align: center; font-family: Verdana; font-size: x-large; font-style: italic;
}
a {
text-decoration: none;
color: white;
}
.Coming Soon {
color: white;
}
.Logo {
width: 130px; height: 80px; margin-right: 100px;
}
.socialmedia {
position:fixed;
right:150px;
top:35px;
transform:translate(0,-50%);
display: flex; /* add this */
align-items: center; /* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
margin-top: 319px;
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>WEBSITE TITLE HERE</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="css/custom.css" rel="stylesheet">
<script src="https://use.fontawesome.com/a0aac8df13.js"></script>
<meta name="Description" content="ADD DESCRIPTION.">
<meta name="Keywords" content="ADD KEYWORDS">
<link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
</head>
<body>
<div class="container">
<div class="Coming Soon">
<h1>Some Header</h1>
<div class="socialmedia">
<img src="Logo.png" style=" width: 130px; height: 80px; margin-right: 100px">
<a class="Facebook">
<img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class="Instagram">
<img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class="Youtube">
<img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
</div>
<p>Some Paragraph</p>
<div class="footer">
<p style="font-family: Verdana; font-size: small; padding-left: 55%;">2017 Some Company LLC | City State Company Website All Right Reserved.</p>
</div></div></div>
</body>
</html>
Related
I am making some portfolio and this question occurs in my favourite music portfolio. You can see the music name that is long will go to another line and will automatically align the text to center. However, the music name that isn't long will not align text to center. How can I do?
img{
width: 160px;
height: 90px;
}
.container{
display: grid;
grid-gap: 10px;
}
.music{
background: #123;
width: 400px;
height: 90px;
}
a{
display: flex ;
}
p{
text-decoration: none;
list-style: none;
color: white;
font-family: sans-serif;
font-size: 26px;
text-align: center;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<article class="music">
<a href="#">
<img class="thumbnail" src="https://img.youtube.com/vi/RgKAFK5djSk/maxresdefault.jpg" alt="">
<p>See you again</p>
</a>
</article>
<article class="music">
<a href="#" class="music-child">
<img class="thumbnail" src="http://i3.ytimg.com/vi/o3KXwe-7A-I/maxresdefault.jpg" alt="">
<p>Deep Chills - Run Free</p>
</a>
</article>
</div>
<script src="script.js"></script>
</body>
</html>
You don't need display: flex; in your p tag, and you may want to add width: 100%;
img {
width: 160px;
height: 90px;
}
.container {
display: grid;
grid-gap: 10px;
}
.music {
background: #123;
width: 400px;
height: 90px;
}
a {
display: flex;
}
p {
text-decoration: none;
list-style: none;
color: white;
font-family: sans-serif;
font-size: 26px;
text-align: center;
align-items: center;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<article class="music">
<a href="#">
<img class="thumbnail" src="https://img.youtube.com/vi/RgKAFK5djSk/maxresdefault.jpg" alt="">
<p>See you again</p>
</a>
</article>
<article class="music">
<a href="#" class="music-child">
<img class="thumbnail" src="http://i3.ytimg.com/vi/o3KXwe-7A-I/maxresdefault.jpg" alt="">
<p>Deep Chills - Run Free</p>
</a>
</article>
</div>
<script src="script.js"></script>
</body>
</html>
You can just add margin-left and margin-right in p tag as following:
margin-left: auto;
margin-right: auto;
So complete style of p tag is as following:
p {
text-decoration: none;
list-style: none;
color: white;
font-family: sans-serif;
font-size: 26px;
text-align: center;
display: flex;
align-items: center;
margin-left: auto;
margin-right: auto;
}
Hope to helpful!
I need help formatting the footer for my website. I am new to CSS and I cannot figure out how to get the text for the Copyright to sit underneath of the icons. I tried tweaking by altering the height of the footer and the best I can get is the text to the left or right of the icons. Any help would be appreciated.
CSS Style Sheet:
body {
margin: 0;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 50px;
height: 50px;
margin-top: 11px;
}
.navBar {
display: flex;
justify-content: center;
overflow: hidden;
background-color: white;
position: fixed;
top: 0;
width: 100%;
margin-top: 61px;
text-align: center;
}
.navBar a {
display: inline-block;
width: 10%;
color: black;
text-align: center;
padding: 7px 7px;
text-decoration: none;
font-size: 17px;
font-family: "Poppins";
}
body.services a.services,
body.ourstory a.ourstory {
border-bottom: 1.5px solid black;
}
.header {
position: fixed;
background-color: white;
width: 100%;
height: 80px;
}
.p3 {
color: black;
text-align: center;
font-family: 'Poppins';
font-size: 105%;
font-weight: 300;
line-height: 1.8em;
}
.p4 {
color: black;
text-align: center;
padding-left: 200px;
font-family: 'Poppins';
font-size: 100%;
font-weight: 300;
line-height: 1.8em;
}
HTML Document:
.content {
padding: 10.4%;
}
.main {
height: 800px;
background-color: #f9f9f9;
}
.copyright {
color: black;
text-align: center;
font-family: 'Poppins';
font-size: 70%;
font-weight: 300;
line-height: 1.8em;
display: block;
margin-bottom: 100px;
}
.navbarSocialMedia {
display: flex;
justify-content: center;
overflow: hidden;
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
.newFooter {
position: fixed;
background-color: white;
width: 100%;
height: 800px;
}
.navbarSocialMedia a {
display: inline-block;
width: 3.5%;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
font-size: 17px;
font-family: "Poppins";
}
.mediaLogo {
display: block;
margin-left: auto;
margin-right: auto;
width: 21px;
height: 21px;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en-US">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Giving Back</title>
<link href="simpleCSS.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="shortcut icon" type="image/png" href="name.png">
</head>
<body class="services">
<div class="header">
<a href="simple.html">
<img src="name.png" alt="Logo" class="logo"> </a>
<div class="navBar">
Our Story
Giving Back
</div>
</div>
<br>
<br>
<br>
<div class="main">
<div class="content">
<p class="p3"> content
</p>
</div>
</div>
<div class="newFooter">
<div class="navbarSocialMedia">
<a href="https://www.instagram.com/" target="_blank">
<img src="InstagramLogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.linkedin.com" target="_blank">
<img src="linkedin48.png " alt="linked in logo" class="mediaLogo"> </a>
<a href="//www.google.com" target="_blank">
<img src="emaillogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.facebook.com " target="_blank">
<img src="facebooklogo48.png " alt="facebook logo" class="mediaLogo"> </a>
</div>
<div class="try">
<p class=" copyright ">Copyright ©. </p>
</div>
</div>
</body>
</html>
Code change on .copyright and .navbarSocialMedia CSS. Mainly to change the position on .copyright and align the bottom of .navbarSocialMedia.
.content {
padding: 10.4%;
}
.main {
height: 800px;
background-color: #f9f9f9;
}
.copyright {
color: black;
text-align: center;
font-family: 'Poppins';
font-size: 70%;
font-weight: 300;
line-height: 1.8em;
/* display: block;*/
/* Add fixed position */
position: fixed;
bottom: 0;
left: 50%;
/* margin-bottom: 100px; */
}
.navbarSocialMedia {
display: flex;
justify-content: center;
overflow: hidden;
background-color: white;
position: fixed;
bottom: 2.5em; /* Change to 2.5em for the copyright space */
width: 100%;
text-align: center;
}
.newFooter {
position: fixed;
background-color: white;
width: 100%;
height: 800px;
}
.navbarSocialMedia a {
display: inline-block;
width: 3.5%;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
font-size: 17px;
font-family: "Poppins";
}
.mediaLogo {
display: block;
margin-left: auto;
margin-right: auto;
width: 21px;
height: 21px;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en-US">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Giving Back</title>
<link href="simpleCSS.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="shortcut icon" type="image/png" href="name.png">
</head>
<body class="services">
<div class="header">
<a href="simple.html">
<img src="name.png" alt="Logo" class="logo"> </a>
<div class="navBar">
Our Story
Giving Back
</div>
</div>
<br>
<br>
<br>
<div class="main">
<div class="content">
<p class="p3"> content
</p>
</div>
</div>
<div class="newFooter">
<div class="navbarSocialMedia">
<a href="https://www.instagram.com/" target="_blank">
<img src="InstagramLogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.linkedin.com" target="_blank">
<img src="linkedin48.png " alt="linked in logo" class="mediaLogo"> </a>
<a href="//www.google.com" target="_blank">
<img src="emaillogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.facebook.com " target="_blank">
<img src="facebooklogo48.png " alt="facebook logo" class="mediaLogo"> </a>
</div>
<div class="try">
<p class=" copyright ">Copyright ©. </p>
</div>
</div>
</body>
</html>
The reason the copyright div is not visible is because your <div class="navbarSocialMedia"> has a position fixed, so it is displayed on top of the footer (that also has a fixed position).
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
w3
I set bottom: 0; left: 0; right: 0; footer's attributes so it's displayed on the bottom of the window and with full width.
Also I would suggest to remove the margin-bottom: 100px from the <p class="copyright"> as it takes too much space from the window.
And last but not least, I noticed that for the <div class="navbarSocialMedia"> you had set text-align: center (so I'm assuming you want the icons to be centered) but as it has the property display: flex. It's better to use align-items: center instead.
Hope this helps you out.
.content {
padding: 10.4%;
}
.main {
height: 800px;
background-color: #f9f9f9;
}
.copyright {
color: black;
text-align: center;
font-family: 'Poppins';
font-size: 70%;
font-weight: 300;
line-height: 1.8em;
display: block;
}
.navbarSocialMedia {
display: flex;
justify-content: center;
overflow: hidden;
background-color: white;
width: 100%;
align-items: center;
}
.newFooter {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: white;
width: 100%;
}
.navbarSocialMedia a {
display: inline-block;
width: 3.5%;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
font-size: 17px;
font-family: "Poppins";
}
.mediaLogo {
display: block;
margin-left: auto;
margin-right: auto;
width: 21px;
height: 21px;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en-US">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Giving Back</title>
<link href="simpleCSS.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="shortcut icon" type="image/png" href="name.png">
</head>
<body class="services">
<div class="header">
<a href="simple.html">
<img src="name.png" alt="Logo" class="logo"> </a>
<div class="navBar">
Our Story
Giving Back
</div>
</div>
<br>
<br>
<br>
<div class="main">
<div class="content">
<p class="p3"> content
</p>
</div>
</div>
<div class="newFooter">
<div class="navbarSocialMedia">
<a href="https://www.instagram.com/" target="_blank">
<img src="InstagramLogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.linkedin.com" target="_blank">
<img src="linkedin48.png " alt="linked in logo" class="mediaLogo"> </a>
<a href="//www.google.com" target="_blank">
<img src="emaillogo48.png " alt="email logo" class="mediaLogo"> </a>
<a href="https://www.facebook.com " target="_blank">
<img src="facebooklogo48.png " alt="facebook logo" class="mediaLogo"> </a>
</div>
<div class="try">
<p class=" copyright ">Copyright ©. </p>
</div>
</div>
</body>
</html>
added red background to footer just to identify footer element. You can change later.
.content {
padding: 10.4%;
}
.main {
height: 800px;
background-color: #f9f9f9;
}
.copyright {
color: black;
text-align: center;
font-family: 'Poppins';
font-size: 70%;
font-weight: 300;
line-height: 1.8em;
display: block;
}
.navbarSocialMedia {
display: flex;
justify-content: center;
overflow: hidden;
background-color: red;
bottom: 0;
width: 100%;
text-align: center;
}
.newFooter {
position: fixed;
background-color: white;
width: 100%;
height: 800px;
}
.navbarSocialMedia a {
display: inline-block;
width: 3.5%;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
font-size: 17px;
font-family: "Poppins";
}
.mediaLogo {
display: block;
margin-left: auto;
margin-right: auto;
width: 21px;
height: 21px;
margin-top: 10px;
margin-bottom: 10px;
}
.try {
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
font-size: 0.7em;
text-align: center;
bottom: 0;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
<!DOCTYPE html>
<html lang="en-US">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Giving Back</title>
<link href="simpleCSS.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="shortcut icon" type="image/png" href="name.png">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body class="services">
<div class="header">
<a href="simple.html">
<img src="name.png" alt="Logo" class="logo"> </a>
<div class="navBar">
Our Story
Giving Back
</div>
</div>
<br>
<br>
<br>
<div class="main">
<div class="content">
<p class="p3"> content
</p>
</div>
</div>
<div class="footer">
<div class="navbarSocialMedia">
<a href="https://www.instagram.com/" target="_blank">
<i class="fa fa-instagram"></i></a>
<a href="https://www.linkedin.com" target="_blank">
<i class="fa fa-linkedin"></i> </a>
<a href="//www.google.com" target="_blank">
<i class="fa fa-google"></i></a>
<a href="https://www.facebook.com " target="_blank">
<i class="fa fa-facebook"></i> </a>
</div>
<p class=" copyright ">Copyright ©. </p>
</div>
</body>
</html>
I am working on a little project. Until now everything went well, but for one reason or another, when I am making my second page, it will only load a part of the CSS (everything until calendar). I tried to put it in another CSS file and link the two files to the HTML file, and that works, but I would like to have all my CSS in just one file.
Can you help me?
Here is my code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="headerWrapper">
<h1>Volg ons leven op deze website!</h1>
</div>
</div>
<div class="timeline" id="timeline">
<div class="timelineWrapper">
<h3>Tijdlijn</h3>
<div class="timelinegrid">
<img src="./assets/pictures/family_pic.jpg">
<p>Zeeland - 2018</p>
<p>Welkom Tuur in de familie - 11/01/2018</p>
<img src="./assets/pictures/tuur.jpg">
<img src="./assets/pictures/verjaardag-marie-2017.jpg">
<p>Verjaardag Marie - 2017</p>
<p>Verjaardag Eline - 2016</p>
<img src="./assets/pictures/verjaardag-eline-2016.jpg">
</div>
</div>
</div>
</body>
</html>
calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="calendar">
<div class="calendarWrapper">
<h3>Kalender</h3>
<div class="cal">
<!-- CalendarLink -->
</div>
</div>
</div>
style.css
#import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
html {
font-family: 'Oswald', sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
/* Header */
.header {
background-image: url(assets/pictures/hero_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
max-width: 100%;
}
.nav {
width: 100%;
height: 100px;
}
.navWrapper {
width: 85%;
margin: auto;
}
.navWrapper img {
height: 35px;
padding-top: 32.5px;
}
.right {
padding-top: 32.5px;
float: right;
}
#homepage, #calendar, #photoalbum, #lists, #recipes {
color: #000;
font-weight: bold;
font-size: 16px;
margin-right: 35px;
letter-spacing: 0.6px;
}
.headerWrapper {
padding-top: 235px;
}
.headerWrapper h1 {
font-size: 8vw;
font-weight: bold;
color: #4A4A4A;
text-align: center;
letter-spacing: 3.33px;
}
/* Timeline */
.timeline {
width: 100%;
}
.timelineWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.timelineWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
.timelinegrid {
margin-top: 40px;
display: grid;
grid-template-columns: 500px 500px;
grid-auto-rows: auto auto;
grid-gap: 2%;
align-items: end;
justify-content: center;
}
.timelinegrid img {
width: 100%;
}
.timelinegrid p {
font-size: 30px;
color: #4A4A4A;
}
/* Calendar */
.calendar {
width: 100%;
}
.calendarWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.calendarWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
Your css has an error. In .timelinegrid(line 98), you have align-items set to end.
If you fix this, the css should fully load.
https://www.w3schools.com/cssref/css3_pr_align-items.asp
So I have looked into code for my website that would changes the css and even the html of certain sections of my code when the screen size changes. What I am looking into as a start is when I put my website into split screen on Windows 10, or on a Mac, I want the header "Some Title" to move to the left side of the header section. I hope that this will help me with changing certain aspects of my website when the screen size changes. My code is below.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel = "stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Some Title</h1></a>
<style>
a{text-decoration: none;}
a:hover{
text-decoration:none;
}
</style>
</a>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
My CSS
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.headerLogo {
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
Media queries can help you to define different styles for different screen sizes. Also, I'd recommend a different accomodation of HTML items, e.g.:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body {
margin: 0;
}
.Header {
background-color: black;
text-align: right;
}
.socialmedia {
transform: translate(0, -50%);
align-items: center;
}
.socialmedia a{
display:inline;
}
h1 {
color:white;
font-family: Verdana;
font-style: italic;
font-size: x-large;
text-align: center; padding-top: 20px;
}
#media (max-width:700px){
.headerLogo h1 {
text-align:left;
}
}
#media (min-width:1000px){
.socialmedia {
margin-right:100px;
}
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
a{text-decoration: none;}
a:hover{
text-decoration:none;
}
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class="headerLogo" href="file:///C:/Noah's%20stuff/Home.html" ><h1>Some Title</h1></a>
<div class="socialmedia">
<a class="Facebook" href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
<a class="Instagram" href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"></a>
<a class="Youtube" href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
<button style = "background-color: white;">Pre-Order</button>
</div>
</div>
</body>
</html>
When screen size < 700px then text will align to the left, and when screen size is >= 1000 then social media box will add a margin to the right.
Well we can do this in two ways:-
1) Using media queries. please refer here
2) You can also achieve this using simple JavaScript. See Below:-
$(window).on('resize', function() {
if($(window).width() > 600) {
$('#body').addClass('limit1200');
$('#body').removeClass('limit400');
}
else {
$('#body').addClass('limit400');
$('#body').removeClass('limit1200');
}
})
.limit400 h1 { font-size:12px; }
.limit1200 h1 { font-size:50px; }
<div id="body" class="limit400">
<h1>Hello :Professor</h1>
<span>[ change the screen width to understant the effect ]</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have also created a demo on codepen. See This
Thanks for bearing with me.
Example
#media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
.seged{position: relative;}
#lab{border-right: 0px;}
}
As mentioned in the comments, you want media queries:
#media (max-width: 800px) {
h1 {
text-align: left !important;
}
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel = "stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:blue; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Some Title</h1></a>
<style>
a{text-decoration: none;}
a:hover{
text-decoration:none;
}
</style>
</a>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
My CSS
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.headerLogo {
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
When I run my website on a browser, the header (Some Header) should be centered at the top of the webpage but its centered in the middle of webpage. I need some help of fixing this but still keeping the header in a fixed position.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
</head>
<style>
body {
margin: 0;
background-image: url("Road.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header {
position: fixed;
width: 100%;
height:70px;
background-color: transparent;
text-align:right;
}
.socialmedia {
position:fixed;
right:150px;
top:35px;
transform:translate(0,-50%);
display: flex; /* add this */
align-items: center; /* add this */
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
margin-top: 319px;
}
</style>
<body>
<div class="Coming Soon" style=" color: black;">
<div class="header">
<h1 style = "text-align: center; font-family: Verdana; font-size: x-large; font-style: italic">Some Header</h1>
<style>
a{text-decoration: none;
color: white; }
</style>
<div class="socialmedia">
<img src="Logo.png" style=" width: 130px; height: 80px; margin-right: 100px">
<a class="Facebook">
<img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class="Instagram">
<img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class="Youtube">
<img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
</div>
</div>
<p style="font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px">Some Paragraph</p>
<div class="footer" style=" color: black;">
<p style="font-family: Verdana; font-size: small; padding-left: 55%;">2017 Some Company | City State Website All Right Reserved.</p>
</div>
</div>
</body>
</html>
html5 has a native tag header, you don't need to define it as a class, but that's an aside.
If you amend your position to relative (recommended), and moreover, remove the text-align:right; , your 'Some Header' will most likely appear as you want it to.
A note: you have a lot of inline style in your html (and excess html - too many a tags - you have link tags within links unnecessarily - you can remove some). I would recommend you put the inline css in with the css (preferably in a css stylesheet) rather than in the html document. If necessary, you can add a class if you wish to use the same tag later with a variation.
Hope this helps