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) {
}
Related
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>
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 trying to position "Kipplo.co.uk" so it is central like the button and it works but I'm wanting the design responsive, so when the window is resized it the heading will adjust to but instead its appearing into the navigation bar. I have also attempted to use relative but the button already uses the function.
What i'm looking for: I'm wanting the Heading and the button to be in the same place in the middle of the page that also responds to the screen size.
(See attached image below)
Kindest regards!
https://i.stack.imgur.com/MFMpA.png
https://i.stack.imgur.com/EjjuF.png
body {
background-color: rgb(10, 10, 10);
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
/* 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;}
}
/* Services Section on product page */
.services {
background: rgb(10, 10, 10);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.services h1 {
background-color: #77ff7e;
background-image: linear-gradient(
to right,
#00eeff 0%,
#0df1de 0%,
#0ad3f7 21%,
#2b86db 52%,
#23a6da 78%,
#06afda 100%
);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
margin-bottom: 5rem;
font-size: 2.5rem;
}
.services__container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.services__card {
margin: 1rem;
height: 525px;
width: 400px;
border-radius: 4px;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(17, 17, 17, 0.6) 100%
),
url('img/bus.PNG');
background-size: cover;
position: relative;
color: #fff;
}
.services__card:before {
opacity: 0.2;
}
.services__card:nth-child(2) {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(17, 17, 17, 0.9) 100%
),
url('img/bus.PNG');
}
.services__card h2 {
position: absolute;
top: 350px;
left: 30px;
}
.services__card p {
position: absolute;
top: 400px;
left: 30px;
}
.services__card button {
color: #fff;
padding: 10px 20px;
border: none;
outline: none;
border-radius: 4px;
background: #19b6bb;
position: absolute;
top: 440px;
left: 30px;
font-size: 1rem;
}
.services__card button:hover {
cursor: pointer;
}
.services__card:hover {
transform: scale(1.075);
transition: 0.2s ease-in;
cursor: pointer;
}
#media screen and (max-width: 960px) {
.services {
height: 1600px;
}
.services h1 {
font-size: 2rem;
margin-top: 12rem;
}
}
#media screen and (max-width: 480px) {
.services {
height: 1400px;
}
.services h1 {
font-size: 1.2rem;
}
.services__card {
width: 300px;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
/* "not needed*/
.textcontainer2{
font-size: 2.5vh;
color: whitesmoke;
/* buttons */
}.main__btn {
font-size: 1rem;
background-image: linear-gradient(to top, #008cff 0%, #0e0bec 100%);
padding: 14px 32px;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
position: relative;
transition: all 0.35s;
outline: none;
bottom: -400px;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
margin-bottom: 400px;
}
.main__btn a {
position: relative;
z-index: 2;
color: #fff;
text-decoration: none;
}
.main__btn:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: #4837ff;
transition: all 0.35s;
border-radius: 4px;
}
.main__btn:hover {
color: #fff;
}
.main__btn:hover:after {
width: 100%;
}
<!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">
<style>
h1{
font-size: 60px;
margin:0;
padding:0;
text-align: center;
font-family: 'Courier New', Courier, monospace;
position:absolute ;
top: 50%;
left: 50%;
bottom: -80px;
margin-top: -50;
margin-left: -100;
margin-bottom: 80px;
transform: translate(-50%);
color: blue;
}
</style>
</head>
<body>
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<center><strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</div></center>
<ul class="topnav">
<li><img src="img/logo.png"></li>
<li><a class="active" href="index.html">Home</a></li>
<li>Products</li>
<li>Contact Us</li>
<li class="right">About Us</li>
</ul>
<h1> Kipplo.co.uk </h1>
<button class="main__btn">More Information</button>
</body>
</html>
you can use flex box to do that.
1.I wrapped all the elements in a div with class as container and added below properties
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
2.wrapped button and the h1 tag in div with class btn-centering with properties
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
3.wrapped the h1 tag in a div with class text and property
.text {
width: 100%;
}
and removed all those position properties.
body {
background-color: rgb(10, 10, 10);
}
html,
body {
max-width: 100%;
overflow-x: hidden;
}
/* 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;
}
}
/* Services Section on product page */
.services {
background: rgb(10, 10, 10);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.services h1 {
background-color: #77ff7e;
background-image: linear-gradient(
to right,
#00eeff 0%,
#0df1de 0%,
#0ad3f7 21%,
#2b86db 52%,
#23a6da 78%,
#06afda 100%
);
background-size: 100%;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
margin-bottom: 5rem;
font-size: 2.5rem;
}
.services__container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.services__card {
margin: 1rem;
height: 525px;
width: 400px;
border-radius: 4px;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(17, 17, 17, 0.6) 100%
),
url('img/bus.PNG');
background-size: cover;
position: relative;
color: #fff;
}
.services__card:before {
opacity: 0.2;
}
.services__card:nth-child(2) {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(17, 17, 17, 0.9) 100%
),
url('img/bus.PNG');
}
.services__card h2 {
position: absolute;
top: 350px;
left: 30px;
}
.services__card p {
position: absolute;
top: 400px;
left: 30px;
}
.services__card button {
color: #fff;
padding: 10px 20px;
border: none;
outline: none;
border-radius: 4px;
background: #19b6bb;
position: absolute;
top: 440px;
left: 30px;
font-size: 1rem;
}
.services__card button:hover {
cursor: pointer;
}
.services__card:hover {
transform: scale(1.075);
transition: 0.2s ease-in;
cursor: pointer;
}
#media screen and (max-width: 960px) {
.services {
height: 1600px;
}
.services h1 {
font-size: 2rem;
margin-top: 12rem;
}
}
#media screen and (max-width: 480px) {
.services {
height: 1400px;
}
.services h1 {
font-size: 1.2rem;
}
.services__card {
width: 300px;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* "not needed*/
.textcontainer2 {
font-size: 2.5vh;
color: whitesmoke;
/* buttons */
}
.main__btn {
font-size: 1rem;
background-image: linear-gradient(to top, #008cff 0%, #0e0bec 100%);
padding: 14px 32px;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
transition: all 0.35s;
outline: none;
}
.main__btn a {
position: relative;
z-index: 2;
color: #fff;
text-decoration: none;
}
.main__btn:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: #4837ff;
transition: all 0.35s;
border-radius: 4px;
}
.main__btn:hover {
color: #fff;
}
.main__btn:hover:after {
width: 100%;
}
h1 {
font-size: 60px;
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.text {
width: 100%;
}
<!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="stack_overflow1.css" />
</head>
<body>
<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>
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li><a class="active" href="index.html">Home</a></li>
<li>Products</li>
<li>Contact Us</li>
<li class="right">About Us</li>
</ul>
<div class="btn-centering">
<div class="text"><h1>Kipplo.co.uk</h1></div>
<button class="main__btn">
More Information
</button>
</div>
</div>
</body>
</html>
You can use
#media only screen and (min-height: 700px;) {
h1 {
bottom:10%;
}
}
This selects the h1 in a #media query for less than 600px height, and makes the h1 10% from the bottom, read more about media queries here; https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I wish to know solutions to these kind of issues:
How can I make this grey rectangle dissapear on DESKTOP screen size?(do not know how did it end up right there)
How can I get these "Sign up..." text in the title section to be in one row(small fonts) instead of a two? ( I have tried inline-block etc, but it does not work)
#import url('https://fonts.googleapis.com/css2?family=Manrope:wght#600;800&display=swap');
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
* {
font-family: 'Manrope', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: hsl(230, 100%, 99%);
background: url('./images/bg-pattern.svg');
background-repeat: no-repeat;
background-size: 100% 53%;
}
.main-section {
min-height: 100vh;
width: 32em;
}
.title-section {
min-height: 25vh;
margin-top: 2em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
z-index: 99;
position: relative;
}
.title-section span {
color: hsl(225, 20%, 60%);
}
.title-span-1 {
padding-top: 0.65em;
}
.img-pattern {
position: absolute;
z-index: -1;
width: 170px;
}
.card-section {
background: #ffffff;
min-height: 60vh;
padding: 1em;
text-align: center;
display: flex;
flex-direction: column;
box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.25);
}
/* <----- CARD -----> */
.views-title {
margin-top: 2em;
margin-bottom: 2.5em;
color: hsl(225, 20%, 60%);
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 2px;
}
.slider-container .slider-range {
-webkit-appearance: none;
outline: none;
width: 90%;
height: 10px;
border-radius: 5px;
background: hsl(230, 100%, 99%);
height: 10px;
cursor: pointer;
}
.amount-container {
margin: 2em;
text-align: center;
}
.amount {
font-size: 40px;
font-weight: 800;
}
.amount-text {
font-weight: 600;
font-size: 20px;
display: inline-block;
vertical-align: middle;
color: hsl(225, 20%, 60%);
padding: 0.5em;
}
.billing-container {
display: inline-block;
text-align: center;
color: hsl(225, 20%, 60%);
}
.billing-month,
.billing-year {
display: inline-block;
width: 10em;
}
.billing-month {
margin-right: 1em;
}
.monthly-billing-text {
margin-right: 0.75em;
}
.yearly-billing-text {
margin-right: 0.2em;
}
.yearly-discount {
color: hsl(15, 100%, 70%);
background: hsl(14, 92%, 95%);
font-size: 13px;
font-weight: 800;
border-radius: 20px;
padding: 0.1em 0.5em;
}
.billing-year {
margin-left: 3em;
}
hr {
margin-top: 3em;
background-color: rgba(0, 0, 0, 0.65);
}
.billing-benefits {
margin-top: 2em;
}
.billing-benefits ul {
list-style: none;
color: hsl(225, 20%, 60%);
}
.billing-benefits li {
margin-top: 0.5em;
font-weight: 800;
}
li::before {
content: '✓';
color: hsl(174, 86%, 45%);
font-weight: 800;
margin-right: 1.5em;
}
.button-trial {
margin-top: 2.5em;
margin-bottom: 2em;
border: none;
outline: none;
padding: 1em 3em;
width: 200px;
background: hsl(227, 35%, 25%);
color: hsl(226, 100%, 87%);
border-radius: 30px;
font-weight: 800;
cursor: pointer;
}
/* DESKTOP */
#media only screen and (min-width: 1000px) {
.main-section {
width: 50em;
}
.card-section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px 100px 100px;
grid-template-areas: "main-title amount-container" "input input" "billing-area billing-area" "benefits-list benefits-list";
}
.title-section {
grid-area: main-title;
}
.views-title {
margin-top: 3em;
}
.slider-container {
grid-area: input;
margin: 2.5em;
}
.amount-container {
grid-area: amount-container;
display: flex;
justify-content: center;
align-items: center;
}
.billing-container {
grid-area: billing-area;
}
.yearly-discount {
position: relative;
}
.yearly-discount::after {
position: absolute;
content: "discount";
background: hsl(14, 92%, 95%);
top: 20%;
transform: translateY(-20%);
width: 65px;
left: 3.2em;
line-height: 1.6;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.billing-benefits {
grid-area: benefits-list;
display: flex;
justify-content: space-around;
align-items: center;
}
.billing-benefits ul {
text-align: left;
}
.button-trial {
grid-area: btn-trial;
}
}
<!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 | Interactive pricing component</title>
</head>
<body>
<section class="main-section">
<div class="title-section">
<h1 class="main-title">Simple, traffic-based pricing</h1>
<span class="title-span-1">Sign up for our 30-day trial.
<br>
<span class="title-span-2">No credit card required.</span>
</span>
<img src="./images/pattern-circles.svg" alt="background image pattern" class="img-pattern">
</div>
<div class="card-section">
<h2 class="views-title">100K Pageviews</h2>
<div class="slider-container">
<input type="range" min="1" max="100" value="50" class="slider-range">
</div>
<div class="amount-container">
<span class="amount">$16.00<span class="amount-text"> / month</span></span>
</div>
<div class="billing-container">
<div class="billing-month">
<span class="monthly-billing-text">Monthly Billing</span>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="billing-year">
<span class="yearly-billing-text">Yearly Billing</span>
<span class="yearly-discount">-25%</span>
</div>
</div>
<hr>
<div class="billing-benefits">
<ul>
<li>Unlimited websites</li>
<li>100% data ownership</li>
<li>Email reports</li>
</ul>
<button class="button-trial">
Start my trial
</button>
</div>
</div>
</section>
</body>
</html>
Next time Read How to ask before asking a question.
You can just wrap Text in one span
<span class="title-span-1">Sign up for our 30-day trial. No credit card required.</span>
Use Media query to get text In Mobile Responsive.
#media screen and (max-width: 768px){
.title-span-1{
font-size: 14px;
}
}