Hello I am a beginner learning Html & CSS.
I was creating this website from my method and I ran into trouble.
I tried searching many solutions on stack overflow none of them seems to work,
or I don't understand how they work.
I have tried solutions from When using "height: 100vh" for the container, vertical scrollbar appears
but none of them seems to work.
So please if you mark this questions as duplicate, please comment and make me understand how to fix this error and then close it.
So when I assign 100vh to the bg-video class:
/* for laptop */
#media (min-width:1024px) {
.bg-video{
/* 100vh introduces scroll bar on both sides */
height: 100vh;
/* height 99vh fixes it but leaves a black empty line below */
/* height: 99vh; */
}
When the height is set to 100vh:
When the height is set to 99vh:
Full Html & CSS code (I know the code is long please refer to /* for laptop */ section in CSS ):
<!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">
<!-- font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- font awesome -->
<style>
*{
margin:0;
padding:0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* page */
body{
background-color: black;
}
/* page */
/* background section */
.background{
position: absolute;
}
.bg-video{
width: 100vw;
height: 320px;
object-fit: cover;
z-index: -1;
}
.overlay{
background-color: black;
width: 100vw;
height: 320px;
position:absolute;
opacity: 0.5;
}
/* background section */
/* header section */
.con-head{
position: relative;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
header{
padding: 20px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo{
width: 130px;
}
.part1 a{
display: none;
}
.login{
display: none;
}
.part2 button{
display: none;
}
.menu{
width: 20px;
}
/* header section */
/* turbo section */
.turbo{
position: relative;
margin-left: auto;
margin-right: auto;
padding: 12px 20px;
color: white;
max-width: 1200px;
}
.turbo h1{
font-size: 2rem;
color: white;
line-height: 1em;
}
.turbo span{
color: rgb(20, 212, 212);
}
.turbo p{
padding: 10px 0;
font-size: 0.9rem;
}
.turbo button{
color: rgb(21, 4, 82);
text-decoration: none;
font-size: 1rem;
font-weight: bold;
letter-spacing: 1px;
background-color: white;
padding: 14px 20px;
border-radius: 20px;
border: none;
position: relative;
top: 20px;
/* gives width of 100 viewport*/
width: 100vw;
/* this makes width relative to its parent */
max-width: 100%;
}
.turbo button:hover{
background-color: rgb(20, 212, 212);
color: rgb(21, 4, 82);
}
/* turbo section */
/* for small screens */
#media (max-width:380px) {
.logo{
width: 30vw;
}
.part1 a{
display: none;
}
.part2 :nth-child(2){
display: none;
}
.part2 button{
display: none;
}
.menu{
width: 5vw;
}
.turbo h1{
font-size: 8vw;
}
.turbo p{
font-size: 4vw;
}
.turbo button{
font-size: 4vw;
}
.bg-video{
height: 54vh;
}
.overlay{
height: 54vh;
}
}
/* for small screens */
/* for laptop */
#media (min-width:1024px) {
.bg-video{
/* 100vh introduces Scroll bar on both sides */
/* height: 100vh; */
/* height 99vh fixes it but leaves a black empty line below */
height: 99vh;
}
.overlay{
height: 130px;
background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,1) 43%, rgba(0,0,0,0.5606617647058824) 71%, rgba(0,0,0,0) 85%);
opacity: 0.6;
}
.logo{
width: 150px;
}
.menu{
display: none;
}
/* dont know why but this fixed the padding issue */
.con-head{
padding: 20px 20px;
}
header{
padding: 20px 0px;
}
.part1{
display: flex;
align-items: center;
}
.part1 a{
/* making them visible */
display: block;
color: white;
text-decoration: none;
padding: 0 20px;
font-weight:500;
letter-spacing: 1px;
}
.part1 a:hover{
text-decoration: underline;
}
.part1 :nth-child(2){
margin-left: 20px;
}
.part2{
display: flex;
align-items: center;
}
.login{
display: block;
color: white;
text-decoration: none;
font-weight: 500;
letter-spacing: 1px;
padding:0 20px;
}
.login:hover{
text-decoration: underline;
}
.part2 button{
display: block;
color: white;
text-decoration: none;
font-weight: bold;
letter-spacing: 1px;
padding:10px 20px;
background-color: rgb(20, 212, 212);
border: none;
border-radius: 999px;
}
.part2 button:hover{
color: rgb(21, 4, 82);
background-color: white;
}
.turbo{
position: relative;
top: 50px;
}
.turbo h1{
font-size: 3rem;
}
.turbo p{
font-size: 1em;
margin-top: 15px;
}
.turbo button{
width: 200px;
border-radius: 999px;
margin-top: 20px;
}
}
/* for laptop */
</style>
<title>Chris Courses</title>
</head>
<body>
<div class="page">
<!-- background video -->
<section class="background">
<div class="overlay"></div>
<video src="https://chriscourses.com/_nuxt/videos/galaxy.b6c8fb5.mp4"
autoplay
muted
loop
class="bg-video"
>
</video>
</section>
<!-- head -->
<section class="con-head">
<header>
<!-- p1 -->
<div class="part1">
<img src="logo.svg" alt="" class="logo">
<!-- laptop screen -->
Courses
Forum
Pricing
<!-- laptop screen -->
</div>
<!-- p2 -->
<div class="part2">
<a href="">
<img src="menu.svg" alt="" class="menu">
</a>
LOGIN
<button>SIGN UP</button>
</div>
</header>
</section>
<!-- turbo charge section -->
<div class="turbo">
<h1>Turbocharge your<br>
<span>development career</span>
</h1>
<p>
Chris Courses provides students and professionals <br>
a college-level web development education.
</p>
<button>Get started</button>
</div>
</div>
</body>
</html>
You simply need to add display: block; to the .bg-video and it fixes the issue
* {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* page */
body {
background-color: black;
}
/* page */
/* background section */
.background {
position: absolute;
}
.bg-video {
display: block;
width: 100vw;
height: 320px;
object-fit: cover;
z-index: -1;
}
.overlay {
background-color: black;
width: 100vw;
height: 320px;
position: absolute;
opacity: 0.5;
}
/* background section */
/* header section */
.con-head {
position: relative;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
header {
padding: 20px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
width: 130px;
}
.part1 a {
display: none;
}
.login {
display: none;
}
.part2 button {
display: none;
}
.menu {
width: 20px;
}
/* header section */
/* turbo section */
.turbo {
position: relative;
margin-left: auto;
margin-right: auto;
padding: 12px 20px;
color: white;
max-width: 1200px;
}
.turbo h1 {
font-size: 2rem;
color: white;
line-height: 1em;
}
.turbo span {
color: rgb(20, 212, 212);
}
.turbo p {
padding: 10px 0;
font-size: 0.9rem;
}
.turbo button {
color: rgb(21, 4, 82);
text-decoration: none;
font-size: 1rem;
font-weight: bold;
letter-spacing: 1px;
background-color: white;
padding: 14px 20px;
border-radius: 20px;
border: none;
position: relative;
top: 20px;
/* gives width of 100 viewport*/
width: 100vw;
/* this makes width relative to its parent */
max-width: 100%;
}
.turbo button:hover {
background-color: rgb(20, 212, 212);
color: rgb(21, 4, 82);
}
/* turbo section */
/* for small screens */
#media (max-width:380px) {
.logo {
width: 30vw;
}
.part1 a {
display: none;
}
.part2 :nth-child(2) {
display: none;
}
.part2 button {
display: none;
}
.menu {
width: 5vw;
}
.turbo h1 {
font-size: 8vw;
}
.turbo p {
font-size: 4vw;
}
.turbo button {
font-size: 4vw;
}
.bg-video {
height: 54vh;
}
.overlay {
height: 54vh;
}
}
/* for small screens */
/* for laptop */
#media (min-width:1024px) {
.bg-video {
height: 100vh;
}
.overlay {
height: 130px;
background: rgb(0, 0, 0);
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 43%, rgba(0, 0, 0, 0.5606617647058824) 71%, rgba(0, 0, 0, 0) 85%);
opacity: 0.6;
}
.logo {
width: 150px;
}
.menu {
display: none;
}
/* dont know why but this fixed the padding issue */
.con-head {
padding: 20px 20px;
}
header {
padding: 20px 0px;
}
.part1 {
display: flex;
align-items: center;
}
.part1 a {
/* making them visible */
display: block;
color: white;
text-decoration: none;
padding: 0 20px;
font-weight: 500;
letter-spacing: 1px;
}
.part1 a:hover {
text-decoration: underline;
}
.part1 :nth-child(2) {
margin-left: 20px;
}
.part2 {
display: flex;
align-items: center;
}
.login {
display: block;
color: white;
text-decoration: none;
font-weight: 500;
letter-spacing: 1px;
padding: 0 20px;
}
.login:hover {
text-decoration: underline;
}
.part2 button {
display: block;
color: white;
text-decoration: none;
font-weight: bold;
letter-spacing: 1px;
padding: 10px 20px;
background-color: rgb(20, 212, 212);
border: none;
border-radius: 999px;
}
.part2 button:hover {
color: rgb(21, 4, 82);
background-color: white;
}
.turbo {
position: relative;
top: 50px;
}
.turbo h1 {
font-size: 3rem;
}
.turbo p {
font-size: 1em;
margin-top: 15px;
}
.turbo button {
width: 200px;
border-radius: 999px;
margin-top: 20px;
}
}
/* for laptop */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="page">
<!-- background video -->
<section class="background">
<div class="overlay"></div>
<video src="https://chriscourses.com/_nuxt/videos/galaxy.b6c8fb5.mp4" autoplay muted loop class="bg-video">
</video>
</section>
<!-- head -->
<section class="con-head">
<header>
<!-- p1 -->
<div class="part1">
<img src="logo.svg" alt="" class="logo">
<!-- laptop screen -->
Courses
Forum
Pricing
<!-- laptop screen -->
</div>
<!-- p2 -->
<div class="part2">
<a href="">
<img src="menu.svg" alt="" class="menu">
</a>
LOGIN
<button>SIGN UP</button>
</div>
</header>
</section>
<!-- turbo charge section -->
<div class="turbo">
<h1>Turbocharge your<br>
<span>development career</span>
</h1>
<p>
Chris Courses provides students and professionals <br> a college-level web development education.
</p>
<button>Get started</button>
</div>
</div>
Related
I am trying to have my iframe video center to page and also resize. I have tried setting the height to a viewpoint height and using 100% for the width. I have also tried to take in the padding to half of the page. When I give the div a height the video resizes to the div - even when the size is smaller. Right now setting the margin and adding a max width works but I am trying to resize the video with no resolve.
HTML
<!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">
<link href="style.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/a16d2517bd.js" crossorigin="anonymous"></script>
<title>Keith McDonald Plumbing | Commercial</title>
</head>
<body>
<nav>
<div class="logo_header">
<a href="./home.html"><img src="https://cdn-icons-png.flaticon.com/512/2301/2301541.png"
alt="Site Name" /></a>
<h1>Keith McDonald Plumbing</h1>
</div>
<ul class="navigation_links">
</li>
<!--Align skunk with menu items. Make sure it doesn't glow.-->
<li>ABOUT</li>
<li>COMMERCIAL</li>
<li>EMPLOYMENT</li>
<li>SERVICES</li>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="./app.js"></script>
<section id="hero">
<div class="container">
<div class="info">
<h2>Commercial</h2>
</div>
<div class="info">
<h3>We gotcha' covered!</h3>
</div>
<div class="info">
Request Service
</div>
</div>
</section>
<main>
<div class="vid_com">
<iframe src="https://www.youtube.com/embed/rVVsJa6LOeM" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</main>
<footer>
<section class="footer_social">
<div class="social"><i class="fa-brands fa-twitter-square"></i></div>
<div class="social"><i class="fa-brands fa-facebook-square"></i>
</div>
<div class="social"><a href="https://www.instagram.com/?hl=en"><i
class="fa-brands fa-instagram-square"></i></a></div>
</section>
<ul class="navigation_links_footer">
</li>
<!--Align skunk with menu items. Make sure it doesn't glow.-->
<li>ABOUT</li>
<li>COMMERCIAL</li>
<li>EMPLOYMENT</li>
<li>SERVICES</li>
</li>
</ul>
<h4>Contact Us</h4>
<p>keithmcdonald#plumbing.com</p>
</footer>
<div>
</div>
</body>
</html>
CSS
* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
html {
scroll-behavior: smooth;
margin: 0 auto;
}
/*
grey:#666666
dark blue: #204060
blue: #336699
red: #F20505
white: #FFFFFF
*/
/* NAV BAR */
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 15vh;
background-color: white;
width: 100%;
}
.logo_header {
color: #204060;
text-transform: uppercase;
letter-spacing: 5px;
display: inline-flex;
padding-right: 10%;
width: 40%;
}
.logo_header a{
padding-right: 3%;
}
.logo_header img{
width: 2em;
padding-right: 3%;
}
.navigation_links {
display: flex;
text-decoration: none;
width: 30%;
background-color: white;
}
.navigation_links a {
color: #204060;
text-decoration: none;
}
.navigation_links a:hover {
font-weight: bold;
text-decoration: underline;
}
.navigation_links li {
list-style: none;
}
.burger {
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: #204060;
margin: 5px;
}
#media screen and (max-width:1736px){
.logo_header a{
padding-right: 3%;
padding-left: 5%;
}
}
#media screen and (max-width:1280px){
.navigation_links {
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.navigation_links {
position: absolute;
right: 0;
height: 26vh;
top: 15vh;
background-color: #204060;
color: #204060;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translatex(100%);
transition: transform 0.5s ease-in;
}
.navigation_links a {
color: white;
text-decoration: none;
}
.navigation_links li {
padding: 2vh;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav_active{
transform: translatex(0%);
}
/* HERO BOX */
#hero {
height: 65vh;
background: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), #336699), url(https://scontent-atl3-2.xx.fbcdn.net/v/t31.18172-8/28516625_1598055023650084_5608745362596556363_o.jpg?_nc_cat=101&ccb=1-7&_nc_sid=e3f864&_nc_ohc=ydWG8T9iKucAX8wEQ-V&_nc_ht=scontent-atl3-2.xx&oh=00_AT9aRGA5yl35nf6769WG8cFz8NlXwhqsaM9HxahErVehJA&oe=62EE5264) no-repeat center / cover;
background-color: #204060;
color: #F20505;
}
#hero img {
height: 80em;
}
#hero h2{
font-size: 50px;
}
#hero h3 {
color: white;
font-size: 25px;
}
.container {
width: 90%;
height: 100%;
max-height: 50px;
padding:8vw;
}
.info {
margin-top: 2vh;
}
.info a {
background-color: #F20505;
text-decoration: none;
color: white;
padding: 5px;
border-radius: 10px;
border: 1px solid #F20505;
}
.info a:hover {
font-weight: bold;
}
#media screen and (max-width:600px){
.logo_header {
display: none;
}
#hero {
height: 675px;
}
.about-column {
display: inline;
}
}
/* HOME INFO SECTION */
main {
height: min-content;
}
.service {
background-color: #336699;
height: min-content;
padding: 5vh 0vh 5vh 0vh;
color: white;
}
.row {
display: flex;
width: 70%;
}
.service-column {
flex: 30%;
text-align: right;
padding: 1em;
}
.about-column {
flex: 70%;
text-align: left;
margin: 3em;
}
main h1 {
margin-top: 2vh;
text-align: center;
height: 10%;
width: 100%;
padding: 1vw;
}
/* Location Section */
.location {
background-color: #336699;
height: min-content;
padding: 1vh 0vh 1vh 0vh;
color: #F20505;
}
.location h1 {
padding: 0 auto;
}
/* Member Logo Section */
.member {
text-align: center;
background-color: #c9dbed;
height: min-content;
padding: 5vh;
}
.member h4, h5 {
color: #F20505;
}
.member_logo img{
width: 300px;
padding: 1vw;
}
.top_button {
color:#F20505;
text-decoration: none;
}
.top_button:hover {
text-decoration: underline;
}
/* Footer */
footer{
background-color: #336699;
height: min-content;
padding: 2vh 0vh;
color: #F20505;
padding: 2vh;
color:#c9dbed;
}
footer .social {
text-align: center;
padding-bottom: 25px;
color:#c9dbed;
box-sizing: border-box;
margin: 0;
padding: 0;
display:inline-block;
}
footer .social i {
text-align: center;
padding-bottom: 25px;
color:#c9dbed;
}
footer .social a {
font-size: 24px;
text-align: center;
text-decoration: none;
list-style: none;
}
footer ul {
text-decoration: none;
list-style: none;
}
footer ul a {
text-decoration: none;
font-weight: 500;
color:#c9dbed;
}
footer ul a:hover {
text-decoration: none;
font-weight: 700;
}
footer h4 {
color:#c9dbed;
margin-top: 2em;
}
/* COMMERCIAL */
.vid_com {
margin: auto;
max-width: 300px;
}
iframe {
width: 100%;
height: 600px;
}
JS
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation_links');
burger.addEventListener('click',() =>{
nav.classList.toggle('nav_active');
});
}
navSlide();
While developing my website I have came across a problem with my footer and form. My footer seems to be appearing through the form on devices but not on the computer and I'm sure this could be issues with widths of devices? So I kept trying to fix it and still haven't been able to fix it. I'm still learning as I go along and I would be grateful if someone could help me get rolling with my website again. code snippets and images below, kindest regards, Caelan.
body {
background-color: black ;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3{
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a{
text-decoration: none;
}
.gallery{
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content{
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius:10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: .4s;
background-color: whitesmoke;
}
.content:hover{
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: .6s;
}
.productcard-image{
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p{
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6{
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card{
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list{
padding: 5px;
}
.fa{
color: #ff9f43;
font-size: 26px;
transition: .4s;
}
.fa:hover{
transform: scale(1.3);
transition: .6s;
}
.productcardbutton{
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border:0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1{
background-color: #2183a2;
}
.buy-2{
background-color: #3b3e6e;
}
.buy-3{
background-color: #0b0b0b;
}
#media(max-width: 1000px){
.content{
width: 46%;
}
}
#media(max-width: 750px){
.content{
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
margin-bottom: -60vh;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type=submit]{
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type=submit]:hover{
background: rgb(19, 41, 238);
}
#media screen and (max-width:600px) {
.form1{
width: 90%;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this
christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br>
<form action="">
<input type="email" name="email" id="email" placeholder="Enter your email">
<input type="text" name="name" id="name" placeholder=" Enter your name">
<textarea name="message" id="message" cols="30" rows="10" placeholder="Enter your message here"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo" ></a>
</div>
<p class="website__rights">© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved</p>
<div class="social__icons">
</div>
</div>
</section>
</div>
</body>
</html>
I've adjusted the css to remove the height and margin on the containers:
body {
background-color: black;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: "Courier New", Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span
>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br />
<form action="">
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
/>
<input
type="text"
name="name"
id="name"
placeholder=" Enter your name"
/>
<textarea
name="message"
id="message"
cols="30"
rows="10"
placeholder="Enter your message here"
></textarea>
<input type="submit" value="Send" />
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo"
/></a>
</div>
<p class="website__rights">
© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved
</p>
<div class="social__icons"></div>
</div>
</section>
</div>
</body>
</html>
I'm using margins for my form but when I am testing the responsive layout the distance between the navigation bar increases if the screen width is a greater size. Therefore, I have also tried auto height but it still has a big gap between the navigation bar and the form.
I have also tried #media screen.
I had help yesterday with a similar problem to this, but now I'm encountering another one as its not with the footer but with the form itself.
I would kindly like to ask for help, and if you find a solution explain the changes so I can also learn from it! Kindest regards, Caelan : ).
body {
background-color: black;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: "Courier New", Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
margin-top: -200px;
height: auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
margin-top:-250px;
height: auto;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span
>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
</div>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br />
<form action="">
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
/>
<input
type="text"
name="name"
id="name"
placeholder=" Enter your name"
/>
<textarea
name="message"
id="message"
cols="30"
rows="10"
placeholder="Enter your message here"
></textarea>
<input type="submit" value="Send" />
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo"
/></a>
</div>
<p class="website__rights">
© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved
</p>
<div class="social__icons"></div>
</div>
</[![section][1]][1]>
</div>
</body>
</html>
I analyzed your code. You have just to remove the height: 100vh from your .container.
The next step is to remove the margin-top: -250px from your .form1. then it should look good.
Bonus Tip: the unit vh stands for viewport-height (browser height). so 100vh is 100% of the viewport height.
I am stuck with responsive, to be more precise, with desktop screen of 1440px(90em).Does not really matter which size, but when I try to make it responsive(desktop), my tip calculator always looks somehow weird.I am not much experienced with CSS, thus these kind of problems occur every now and then.Anybody can check this project(code) and let some hints/tips go my way? :)
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Tip calculator app</title>
</head>
<body>
<div class="main__container">
<div class="logo">
<img src="./images/logo.svg" alt="logo" class="logo">
</div>
<div class="input__container">
<label for="bill"><span>Bill</span></label>
<input type="text" class="input__count">
<img src="./images/icon-dollar.svg" alt="person icon" class="img__dollar">
</div>
<div class="tip__container">
<h2>Select Tip %</h2>
<div class="tip__numbers">
<span>5%</span>
<span>10%</span>
<span>15%</span>
<span>25%</span>
<span>50%</span>
<input placeholder="Custom">Custom</input>
</div>
</div>
<div class="result">
<span>Number of people</span>
<span class="error__info">Can't be zero</span>
<img src="./images/icon-person.svg" alt="person icon" class="img__person">
<input type="text" class="input__people">
<div class="result__numbers">
<div class="result__numbers__container">
<span class="text__white">Tip Amount</span>
<span class="text__cyan">/ person</span>
</div>
<div class="result__tip__number">
<span>$0.00</span>
</div>
<div class="result__numbers__container">
<span class="text__white">Total</span>
<span class="text__cyan">/ person</span>
</div>
<div class="result__tip__number">
<span class="result__total__number">$0.00</span>
</div>
Reset
</div>
</div>
</div>
</body>
</html>
CSS code:
#import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght#400;700&display=swap');
:root {
--bg-color: rgba(184, 181, 181, 0.788);
--strong-cyan: hsl(172, 67%, 45%);
--very-dark-cyan: hsl(183, 100%, 15%);
--dark-grayish-cyan: hsl(186, 14%, 43%);
--dark-grayish-cyan-2: hsl(184, 14%, 56%);
--light-grayish-cyan: hsl(185, 41%, 84%);
--light-grayish-cyan-2: hsl(189, 41%, 97%);
--white: hsl(0, 0%, 100%);
--inp-font-size: 2.4em;
}
/* MOBILE FIRST DESIGN */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Space Mono', monospace;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.main__container {
background: hsl(185, 41%, 84%);
min-height: 90vh;
width: 20em;
/* !!! */
display: flex;
flex-direction: column;
align-items: center;
}
// #media (min-width: 90em) {
// .main__container {
// width: 100%;
// }
// }
.logo {
display: flex;
align-items: center;
justify-content: center;
padding-top: 2em;
}
.input__container,
.tip__container {
background: var(--white);
width: 100%;
}
.input__container {
height: 10vh;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
padding: 1.5em;
margin-top: 4.5em;
position: relative;
}
.input__container span {
display: block;
color: var(--very-dark-cyan);
font-weight: 700;
}
.input__count {
border: none;
outline: none;
background: var(--light-grayish-cyan-2);
width: 100%;
font-size: 2em;
border-radius: 10px;
padding-left: 3.5em;
cursor: pointer;
transition: all 200ms ease-in-out;
color: var(--very-dark-cyan);
font-weight: 700;
}
.input__count:hover,
.input__count:focus {
border: 3px solid var(--strong-cyan);
}
.input__container img {
position: absolute;
top: 60%;
left: 15%;
height: 20%;
}
.tip__container {
height: 20vh;
}
// #media (min-width: 90em) {
// .tip__container {
// display: flex;
// }
.tip__container h2 {
color: var(--very-dark-cyan);
font-weight: 700;
font-size: 1em;
padding: 2em 0em 1em 1.5em;
}
.tip__numbers {
padding: 1.5em;
display: grid;
grid-template-columns: 50% auto;
grid-template-rows: repeat(3, 2em);
gap: 0.5em;
}
.tip__numbers span {
background: var(--very-dark-cyan);
color: var(--white);
font-weight: 700;
border-radius: 5px;
text-align: center;
padding: 0.2em 0em;
cursor: pointer;
}
.tip__numbers span:hover {
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
.tip__numbers span:last-child {
background: var(--light-grayish-cyan-2);
color: var(--very-dark-cyan);
}
.tip__numbers span:nth-child(3) {
/* --> ACTIVE TIP PERCENTAGE <--*/
background: var(--strong-cyan);
color: var(--very-dark-cyan);
}
.tip__numbers input {
background: var(--light-grayish-cyan-2);
color: var(--very-dark-cyan);
font-weight: 700;
border: none;
outline: none;
text-align: center;
cursor: pointer;
transition: all 400ms ease-in-out;
}
.tip__numbers input:hover,
.tip__numbers input:focus {
border: 3px solid var(--strong-cyan);
border-radius: 5px;
}
input::placeholder {
padding-left: 0.5em;
font-size: 1.2em;
}
.result {
height: 50vh;
padding: 1.5em;
background: var(--white);
width: 100%;
position: relative;
}
.result > span {
color: var(--very-dark-cyan);
font-weight: 700;
display: inline;
margin-bottom: 1em;
font-size: 0.8em;
}
.result .error__info {
color: orange;
margin-left: 2.5em;
}
.input__people {
border: none;
outline: none;
background: var(--light-grayish-cyan-2);
color: var(--very-dark-cyan);
position: relative;
width: 100%;
font-size: 2em;
border-radius: 10px;
padding-left: 7.5em;
cursor: pointer;
font-weight: 700;
}
.img__person {
position: absolute;
z-index: 1;
top: 12%;
left: 16%;
}
.result__numbers {
background: var(--very-dark-cyan);
margin-top: 1.5em;
padding: 1.5em 1em;
width: 19em;
display: grid;
grid-template-columns: 50% auto;
grid-template-rows: 1fr 1fr;
}
.result__numbers__container {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 7em;
margin-bottom: 1em;
}
.text__white {
color: var(--white);
}
.text__cyan {
color: var(--dark-grayish-cyan);
font-size: 0.6em;
letter-spacing: 2px;
font-weight: 700;
}
.result__tip__number {
margin-left: 4em;
color: var(--strong-cyan);
font-weight: 700;
font-size: 1.2em;
}
.btn__reset {
text-decoration: none;
text-transform: uppercase;
background: var(--strong-cyan);
color: var(--very-dark-cyan);
text-align: center;
font-weight: 700;
border-radius: 5px;
display: inline-block;
padding: 0.5em 2em;
width: 17em;
}
.btn__reset:hover {
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
If you want a quick hint use media queries to adjust to smaller screens or for bigger screens
Like:
#media screen and (max-width: 992px){
//Here you put your css for everything less then 992px
}
#media screen and (max-width: 760px){
//Here you put your css for everything less then 760px
}
//etc.
or/and use percentage instead of strict sizes where it make sense
or/and use vw and vh instead of script sizes where it makes sense ("1vw" equals a 1 percent of screen size width, "1vh" is 1 percent of screen height)
or/and consider to use image instead of css for this calulator if it's just a n picture and doesn't do anything.
you can do like that every think betwen that screen size it's going to be re-style
dont use px to set the css (em,vh,%,rem)
#media screen and (min-width: 720px) and (max-width: 992px) {
}
#media screen and (min-width: 1px) and (max-width: 720px) {
}
I'm trying to create a small website and want to place an image (logo, square, svg) in the navbar. I want the logo to fit the navbar but it simply just won't scale no matter what I try.
I've tried floating a div with the image to the left and the navbar to the right but it still won't scale. It's really frustrating.
Here's an image of the problem:
Here's my code (sorry it's messy):
#import url('https://fonts.googleapis.com/css?family=Montserrat');
.heading {
display: inline-block;
font-family: "Montserrat";
font-weight: lighter;
text-align: left;
margin-left: 20vw;
line-height: 30vw;
}
body {
width: 100%;
margin: auto;
font-family: 'Montserrat', sans-serif;
background-color: white;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin-top: 30px;
flex-flow: row wrap;
margin-top: -10vw;
}
img {
margin: 9px;
transition: filter 0.2s;
filter: brightness(100%);
display: inline-block;
min-height: 100px;
height: 50vh;
}
img:hover {
filter: brightness(80%);
}
.responsive:hover {}
header {
position: relative;
height: 50vh;
background-image: linear-gradient(rgb(50, 50, 50), rgb(30, 30, 30));
margin-top: -20px;
transform: skewY(-5deg);
transform-origin: top left;
}
.fullwidth {
width: 100%;
}
.headertitle {
margin-top: -36vh;
margin-left: 12vw;
position: absolute;
font-size: calc(13px + 2.5vw);
color: white;
font-family: 'Montserrat';
font-weight: lighter;
}
/* navbar */
nav {
background: rgb(52, 52, 52);
position: relative;
z-index: 1;
height: calc(18px + 6vh);
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.065);
overflow: auto;
width: 100vw;
}
nav ul {
margin: 0;
padding: 0;
text-align: left;
margin-left: 1.2vw;
}
nav ul li {
display: inline-block;
list-style: none;
font-size: 1.2em;
padding: 1vh;
}
.navul a {
text-decoration: none;
color: white;
line-height: 5.5vh;
height: 5.5vh;
font-size: calc(15px + 0.25vh + 0.15vw);
}
.navuul a:visited,
a:link,
a:active {
text-decoration: none;
color: white;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.navuul a:hover {
text-decoration: none;
color: grey;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.submit {
float: right;
margin-right: 1.5vw;
}
.submit a {
color: white;
border-radius: 5px;
}
.navimg img {
max-width: 100%;
max-height: 20%;
}
.navimgdiv {
height: 1.5vh;
}
/* navbar end */
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="pgallerystyles.css">
<title> Photo Gallery </title>
<link rel="shortcut icon" href="logo.ico">
</head>
<body>
<div class="fullwidth">
</div>
<nav>
<ul class="navul">
<li>
<div class="navimgdiv"><img class="navimg" src="logo.svg"></div>Lumastock</li>
<li>Photos</li>
<li>Featured</li>
<li>Contact</li>
<li>Pricing</li>
<li>Assesment Requirements</li>
<li class="submit">Submit a photo</li>
</ul>
</nav>
<header>
</header>
<h1 class="headertitle">Image Gallery</h1>
Thanks!
Simply use the logo outside of the list. I have added max-width for logo image. Optionally padding and margin you can customize based on your requirement. I hope this solution will be helpful.
.heading {
display: inline-block;
font-family: "Montserrat";
font-weight: lighter;
text-align: left;
margin-left: 20vw;
line-height: 30vw;
}
body {
width: 100%;
margin: auto;
font-family: 'Montserrat', sans-serif;
background-color: white;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin-top: 30px;
flex-flow: row wrap;
margin-top: -10vw;
}
img {
/* margin: 9px;
transition: filter 0.2s;
filter: brightness(100%);
display: inline-block;
min-height: 100px;
height: 50vh; */
max-width: 100%;
}
img:hover {
filter: brightness(80%);
}
.responsive:hover {}
header {
position: relative;
height: 50vh;
background-image: linear-gradient(rgb(50, 50, 50), rgb(30, 30, 30));
margin-top: -20px;
transform: skewY(-5deg);
transform-origin: top left;
}
.fullwidth {
width: 100%;
}
.headertitle {
margin-top: -36vh;
margin-left: 12vw;
position: absolute;
font-size: calc(13px + 2.5vw);
color: white;
font-family: 'Montserrat';
font-weight: lighter;
}
/* navbar */
nav {
background: rgb(52, 52, 52);
position: relative;
z-index: 1;
height: calc(40px + 6vh);
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.065);
overflow: auto;
width: 100vw;
display: flex;
}
nav ul {
margin: 0;
padding: 0;
text-align: left;
margin-left: 1.2vw;
}
nav ul li {
display: inline-block;
list-style: none;
font-size: 1.2em;
padding: 1vh;
}
.navul a {
text-decoration: none;
color: white;
line-height: 5.5vh;
height: 5.5vh;
font-size: calc(15px + 0.25vh + 0.15vw);
}
.navuul a:visited,
a:link,
a:active {
text-decoration: none;
color: white;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.navuul a:hover {
text-decoration: none;
color: grey;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.submit {
float: right;
margin-right: 1.5vw;
}
.submit a {
color: white;
border-radius: 5px;
}
.navimgdiv img {
max-width: 50px;
}
.navimgdiv {
padding: 5px 0;
}
<div class="fullwidth"></div>
<nav>
<a class="navimgdiv"><img src="https://cdn.worldvectorlogo.com/logos/react.svg"></a>
<ul class="navul">
<li>Lumastock</li>
<li>Photos</li>
<li>Featured</li>
<li>Contact</li>
<li>Pricing</li>
<li>Assesment Requirements</li>
<li class="submit">Submit a photo</li>
</ul>
</nav>
<header></header>
<h1 class="headertitle">Image Gallery</h1>