I have made an about page for my class assignment. Everything worked fine until I used the inspect option to see if my webpage is responsive to other devices. It was not responsive, I tried to see what is wrong with the code but I could not find an error in my codes after 5 hrs. Help would be appreciated.
*{
margin: 0;
padding:0;
box-sizing: border-box;
color: white;
background-color: black;
}
.title12{
text-align: center;
font-size: 24px;
margin-top: 100px;
}
.p1{
text-align: center;
font-size: 20px;
margin-top: 200px;
}
h1{
text-align: center;
}
.h2{
margin-top: 400px;
}
.reviews{
margin-top: 400px;
margin-left: 300px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
#media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
padding: 16px;
text-align: center;
background-color: black;
}
.re1{
width: 250px;
}
.re3{
width:250px;
height: 350px;
}
.container2{
display: flex;
flex-direction: column;
justify-content: center;
align-items:justify;
text-align: center;
margin: 40px 20px 0 20px;
margin-top: 80px;
}
.container2 .heading{
width: 50%;
padding-bottom: 50px;
}
.container2 .heading h3{
font-size: 3em;
font-weight: bolder;
padding-bottom: 10px;
border-bottom: 3px solid white;
}
.container2 .heading h3 span{
font-weight: 100;
color: #fff;
}
.con2{
margin-top: auto;
margin-top: 900px;
}
.container{
max-width: 1280px;
margin: 2 auto;
display:flex;
align-items: center;
justify-content: space-between;
}
nav{
position:fixed;
top:0;
left:0;
right:0;
z-index: 99;
background-color: black;
padding: 16px 32px;
border-bottom: 3px solid blue ;
}
.menu{
display:flex;
justify-content: flex-end;
margin: 0 -16px;
flex: 1 1 0%;
}
.menu a{
color: white;
margin: 0 16px;
font-weight: 600;
text-decoration: none;
transition: 0.4s;
padding:8px 16px;
border-radius: 90px;
}
.menu a.highlight, .menu a:hover{
background-color:red;
}
a{
font-size: 25px;
text-decoration: none;
}
body {
margin: 0px;
font-weight: 400;
}
video {
width: 50%;
float: left;
margin-bottom: 35px;
}
.normal{
width: 100%;
}
.footer{
padding: 40px 0;
background-color: black;
}
.footer .social{
text-align: center;
padding-bottom: 25px;
color: white;
}
.footer .social a{
font-size: 24px;
color: white;
border: 1px solid white;
width: 40px;
height: 40px;
line-height: 38px;
display: inline-block;
text-align: center;
border-radius: 50%;
margin: 0 8px;
opacity: 0.75;
}
.footer .social a:hover{
opacity: 0.9;
}
.footer ul{
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a{
color: white;
text-decoration: none;
opacity: 0.8;
}
.footer ul li{
display: inline-block;
padding: 0 15px;
}
.footer ul li a:hover{
opacity: 1;
color: red;
}
.footer .copy{
margin-top: 15px;
text-align: center;
font-size: 13px;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="about.css">
<script src="https://kit.fontawesome.com/57160f5774.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="about.css">
<title>About Us</title>
</head>
<body>
<nav>
<div class="container">
<div class="menu">
Home
Products
PC Designs
Support
Build Your PC
</div>
</div>
</nav>
<img style="float: left; height: 750px;" src ="About us/V388-SUPRIM.png">
<div class="title12">
<h1>SUPRIMX</h1>
</div>
<div class="p1">
<p>SUPRIMX is a world leader in gaming, content creation, business & productivity and AIoT solutions. </p>
<p>Bolstered by its cutting-edge R&D capabilities and customer-driven innovation, SUPRIMX has a wide-ranging global presence spanning over 120 countries. Its comprehensive lineup of laptops, graphics cards, monitors, motherboards, desktops, peripherals, and telematics systems are globally acclaimed.</p>
</div>
<div class="reviews">
<div class="container2">
<div class="heading">
<h3>Reviews<span> </span></h3>
</div>
</div>
<div class="row">
<div class="column">
<div class="card">
<h3><img class="re1" src="About us/kayla.jpg"></h3>
<br>
<p>Kayla </p>
<br>
<p>
Amazing website to buy a lot of products!.
</p>
</div>
</div>
<div class="column">
<div class="card">
<br>
<br>
<h3><img class="re2" src="About us/Curtis.jpg"></h3>
<br>
<p>Curtis</p>
<br>
<p>5 stars!!</p>
</div>
</div>
<div class="column">
<div class="card">
<h3><img class="re3" src="About us/Tyler.jpg"></h3>
<br>
<p>Tyler</p>
<br>
<p>Incredible website!</p>
</div>
</div>
</div>
</div>
</div>
<hr>
<section class="footer">
<div class="social">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
<i class="fa fa-pinterest" aria-hidden="true"></i>
</div>
<ul class="list">
<li>
Home
</li>
<li>
About SUPRIMX
</li>
<li>
Forums
</li>
<li>
Products
</li>
<li>
Support
</li>
</ul>
<p class="copy">
SUPRIMX © 2022
</p>
</section>
</body>
</html>
:root {
--primary-color: #10b929ff;
--background-light-grey: #696969;
--background-dark-grey: #2f2f2f;
}
body {
background: var(--background-light-grey);
margin: 0;
font-family: 'Josefin Sans', sans-serif;
}
.navbar {
background: var(--background-dark-grey);
padding: 1em;
font-family: 'Josefin Sans', sans-serif;
//position: fixed;
}
footer {
background: #2f2f2f;
}
nav {
display: none;
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top:0;
background-color: var(--background-dark-grey);
height: 100%;
padding: 2em;
ul.primary-nav {
margin-top: 5em;
}
li {
a{
color: white;
text-decoration: none;
display: block;
padding: .5em;
text-align: right;
font-size: 30px;
&:hover{
font-weight: bold;
}
}
}
}
.mobile-menu-exit{
float: right;
margin: .5em;
cursor: pointer;
}
nav.menu-btn {
display: block;
}
.website-logo {
display: flex;
place-content: space-between;
}
.mobile-menu{
cursor: pointer;
width: 2em;
//max-width: 10%;
}
#media only screen and (max-width: 400px){
nav{
width: 44%;
padding-right: 30px;
}
}
#media only screen and (max-width: 768px){
.mobile-menu{
cursor: pointer;
width: 2em;
max-width: 10%;
}
.website-logo {
display: flex;
place-content: space-between;
img{
width: 200px;
}
}
.mobile-menu-exit{
float: right;
margin: .5em;
cursor: pointer;
max-width: 10%;
}
}
a {
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section {
padding: 10em 0em 5em 0em;
}
.hero {
text-align: center;
//padding-bottom: 160px;
}
.hero-image{
background-image: url("https://am3pap006files.storage.live.com/y4pNuJohtpUdzBTZoc4fAQHlLNdeLvEQERim4Rs1KspeWQaKszREazNg4Ljnl7YTmkR6Sgsa4MUN4kB4aAf-vbbEuFnP9EPp2tAExe-dH_9o45qLndBetYu64mzC8r1Ynb8pOgWBAoqfzUL6lgg-Oue0OCqK6PPNliLbVrv6A3Yhuqalg__GtCNUkfzHJbwEuEtMWtpMjsvc_zHKMDeI1jNt5lG7eLxLiR5TluSAml-UuQ/IMG_0560.jpg?psid=1&width=720&height=486");
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
background-size: cover;
text-align: center;
padding-bottom: 160px;
}
.centre-col {
color: white;
h1 {
text-transform: uppercase;
font-weight: 600;
font-size: 3em;
resize: horizontal;
margin-bottom: 10px;
}
h3 {
font-weight: 200;
font-size: 1.2em;
margin-bottom: 20px;
}
.primary-cta {
background: var(--primary-color);
padding: .6em 1.3em;
text-decoration: none;
border-radius: 5em;
display: inline-block;
font-size: 1.5em;
}
}
.instagram-feed {
padding-top: 00px;
padding-bottom: 10px;
z-index: 0;
}
.eapps-link img {
display:none !important;
}
.club-vision-values {
background: var(--background-light-grey);
z-index: 1;
top: 40%;
padding-top: 0px;
text-align: center;
color: white;
margin-left: 2em;
margin-right: 2em;
margin-bottom: 10px;
padding-bottom: 20px;
margin-top: 10px;
position: relative;
}
.the-coaches{
padding: 20px;
ul{
max-width: 500px;
//padding-top: 10px;
display: gird;
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
}
}
.coach-list {
column-count: 2;
max-width: 500px;
margin: auto;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
max-width: 800px;
margin: auto;
text-align: center;
background: var(--primary-color);
color: white;
margin-bottom: 40px;
h1 {
margin: 4px;
margin-top: 10px;
}
p {
font-size: 18px;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 8px;
//padding-top: 3px;
}
}
#media only screen and (min-width: 768px){
.coach-list {
column-count: 2;
max-width: 800px;
margin: auto;
}
}
#media only screen and (min-width: 1080px){
.coach-list {
display: inline;
max-width: 2600px;
display: flex;
justify-content: center;
}
.the-coaches{
padding: 20px;
padding-bottom: 40px;
margin: auto;
ul {
max-width: 2200px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 40px;
padding-right: 40px;
}
}
.card {
margin: 10px;
}
}
.footer{
margin:0;
padding: 0;
box-sizing: border-box;
}
.footer-container{
max-width: 1670px;
margin:auto;
}
.footer-col {
color: white;
width: 20%;
padding: 0 35px;
}
.footer-col h4{
font-size: 18px;
margin-bottom: 20px;
position: relative;
}
.about-us {
line-height: 25px;
}
.footer-col h4::before{
content: '';
position: absolute;
left:0;
bottom: -10px;
background-color: var(--primary-color);
height: 2px;
box-sizing: border-box;
width: 50px;
}
.row
{
display: flex;
flex-wrap: wrap;
}
ul{
list-style: none;
}
.footer{
padding: 60px;
}
.footer-col .social-links a{
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255,255,255,0.2);
margin:0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
color: #24262b;
background-color: #ffffff;
}
/*responsive*/
#media(max-width: 767px){
.footer-col{
width: 50%;
margin-bottom: 30px;
}
}
#media(max-width: 574px){
.footer-col{
width: 100%;
}
}
<!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>New Era Boxing</title>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="navbar">
<div class="website-logo">
<img id="logo" class="logo" src="Images/logo.svg" alt="The club logo">
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Open Navigation">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Exit Navigation">
<ul class="primary-nav">
<li>Classes</li>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<section class="hero-image">
<div class="container">
<!-- <img src="images/raul.JPG" alt="Raul"> -->
<div class="centre-col">
<h1>First-class boxing training<br>
for youths and adults alike</h1>
<h3>We provide a supportive and inclusive training environment</h3>
<div class="hero-cta">
View our timetable
</div>
</div>
</div>
</div>
</section>
<section class="instagram-feed">
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-a2b6cbed-0090-4fd3-9a99-b6ce405f0cbf"></div>
</section>
<section class="club-vision-values">
<div>
<h2>Our Club</h2>
<p>New-Era Boxing Club was formed in 2011 by Mark Bebbington and focuses on teaching core values as well as providing first class training for youths and adults alike</p>
</div>
<div>
<h2>Our Vision</h2>
<p>Our vision is to create opportunities for members through boxing, education and personal development in doing so we will provide a supportive and inclusive training environment.</p>
</div>
<div>
<h2>Our Values</h2>
<p>New Era Boxing emphasises the core value of Equality, Integrity, Compassion, Resilience and Humility at the heart of the clubs activities.</p>
</div>
</section>
<section class="the-coaches">
<div class="coach-list">
<ul class="left">
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-container">
<div class="row">
<div class="footer-col">
<h4>Phone Us</h4>
<ul>
<li>07830 085132</li>
</ul>
</div>
<div class="footer-col">
<h4>Email Us</h4>
<ul>
<li class="email">neweraboxing#hotmail.co.uk</li>
</ul>
</div>
<div class="footer-col">
<h4>About Us</h4>
<ul>
<li class="about-us"><a href="#">
FAQs
</a></li>
<li class="about-us"><a href="#">
Club Partners
</a></li>
<li class="about-us"><a href="#">
Timetable
</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Follow Us</h4>
<div class="social-links">
<i class="fab fa-facebook-f"></i></i>
<i class="fab fa-instagram"></i></i>
<i class="fab fa-twitter"></i></i>
<i class="fab fa-whatsapp"></i></i>
</div>
</div>
</div>
</div>
</footer>
<script>
const mobileBtn = document.getElementById('mobile-cta')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () => {
nav.classList.add('menu-btn');
})
mobileBtnExit.addEventListener('click', () => {
nav.classList.remove('menu-btn');
})
</script>
</body>
</html>
I am viewing my website in the Developer tools but whenever I try to view it in a mobile resolution below 400px wide it seems to add this unwanted padding to the right side. Sometimes this disappears, but other times it just stays there. Is this a common issue and are there any suggestions on how to fix this please?
enter image description here
I created a footer that I would like to reproduce on my site, after many tests here is the best result obtained:
The image of the footer I would like to make : https://i.imgur.com/QpmoreU.png
How can I match the image on my site please? I have tried so many things that I don't even understand what I'm doing so if you have any explanations and help I'd be delighted...
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.topbar {
height: 80px;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%;
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
}
.topbar nav {
display: flex;
width: 100%;
}
.middle {
margin: 0 auto;
}
.topbar nav a {
color: #9F9F9F;
text-decoration: none;
font-weight: 500;
padding: 0 20px;
display: inline-block;
text-align: center;
font-size: 21px;
}
.topbar nav a:hover, .topbar nav a.active {
color: #94C8D0;
}
.header-logo {
padding: 0px 20px;
cursor: pointer;
width: 25vh;
}
.login {
display: flex;
justify-content: end;
flex-direction: row-reverse;
}
.login_btn {
margin: auto 25px auto;
background-color: #EEEEEE;
color: #3b3b3b;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.header_title {
text-align: center;
color: #ffffff;
font-family: 'Inter', sans-serif;
font-weight: 1000;
font-size: 72px;
word-spacing: 0px;
margin: 0px;
padding: 0px;
letter-spacing: normal;
line-height: 72px;
}
.header_second_title {
text-align: center;
color: #9F9F9F;
font-family: 'Inter';
font-size: 30px;
margin: 16px 0px 0px;
padding: 0px;
line-height: 36px;
font-weight: 500;
}
.container {
display: flex;
justify-content: center;
flex-direction: row;
}
.invite_btn {
font-size: 24px;
font-family: 'Inter';
background-color: #1A9BB6;
color: #ffffff;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
.support_btn {
font-size: 24px;
font-family: 'Inter';
background-color: #EEEEEE;
color: #282828;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
h1 {
text-align: center;
color: #9F9F9F;
}
h2 {
text-align: center;
color: #9F9F9F;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr .6fr .6fr 1fr;
grid-template-areas: "logo product resources business"
"social . . design";
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
justify-content: end;
}
#footer li a {
color: rgb(22,145,176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 1em;
color: rgb(97,97,97);
}
.product {
grid-area: product;
font-size: 20px;
padding-top: .5rem;
}
.resources {
grid-area: resources;
font-size: 20px;
padding-top: .5rem;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
grid-area: social;
padding-top: 1em;
padding-left: 1em;
cursor: pointer;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
}
<!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>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<header class="topbar">
<img class="header-logo" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
<nav>
<div class="middle">
Invite
Commands
Documentation
Premium
Support
<div class="login">
Login<i class="fas fa-sign-in-alt"></i>
</div>
</div>
</nav>
</header>
<div class="circuit">
<h1 class="header_title">The Perfect <br>Discord Music Bot.</h1>
<h2 class="header_second_title">Poseidon is the only Discord bot you'll ever need!</h2>
<div class='container'>
Invite
Support
</div>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="circuit">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li>Contact</li>
</ul>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord
ID</span></div> <!-- Javascript clickable text // add js function -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>
I just add a new class as .links and fix your Products Resources and Business you can check it, and change a little bit about right bottom edge text, give footer relative and text to absoulte right:0 bottom : 0 and make text smaller. Hope helps.
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
h1 {
text-align: center;
color: #9F9F9F;
}
h2 {
text-align: center;
color: #9F9F9F;
}
#footer {
font-family: sans-serif;
display: flex;
height: 20%;
background-color: black;
color: white;
padding-top:3em;
position:relative;
justify-content:space-between;
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
justify-content: end;
}
.links{
display:flex;
flex-direction:column;
justify-content:space-between;
height:50%;
}
#footer li a {
color: rgb(22,145,176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
padding-bottom:2rem;
width:40%;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.right-side{
width:60%;
display:flex;
}
.right-side div{
margin-right:2em;
}
.right-side div b{
display:inline-block;
padding-bottom:1em;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 0.7em;
color: rgb(97,97,97);
}
.product {
grid-area: product;
font-size: 20px;
padding-top: .5rem;
}
.resources {
grid-area: resources;
font-size: 20px;
padding-top: .5rem;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
position:absolute;
bottom:0;
left:1em;
cursor: pointer;
}
.design {
grid-area: design;
position:absolute;
right:0;
bottom:0;
font-size: 1em;
text-align: right;
}
<!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>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<div class="right-side">
<div>
<b>Product</b>
<ul class="links">
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
</div>
<div>
<b>Resources</b>
<ul class="links">
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
</div>
<div>
<b>Business</b>
<ul class="links">
<li>Contact</li>
</ul>
</div>
</div>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord ID</span></div> <!-- Javascript clickable text // add js function -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>
How about trying this one? I have kept the codes relevant to the footer part only.
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr 1fr 1fr 1.3fr;
grid-template-areas: "logo product resources business" "social . . design";
align-items: flex-start;
}
#footer ul {
margin-top: .5rem;
}
#footer ul li {
list-style: none;
padding-top: 5%;
font-size: 1rem;
line-height: 1px;
margin-top: 10px;
}
.flex {
display: flex;
justify-content: end;
}
#footer ul li a {
color: rgb(22, 145, 176);
text-decoration: none;
font-size: .7rem;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: .65em;
color: rgb(97, 97, 97);
}
.product {
grid-area: product;
font-size: 20px;
}
.resources {
grid-area: resources;
font-size: 20px;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
grid-area: social;
padding-top: 1em;
padding-left: 1em;
cursor: pointer;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
align-self: end;
}
<!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>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li>Contact</li>
</ul>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord
ID</span></div>
<!-- Javascript clickable text // add js function -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>
Hope this solves your problem!
I have searched and tweek around and the last image still shows up very close to the second. This is a very simple responsive web layout that, for some mistake, it is not displaying properly. this keeps asking me for more details but I have no more details to give.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/* Global */
.container {
widows: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
.button_1 {
height: 38px;
background: #e8491d;
border: none;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
}
/* Header */
header {
background: #35424a;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 4px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 12px;
}
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('../Assets/for\ rent.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
text-align: center;
color: #3433FF;
}
#showcase h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 20px;
}
/* For Tenants */
#cozy {
padding: 15px;
background: #35424a;
}
.button_1 {
float: right;
margin-top: 15px;
}
/*Boxes*/
#boxes {
margin-top: 20px;
}
#boxes .box {
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#main {
margin-top: 20px;
}
#main .box {
float: left;
text-align: center;
width: 33%;
padding: 10px;
display: inline-block;
}
#main .box assets {
width: 100px;
}
/*Footer*/
footer {
padding: 20px;
margin-top: 20px;
color: #ffffff;
background-color: #e8491d;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<meta name="description" content="Properties for lease">
<meta name="keywords" content="lakeland, oldsmar, lutz">
<meta name="author" content="SAGS PROPERTIES LLC">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SAGS PROPERTIES</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./css/style.css" />
<script src="main.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span>SAGS Properties LLC</span></h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Lutz</li>
<li>Oldsmar</li>
<li>Lakeland</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Well Managed Properties</h1>
<p>In Lutz, Oldsmar and Lakeland</p>
</div>
</section>
<section id="cozy">
<div class="container">
<button type="submit" class="button_1">Tenants Click Here</button>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="box">
<img src="./Assets/Entrance Lutz.jpg">
<h3>Lutz</h3>
<p>Lakeview at Calusa Trace</p>
</div>
<div class="container">
<div class="box">
<img src="./Assets/Entrance Lakeland.jpg">
<h3>Lakeland</h3>
<p>Cobblestone Landing</p>
</div>
<div class="container">
<div class="box">
<img src="./Assets/Entrance Oldsmar.jpg">
<h3>Oldsmar</h3>
<p>Gardens at Forrest Lakes</p>
</div>
</div>
</section>
<footer>
<p>SAGS PROPERTIES LLC © 2018</p>
</footer>
</body>
</html>
There are no more details to give. Making a question is as frustrating as learning this!!!
So i recently got into html and css and i've been messing around with it for a few days right now.
The problem is that i can't manage to center the header with background-image: center;
When i do that, my header becomes white instead of the image.
h1 {
font-family: 'Raleway', sans-serif;
color: #09AA34;
margin-left: auto;
margin-right: auto;
}
p1 {
font-size: 200px;
}
.header {
height: 120px;
width: 900px;
padding-left: 650px;
padding-bottom: 100px;
background-image: url("header.jpg")
background-position: center;
}
.navigation {
background-color: #c6e2ff ;
background-image: url("ocean.jpg");
text-align: center;
width: 100%;
border-style: solid;
border-width: thin;
}
.navigation ul {
list-style-type: none;
margin-bottom: 0;
}
.navigation li {
color: #ffffff;
display: inline-block;
font-family: 'Raleway', bold;
padding: 25px 100px;
font-weight: uppercase;
text-align: left;
}
.NavigationWords{
background-color: #ffffff;
width: 90%;
margin-left: 195px;
float: left;
}
h2 {
text-align: center;
font-family: 'Raleway', sans-serif;
background-color: #c6e2ff;
color: #ffffff;
padding: 20px;
margin: 0;
background-image: url("ocean.jpg");
}
p {
margin-top: 0;
font-family: 'Raleway', bold;
line-height: 1.5em;
font-size: 20px;
margin-bottom: 0;
vertical-align: middle;
padding: 10px 20px;
}
.Join {
margin-top: 0;
}
.LeftPanel {
border-style: solid;
max-width: 190px;
max-height: 510px;
text-align: center;
position: absolute;
width:195px;
min-height:510px;
}
.LeftPanel ul {
list-style-type: none;
padding: 0;
}
.LeftPanel li {
padding: 20px 10px;
}
.wrap {
position:relative;
}
<!DOCTYPE html>
<html>
<head>
<title>Belgian Entertainment</title>
<link href="belgian.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
<div class="header">
</div>
<div class="navigation">
<ul>
<li> ABOUT </li>
<li> JOIN </li>
<li> PORTFOLIO </li>
<li> FUTURE </li>
</ul>
</div>
<div class="wrap">
<div class="NavigationWords">
<div class="About">
<h2>About</h2>
<p> text
<br/>
<br/>
</p>
</div>
<div class="Join">
<h2>Join</h2>
<p> text
<br/>
<br/>
</p>
</div>
<div class="Portfolio">
<h2> Portfolio </h2>
<p> text.
BE Portfolio
<br/>
<br/>
</p>
</div>
<div class="Future">
<h2> Future </h2>
<p> text</p>
</div>
</div>
</div>
<div class="LeftPanel">
<ul>
<li id="toplogin">Login</li>
<br/>
<br/>
<li id="bordersign">Sign-up</li>
<br/>
<br/>
<li id="bordersign">Portfolio</li>
<br/>
<br/>
<li id="bordersign">Contact</li>
</ul>
</div>
</body>
</html>
You lost a ";" at the end of background-image definition of css:
fiddle
h1 {
font-family: 'Raleway', sans-serif;
color: #09AA34;
margin-left: auto;
margin-right: auto;
}
p1 {
font-size: 200px;
}
.header {
height: 120px;
width: 900px;
padding-left: 650px;
padding-bottom: 100px;
background-image: url("http://en-support.files.wordpress.com/2009/10/twentythirteen-header2.jpg");
background-position: center;
}