I have nav menu you can look at the snippet. (its not responsive in this case). And my problem is that i want to make searchbar (on hover with page max-width980px) to hide all elements and to be full width in nav menu. Problem is that i have very poor understanding of javascript so if is there any css only solution. I tried adding z-index but without effect.
/* Navigation menu */
.resmenu {
display: none;
cursor: pointer;
}
.resmenuitems {
display: none;
}
.navmenu {
width: 100%;
height: 55px;
border-bottom: 1px solid rgb(240,240,240);
}
.logo {
color: black;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100%;
font-size: 1.5em;
font-weight: bold;
float: left;
margin-left: 3%;
padding: 10px 0px 10px 0px;
}
.navlinksr {
float: right;
margin-right: 2%;
width: 490px;
height: 100%;
display: flex;
align-items: center;
justify-content:space-around;
}
.navlinksr a {
float: right;
text-decoration: none;
color: black;
font-size: 0.95em;
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
.navlinksline {
height: 40%;
width: 1px;
background-color: grey;
}
.logodif {
background-color: black;
color: white;
padding: 7px;
border-radius: 3px;
}
.rlynothing {
margin-left: 4%;
float: left;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.rlynothingagain {
height: 40%;
width: 1px;
background-color: grey;
}
/* SEARCH */
.swrap{
height: 100%;
float:left;
margin: auto;
display: flex;
align-items: center;
margin-left: 30px;
}
.search-container {
float:left;
display: flex;
width: 30px;
padding: 8px;
transition: width .2s;
overflow: hidden;
}
.search-container:hover{
width: 200px;
border: 2px solid black;
border-radius: 2px;
}
.search-input {
flex: 1;
display: flex;
}
.search-input input {
flex: 1;
background-clip: padding-box;
border: 0;
padding: 0;
outline: 0;
margin-left: 4px;
}
.navlinkborder {
background-color: limegreen;
padding: 10px;
border-radius: 3px;
}
.navlinkborder:hover {
background-color: green;
color: white;
transition: .5s;
}
<!DOCTYPE html>
<html lang="sk">
<head>
<!-- Site info -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- CSS -->
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/bootstrap-grid.css">
<link rel="stylesheet" href="styles/style.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
</head>
<body>
<!-- BEGIN - Header -->
<div class="navmenu">
<a href="index.php">
<div class="logo">
<p>Coding</p> <p class="logodif">Hub</p>
</div>
</a>
<div class="rlynothing">
<div class="rlynothingagain">
</div>
</div>
<div class="swrap">
<div class="search-container">
<div class="search-icon-btn">
<i class="fa fa-search fa-lg"></i>
</div>
<div class="search-input">
<input type="search" class="search-bar" placeholder="Hľadať...">
</div>
</div>
</div>
<div class="resmenu" id="flip">
<i class="fas fa-bars fa-2x"></i>
</div>
<div class="navlinksr">
Archív
Live
PODPORIŤ
Kontakt
<a class="navlinksline"></a>
Prihlásiť sa
</div>
</div>
<div id="panel" class="resmenuitems">
Archív
PODPORIŤ
Live
Kontakt
Prihlásiť sa
</div>
<!-- END - HEADER -->
Try below
set the header as fixed
.logo {
margin-left: 30px;
}
.rlynothing {
margin-left: 40px;
}
set search container full width
.search-container {
float:left;
display: flex;
width: 30px;
padding: 8px;
overflow: hidden;
position: absolute;
z-index: 1;
border: 2px solid white;
border-radius: 2px;
transition: all .2s;
}
.search-container:hover{
background: white;
width: calc(100% - 264px); /* 264px is the width of Header Image */
border-color: black;
}
You can calculate the width search bar using calc().
And to show the search bar above other elements, use position: absolute(relative) and z-index.
For z-index to work, you need to use position : absolute or position : relative
/* Navigation menu */
.resmenu {
display: none;
cursor: pointer;
}
.resmenuitems {
display: none;
}
.navmenu {
width: 100%;
height: 55px;
border-bottom: 1px solid rgb(240,240,240);
}
.logo {
color: black;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100%;
font-size: 1.5em;
font-weight: bold;
float: left;
margin-left: 30px;
padding: 10px 0px 10px 0px;
}
.navlinksr {
float: right;
margin-right: 2%;
width: 490px;
height: 100%;
display: flex;
align-items: center;
justify-content:space-around;
}
.navlinksr a {
float: right;
text-decoration: none;
color: black;
font-size: 0.95em;
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
.navlinksline {
height: 40%;
width: 1px;
background-color: grey;
}
.logodif {
background-color: black;
color: white;
padding: 7px;
border-radius: 3px;
}
.rlynothing {
margin-left: 40px;
float: left;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.rlynothingagain {
height: 40%;
width: 1px;
background-color: grey;
}
/* SEARCH */
.swrap{
height: 100%;
float:left;
margin: auto;
display: flex;
align-items: center;
margin-left: 30px;
}
.search-container {
float:left;
display: flex;
width: 30px;
padding: 8px;
overflow: hidden;
position: absolute;
z-index: 1;
border: 2px solid white;
border-radius: 2px;
transition: all .2s;
}
.search-container:hover{
background: white;
width: calc(100% - 264px); /* 264px is the width of Header Image */
border-color: black;
}
.search-input {
flex: 1;
display: flex;
}
.search-input input {
flex: 1;
background-clip: padding-box;
border: 0;
padding: 0;
outline: 0;
margin-left: 4px;
}
.navlinkborder {
background-color: limegreen;
padding: 10px;
border-radius: 3px;
}
.navlinkborder:hover {
background-color: green;
color: white;
transition: .5s;
}
<!DOCTYPE html>
<html lang="sk">
<head>
<!-- Site info -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- CSS -->
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/bootstrap-grid.css">
<link rel="stylesheet" href="styles/style.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
</head>
<body>
<!-- BEGIN - Header -->
<div class="navmenu">
<a href="index.php">
<div class="logo">
<p>Coding</p> <p class="logodif">Hub</p>
</div>
</a>
<div class="rlynothing">
<div class="rlynothingagain">
</div>
</div>
<div class="swrap">
<div class="search-container">
<div class="search-icon-btn">
<i class="fa fa-search fa-lg"></i>
</div>
<div class="search-input">
<input type="search" class="search-bar" placeholder="Hľadať...">
</div>
</div>
</div>
<div class="resmenu" id="flip">
<i class="fas fa-bars fa-2x"></i>
</div>
<div class="navlinksr">
Archív
Live
PODPORIŤ
Kontakt
<a class="navlinksline"></a>
Prihlásiť sa
</div>
</div>
<div id="panel" class="resmenuitems">
Archív
PODPORIŤ
Live
Kontakt
Prihlásiť sa
</div>
<!-- END - HEADER -->
Related
<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<title>Contact Us</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.hero {
width: 100%;
height: 100vh;
background-image: linear-gradient(black 0%, black 34%, white 34%, white 100%);
position: relative;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
nav {
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 8%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .logo {
width: 100px;
margin-left: -80px;
}
nav ul li {
list-style: none;
display: inline-block;
margin-left: 40px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 17px;
}
.content {
text-align: left;
}
.content h1{
font-size: 70px;
color: rgb(255, 255, 255);
font-weight: 600;
transition: 0.5s;
margin-bottom: 700px;
}
.content h1:hover{
-webkit-text-stroke: 2px #fff;
color: transparent;
}
.banner {
position: relative;
width: 90%;
margin: 50px auto;
}
.heading {
position: absolute;
top: 50%;
width: 50%;
margin-top: -400px;
margin-left: 650px;
text-align: center;
font-size: 3rem;
}
.food{
width: 400px;
position:absolute;
margin-top: -500px;
margin-left: 580px;
opacity: 0.4;
transition: opacity .3s ease;
background-color: rgba(0,0,0,0.6);
}
.contact-info{
display: inline;
width: 100%;
max-width: 1200px;
align-items: center;
justify-content: center;
padding: 0 20px;
margin-top: 320px;
}
.card{
background: #fff;
padding: 0 20px;
margin: 0 10px;
width: calc(33% - 20px);
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgb(0, 0, 0);
cursor: pointer;
}
.card-icon{
font-size: 28px;
background: #ff6348;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px !important;
border-radius: 50%;
transition: 0.3s linear;
}
.card:hover .card-icon{
background: none;
color: #ff6348;
transform: scale(1.6);
}
.card p{
margin-top: 20px;
font-weight: 300;
letter-spacing: 2px;
max-height: 0;
opacity: 0;
transition: 0.3s linear;
}
.card:hover p{
max-height: 40px;
opacity: 1;
}
.contact{
position: relative;
min-height: 100vh;
padding: 50px 100px;
display: inline;
justify-content: center;
align-items: center;
flex-direction: column;
}
.contactform {
width: 500px;
padding: 10px;
background: #fff;
margin-top: 280px;
}
.contatform h2 {
font-size: 30px;
color: #333;
font-weight: 500;
}
.contactform .inputBox{
position: relative;
width: 100%;
margin-top: 10px;
}
.contactform .inputBox input,
.contactform .inputBox textarea{
width: 100%;
padding: 5px 0;
font-size: 16px;
margin: 10px 0;
border: none;
border-bottom: 2px solid #333;
outline: none;
resize: none;
}
.contactform .inputBox input [type="submit"]
{
width: 100px;
background: #00bcd4;
color: #fff;
border: none;
cursor: pointer;
padding: 10px;
font-size: 18px;
}
.map iframe {
width: 300px;
height: 400px;
display: flex;
flex-direction: row;
margin-top: 100px;
}
#media (max-width: 991px)
{
.contact{
padding:50px;
}
.container {
flex-direction: column;
}
.container .contact-info2 {
margin-bottom: 40PX;
}
.container .contact-info2,
.contatform{
width: 100%;
}
}
#media screen and (max-width:800px) {
.contact-info{
flex-direction: column;
}
.card{
width: 100%;
max-width: 300px;
margin: 10px 0;
}
}
footer {
text-align: center;
background-color: rgb(29, 17, 17);
color: #fff;
padding: 12px;
position: absolute;
bottom: 0;
width: 100%;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="hero">
<nav>
<img src="logo.png" class="logo">
<ul>
<li>Home</li>
<li>Photos</li>
<li>Menu</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="content">
<div class ="row">
<div class = "banner">
<img class="food" src="food.jpeg" alt="[food]">
<h1 class ="heading">Contact Us</h1>
</div>
</div>
</div>
<div class="contact-info">
<div class="card">
<i class="card-icon far fa-envelope"></i>
<p>Mehmet.under#gmail.com</p>
</div>
<div class="card">
<i class="card-icon fas fa-phone"></i>
<p>+4799221199</p>
</div>
<div class="card">
<i class="card-icon fas fa-map-marker-alt"></i>
<p>Karl Johans gate 5, 0154 OSLO</p>
</div>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2000.2351438173973!2d10.
746176751774849!3d59.911644771148914!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46416e89e0be32c5%
3A0xa9aad198e39ddef9!2sKarl%20Johans%20gate%205%2C%200154%20Oslo!5e0!3m2!1sno!2sno!4v1667850923403!5m2!1sno!2sno"
style="border:0;"
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
<section class="contact">
<div class="contactform">
<form action="">
<h2>Send Message</h2>
<div class="inputBox">
<input type="text" name="" placeholder= "Full Name" required="required">
</div>
<div class="inputBox">
<input type="text" name="" placeholder="Email" required="required">
</div>
<div class="inputBox">
<textarea placeholder="Type Your Message" required="required"></textarea>
</div>
<div class="inputBox">
<input type="submit" name="" value="Send">
</div>
</div>
</form>
</section>
<footer>
<p>Just Turkey Grill is a 501c(3)
organization, and your contributions are tax
deductible.</p>
<p id="copyright">Copyright © 2022 by the Just Turkey Grill.
Questions?
<a href="mailto:Mehmet.under#gmail.com"
>Mail Mehmet Under.</a></p>
</footer>
<!-- footer -->
</div>
</body>
</html>
I did nothing special. The first second it worked and the other, it stopped being clickable. I need help straight away because I have to give in this task about 2 hours. The only thing I changed was the section area, but nothing more. I just changed the form and added back the map, and changed and added more css code.
Just add z-index: 1 to your navbar and should be work
With the inspector of your browser you can see that the "contact" section goes over the navbar, you have to put a higher z-index on the navbar so that it goes over it
Still learning code. I am building a contact page and wanted to include my header bar at the top of the page, but when I added the code for this my header bar appears to the left of my page all wacky. I know this is most likely a CSS error, but I can't seem to pinpoint why my header bar wouldn't display at the top of my page. Anyone willing to take a look? Here's my code.
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!-- <title> Responsive Contact Us Form | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<section class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</section>
</header>
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now" >
</div>
</form>
</div>
</div>
</div>
</body>
</html>
/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #f99a61;
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before{
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details{
margin: 14px;
text-align: center;
}
.content .left-side .details i{
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic{
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
font-size: 14px;
color: #afafb6;
}
.container .content .right-side{
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text{
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box{
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box{
min-height: 110px;
}
.right-side .input-box textarea{
padding-top: 6px;
}
.right-side .button{
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"]{
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover{
background: #bc0456;
}
#media (max-width: 950px) {
.container{
width: 90%;
padding: 30px 40px 40px 35px ;
}
.container .content .right-side{
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container{
margin: 40px 0;
height: 100%;
}
.container .content{
flex-direction: column-reverse;
}
.container .content .left-side{
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before{
display: none;
}
.container .content .right-side{
width: 100%;
margin-left: 0;
}
}
Your <header> (as opposed to <head>) has to be inside the <body> tag (which contains everything that is visible on the page)!
As a start, IMO, <body> should not be styled as flex, at least not when using <header> which brings its own defaults which were being overridden.
Moving the flex styles from body to .container will fix your immediate request, but probably introduce other styling concerns.
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2;
/* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2;
/* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color: #067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
width: 100%;
background: #f99a61;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content {
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side {
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before {
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details {
margin: 14px;
text-align: center;
}
.content .left-side .details i {
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic {
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two {
font-size: 14px;
color: #afafb6;
}
.container .content .right-side {
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text {
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box {
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea {
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box {
min-height: 110px;
}
.right-side .input-box textarea {
padding-top: 6px;
}
.right-side .button {
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"] {
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover {
background: #bc0456;
}
#media (max-width: 950px) {
.container {
width: 90%;
padding: 30px 40px 40px 35px;
}
.container .content .right-side {
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container {
margin: 40px 0;
height: 100%;
}
.container .content {
flex-direction: column-reverse;
}
.container .content .left-side {
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before {
display: none;
}
.container .content .right-side {
width: 100%;
margin-left: 0;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
</head>
<body>
<header>
<section class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</section>
</header>
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
The problem occurs from the body. You assign to flex. I removed it and create a new div which wrappend the container. If you want reduce the width in the navbar you have to wrapped to another div and center it.
/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #f99a61;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before{
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details{
margin: 14px;
text-align: center;
}
.content .left-side .details i{
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic{
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
font-size: 14px;
color: #afafb6;
}
.container .content .right-side{
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text{
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box{
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box{
min-height: 110px;
}
.right-side .input-box textarea{
padding-top: 6px;
}
.right-side .button{
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"]{
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover{
background: #bc0456;
}
#media (max-width: 950px) {
.container{
width: 90%;
padding: 30px 40px 40px 35px ;
}
.container .content .right-side{
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container{
margin: 40px 0;
height: 100%;
}
.container .content{
flex-direction: column-reverse;
}
.container .content .left-side{
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before{
display: none;
}
.container .content .right-side{
width: 100%;
margin-left: 0;
}
}
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!-- <title> Responsive Contact Us Form | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</header>
<div class="wrapper">
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now" >
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
https://sagarj2021.github.io/first-website/
This is my website but it only open fullscreen in destop of my laptop. It does not open in fullscreen in smartphones destop as well as in normal search. (Actully in smartphone right side is 50% of white blank color). I dont know how to fix this issue..
I have given my code also,
so please can you help mi ?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.hero {
height: 100vh;
width: 100%;
background-color: black;
background-size: cover;
background-position: center;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 45px;
padding-left: 8%;
padding-right: 8%;
}
.logo {
color: white;
font-size: 35px;
letter-spacing: 1px;
cursor: pointer;
}
span {
color: red;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 25px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
text-transform: capitalize;
}
nav ul li a:hover {
color: red;
transition: .4s;
}
.btn {
background-color: red;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10px 25px;
border-radius: 30px;
transition: transform .4s;
}
.btn:hover {
transform: scale(1.2);
}
.content {
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
}
h1 {
color: white;
margin: 20px 0px 20px;
font-size: 75px;
}
h3 {
color: white;
font-size: 25px;
margin-bottom: 50px;
}
h4 {
color: #fcfc;
letter-spacing: 2px;
font-size: 20px;
}
.newslatter form {
width: 380px;
max-width: 100%;
position: relative;
}
.newslatter form input:first-child {
display: inline-block;
width: 100%;
padding: 14px 130px 14px 15px;
border: 2px solid #f9004d;
outline: none;
border-radius: 30px;
}
.newslatter form input:last-child {
position: absolute;
display: inline-block;
outline: none;
border: none;
padding: 10px 30px;
border-radius: 30px;
background-color: #f9004d;
color: white;
box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585;
top: 6px;
right: 6px;
}
.about {
width: 100%;
padding: 100px 0px;
background-color: #191919;
}
.about img {
height: auto;
width: 430px;
}
.about-text {
width: 550px;
}
.main {
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.about-text h2 {
color: white;
font-size: 75px;
text-transform: capitalize;
margin-bottom: 20px;
}
.about-text h5 {
color: white;
letter-spacing: 2px;
font-size: 22px;
margin-bottom: 25px;
text-transform: capitalize;
}
.about-text p {
color: #fcfc;
letter-spacing: 1px;
line-height: 28px;
font-size: 18px;
margin-bottom: 45px;
}
button {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
button:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.service {
background: #101010;
width: 100%;
padding: 100px 0px;
}
.title h2 {
color: white;
font-size: 75px;
width: 1130px;
margin: 30px auto;
text-align: center;
}
.box {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.card {
height: 365px;
width: 335px;
padding: 20px 35px;
background: #191919;
border-radius: 20px;
margin: 15px;
position: relative;
overflow: hidden;
text-align: center;
}
.card i {
font-size: 50px;
display: block;
text-align: center;
margin: 25px 0px;
color: #f9004d;
}
h5 {
color: white;
font-size: 23px;
margin-bottom: 15px;
}
.pra p {
color: #fcfc;
font-size: 16px;
line-height: 27px;
margin-bottom: 25px;
}
.card .button {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 9px 22px;
border-radius: 30px;
transition: .4s;
}
.card .button:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.contact-me {
width: 100%;
height: 290px;
background: #191919;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.contact-me p {
color: white;
font-size: 30px;
font-weight: bold;
margin-bottom: 25px;
}
.contact-me .button-two {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
.contact-me .button-two:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
footer {
position: relative;
width: 100%;
height: 400px;
background: #101010;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
footer p:nth-child(1) {
font-size: 30px;
color: white;
margin-bottom: 20px;
font-weight: bold;
}
footer p:nth-child(2) {
color: white;
font-size: 17px;
width: 500px;
text-align: center;
line-height: 26px;
}
.social {
display: flex;
}
.social a {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: #f9004d;
border-radius: 50%;
margin: 22px 10px;
color: white;
text-decoration: none;
font-size: 20px;
}
.social a:hover {
transform: scale(1.3);
transition: .3s;
}
.end {
position: absolute;
color: #f9004d;
bottom: 35px;
font-size: 14px;
}
<!--Sagar personal website-->
<!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 rel="stylesheet" href="personalprofile.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/34d51c031e.js" crossorigin="anonymous"></script>
<title>Personal website</title>
</head>
<body>
<div class="hero">
<nav>
<h2 class="logo">Portfo<span>lio</span></h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Blog
</nav>
<div class="content">
<h4>hello, my name is</h4>
<h1>Sagar<span>Jadhav</span></h1>
<h3>I'm a Web Developer.</h3>
<div class="newslatter">
<form action="">
<input type="email" name="email" id="mail" placeholder="Enter Your Email">
<input type="submit" name="submit" value="Let start">
</form>
</div>
</div>
</div>
<!---About section start-->
<section class="about">
<div class="main">
<img src="#" alt="">
<div class="about-text">
<h2>About Me</h2>
<h5>Developer & Designer</h5>
<p>
I am a front-end web developer. I can provide clean code and pixel perfect design. I also make the website more & more interactive with web animations. I can provide clean code and pixel perfect design. I also make the website more & more interactive
with web animations. A responsive design makes your website accessible to all users, regardless of their devices.
</p>
<button type="button">Let's Talk</button>
</div>
</div>
</section>
<!--Service section start-->
<div class="service">
<div class="title">
<h2>Our Services</h2>
</div>
<div class="box">
<div class="card">
<i class="fas fa-bars"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fa-regular fa-user"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fa-regular fa-bell"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
</div>
</div>
<!--Contact Me-->
<div class="contact-me">
<p>For any help.</p>
<a class="button-two" href="#">Contact Me</a>
</div>
<!--Footer start-->
<footer>
<p>Sagar Jadhav</p>
<p>For coding and syber security related update follow my blog chennal - please click on the link below to follow me:
</p>
<div class="social">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-linkedin"></i>
</div>
<p class="end">CopyRight By Sagar Jadhav</p>
</footer>
</body>
</html>
Replace this code in your code
.title h2 {
color: white;
font-size: 75px;
width: 130px;
margin: 30px auto;
text-align: center;
}
Can anyone plz help me i am stuck in this from a while. my product display cards are not in flex position when i set the screen the size width between 320 to 480 pixel.
Hope any css expert can help me. and i also did some diff size of screen by #media screen.
But plz view this coding more than width of 480 px to understand what i want to make :)
i pasted my both html and css code below.
all the pics are in github but css is 1 or 2 line old in github respo.
https://github.com/daksh100sharma/new-daddy-s-games-
if you are unable to see codes or images just press code under the licesence which i deleted.
<!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="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
<title>Home</title>
<link rel="icon" href="favicon.jpg">
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script>
// $(window).resize(function(){location.reload();});
//refresh page on browser resize
$(window).bind('resize', function(e)
{
console.log('window resized..');
this.location.reload(false); /* false to get page from cache */
/* true to fetch page from server */
});
</script>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">NEW DADDY'S GAMES</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Accessories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="graphics-card.html">Graphics card</a>
</li>
</ul>
<span class="navbar-text">
<!-- Navbar text with an inline element -->
</span>
</div>
</div>
</nav>
<div class="show-case">
<div class="show-case-1st-line">
<div class="graphics-card" >
<h1>Graphics card</h1>
<img class="img001" src="001.jpg" type="image">
<button class="graphics-card-btn">View List</button>
</div>
<div class="gaming-mouse" >
<h1>GAMING MOUSE</h1>
<img class="img002" src="002.jpg" type="image">
<button class="graphics-card-btn">View List</button>
</div>
<div class="gaming-headphone" >
<h1>GAMING HEADPHONES</h1>
<img class="img003" src="003.jpg" type="image">
<button class="graphics-card-btn">View List</button>
</div>
</div>
<div class="show-case-2nd-line">
<div class="gaming-chair">
<h1>COMFY CHAIR</h1>
<img class="img005" src="005.jpg" image>
<button class="graphics-card-btn">View List</button>
</div>
<div class="fps-monitor">
<h1>FPS MONITOR</h1>
<img class="img006" src="006.jpg" image>
<button class="graphics-card-btn">View List</button>
</div>
<div class="ram" >
<h1>RAM</h1>
<img class="img004" src="004.jpg" type="image">
<button class="graphics-card-btn">View List</button>
</div>
</div>
</div>
<br>
<div class="game-display">
<img class="img007" src="resorce/home-minecraft.jpg" type="image">
<button class="img007-btn">Buy now</button>
</div>
<br>
<hr>
<div class="about-us">
<h1>About Us</h1>
<p>We are a new computer accessories store.<br>
We would love to have great customers like you</p>
</div>
</body>
</html>
This is my css but plz dont forgot that i have also written #media screen for device width of 320 to max device width to 480px
*{
padding: 0;
margin: 0;
}
body{
background-color: #732673;
/* background-image: linear-gradient(to right,#ffffe6 ,#ffe6ff); */
}
hr{
color: white;
margin: auto;
}
.show-case{
text-align: center;
margin: auto ;
display: block;
}
.show-case-1st-line{
display: flex;
text-align: center;
margin-top: 10px;
margin: auto;
}
.graphics-card{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin-top: 10px;
}
.graphics-card h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img001{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
.graphics-card-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.graphics-card-btn a{
text-decoration: none;
}
/* ///////// SHOW-CASE [GAMING MOUSE] ///////// */
.gaming-mouse{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin: auto;
margin: 0;
margin-top: 10px;
}
.gaming-mouse h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img002{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
/* .gaming-mouse-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
} */
.gaming-mouse-btn a{
text-decoration: none;
}
.gaming-headphone{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin-top: 10px;
}
.gaming-headphone h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img003{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
/* .gaming-headphone-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
} */
/* gaming-headphone-btn a{
text-decoration: none;
} */
.ram{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin-top: 10px;
}
.ram h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img004{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
/* .ram-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.ram-btn a{
text-decoration: none;
} */
.show-case-2nd-line{
display: flex;
text-align: center;
margin-top: 10px;
margin: auto;
}
.gaming-chair{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin-top: 10px;
}
.gaming-chair h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img005{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
.gaming-chair-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.gaming-chair-btn a{
text-decoration: none;
}
.fps-monitor{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin-top: 10px;
}
.fps-monitor h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img006{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
/* .fps-monitor-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.fps-monitor-btn a{
text-decoration: none;
} */
.game-display img{
max-width: 90%;
display: flex;
margin: auto;
}
.img007{
border-radius: 13px;
}
.img007-btn{
margin: auto;
display: block;
margin-top: 10px;
background-color: green;
}
.img007-btn a{
color: white;
text-decoration: none;
padding: 7px;
}
.about-us{
position:relative;
margin:auto;
border-radius: 13px;
max-width: 80%;
height: auto;
text-align: center;
font-size: 3px;
color:aqua;
position:static;
}
.about-us h1{
font-size: 28px;
text-decoration: underline;
text-decoration-color: black;
}
.about-us p{
color:#ff80b3;
font-size: 17px;
}
/* Smartphones (portrait and landscape) 320 - 480 ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
.show-case{
display: block;
padding:0;
}
/* .show-case-1st-line{
} */
.show-case-2nd-line{
display: flex;
margin: 0%;
}
.graphics-card{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.gaming-mouse{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.gaming-headphone{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.ram{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.ram h1{
padding: 12px;
position: relative;
}
.gaming-chair{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.fps-monitor{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.fps-monitor h1{
padding: 1px;
position: relative;
}
.show-case-2nd-line{
display:flex;
display: block;
margin-bottom: 10px;
padding:0;
}
}
/* Small phone 245 283 */
#media only screen and (min-device-width : 245px) and (max-device-width : 229px){
.show-case{
max-width: 70%;
display:flex;
margin: 10px;
}
.show-case-2nd-line{
max-width: 70%;
display:flex;
margin: 10px;
}
.graphics-card{
margin-bottom: 10px;
}
.gaming-mouse{
margin-bottom: 10px;
}
.gaming-headphone{
margin-bottom: 10px;
}
.ram{
margin-bottom: 10px;
}
.gaming-chair{
margin-bottom: 10px;
}
.fps-monitor{
margin-bottom: 10px;
}
}
You are using display:flex and display:block in the same place. For this, the problem is happening. Please remove display: block from --->>".show-case-2nd-line" this class. here is a screenshot, you can check it.
Plese check the screenshot
Just an additional point of view: why not using directly the power of flex in a smarter way?
With the solution I left below you would have two great advantages:
you would be able to add/remove the categories without the need to create classes as show-case-1st-line every 3 additional items. Of course this would make your code more maintanable on the long run
with your current solution [even with the correction currently marked as answer] when the width of your screen drops approx below 380px the elements of each line aren't aligned anymore and in your particular case the rows have different widths, i.e. this is what happens for a width of 300px
A few hypotheses behind my code:
I assumed you need to show at most 3 categories on the same line [from your original solution]
I assumed that when the width decreases under 320px it is better to have one item per line [in order to improve the UX]
I assumed that in case of large screen you don't want to stretch the maximum number of elements per line [3 because of what said in my first hyp] in order to keep quality pictures, so if the screen it's larger than 750px the elements will stop stretching
Without further ado, this is the JSFiddle
// $(window).resize(function(){location.reload();});
//refresh page on browser resize
$(window).bind('resize', function(e)
{
console.log('window resized..');
this.location.reload(false); /* false to get page from cache */
/* true to fetch page from server */
});
*{
padding: 0;
margin: 0;
}
body{
background-color: #732673;
/* background-image: linear-gradient(to right,#ffffe6 ,#ffe6ff); */
}
hr{
color: white;
margin: auto;
}
#show-case{
display: flex;
flex-wrap: wrap;
margin: auto ;
text-align: center;
max-width: 750px;
}
.graphics-card{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 10px;
text-align: center;
margin-top: 10px;
}
.graphics-card h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img001{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
border: 2px #67b581 solid;
}
.graphics-card-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.graphics-card-btn a{
text-decoration: none;
}
/* ///////// SHOW-CASE [GAMING MOUSE] ///////// */
.gaming-mouse{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px;
padding: 10px;
margin-top: 10px;
}
.gaming-mouse h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img002{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
border: 2px #67b581 solid;
}
/* .gaming-mouse-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
} */
.gaming-mouse-btn a{
text-decoration: none;
}
.gaming-headphone{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 10px;
margin-top: 10px;
}
.gaming-headphone h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img003{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
border: 2px #67b581 solid;
}
/* .gaming-headphone-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
} */
/* gaming-headphone-btn a{
text-decoration: none;
} */
.gaming-chair{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 10px;
margin-top: 10px;
}
.gaming-chair h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img005{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
.gaming-chair-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.gaming-chair-btn a{
text-decoration: none;
}
.fps-monitor{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 10px;
margin-top: 10px;
}
.fps-monitor h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img006{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
border: 2px #67b581 solid;
}
/* .fps-monitor-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.fps-monitor-btn a{
text-decoration: none;
} */
.ram{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 10px;
margin-top: 10px;
}
.ram h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img004{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
border: 2px #67b581 solid;
}
/* .ram-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.ram-btn a{
text-decoration: none;
} */
.about-us{
position:relative;
margin:auto;
border-radius: 13px;
max-width: 80%;
height: auto;
font-size: 3px;
color:aqua;
position:static;
}
.about-us h1{
font-size: 28px;
text-decoration: underline;
text-decoration-color: black;
}
.about-us p{
color:#ff80b3;
font-size: 17px;
}
/* Responsive layout - makes a one column-layout instead of a two-column layout */
#media (max-width: 320px) {
.graphics-card, .gaming-mouse, .gaming-headphone, .gaming-chair, .fps-monitor, .ram
{
flex: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<!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="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
<title>Home</title>
<link rel="icon" href="favicon.jpg">
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script>
</script>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">NEW DADDY'S GAMES</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Accessories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="graphics-card.html">Graphics card</a>
</li>
</ul>
<span class="navbar-text">
<!-- Navbar text with an inline element -->
</span>
</div>
</div>
</nav>
<div id="show-case">
<div class="graphics-card" >
<h1>Graphics card</h1>
<img class="img001" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/001.jpg" type="image">
<button class="graphics-card-btn">View List</button>
</div>
<div class="gaming-mouse" >
<h1>GAMING MOUSE</h1>
<img class="img002" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/002.jpg" type="image">
<button class="graphics-card-btn">View List</button>
</div>
<div class="gaming-headphone" >
<h1>GAMING HEADPHONES</h1>
<img class="img003" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/003.jpg" type="image">
<button class="graphics-card-btn">View List</button>
</div>
<div class="gaming-chair">
<h1>COMFY CHAIR</h1>
<img class="img005" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/005.jpg" image>
<button class="graphics-card-btn">View List</button>
</div>
<div class="fps-monitor">
<h1>FPS MONITOR</h1>
<img class="img006" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/006.jpg" image>
<button class="graphics-card-btn">View List</button>
</div>
<div class="ram" >
<h1>RAM</h1>
<img class="img004" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/004.jpg" type="image">
<button class="graphics-card-btn">View List</button>
</div>
</div>
<hr>
<div class="about-us">
<h1>About Us</h1>
<p>We are a new computer accessories store.<br>
We would love to have great customers like you</p>
</div>
</body>
</html>
</body>
</html>
The following screenshots show the layout improvements respectively at 480px, 420px, 240px
I am trying to build my personal webpage but simply cant manage to make my footer not cover the two buttons.
This problem only occurs on my laptop. As soon as I switch to my external monitor, the two buttons arent covered anymore.
I have tried inserting html{overflow-y: scroll;} to my css but it doesnt seem to work :(
Any help would be awesome! Thank you.
HTML:
#import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: ghostwhite;
background-size: cover;
padding: 0;
margin: 0;
}
.navbar {
height: 80px;
width: 100%;
background-color: #808080;
}
.logo {
width: 140px;
height: auto;
padding: 15px 50px;
}
.navbar ul {
float: right;
margin-right: 20px;
}
.navbar ul li {
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
font-family: 'Roboto', sans-serif;
transition: .2s;
}
.navbar ul li a:hover {
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
user-select: none;
}
.center h1 {
color: black;
font-size: 70px;
font-weight: bold;
width: 900px;
text-align: center;
}
.center h2 {
color: black;
font-size: 70px;
font-weight: bold;
width: 885px;
margin-top: 10px;
text-align: center;
}
.center .buttons {
margin: 35px 280px;
}
.buttons button {
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons .btn {
margin-left: 25px;
}
.buttons button:hover {
background: #4b79b4;
}
footer {
position: absolute;
background-color: #808080;
height: auto;
width: 100%;
padding-top: 40px;
color: black;
bottom: 0px;
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3 {
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 3rem;
}
.footer-content p {
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li {
margin: 0 10px;
}
.socials a {
text-decoration: none;
color: lightsteelblue;
}
.socials a i {
font-size: 1.1rem;
transition: color .4s ease;
}
.socials a:hover i {
color: #4b79b4;
}
.footer-bottom {
background-color: #737373;
width: 100%;
padding: 20px 0;
text-align: center;
}
.footer-bottom p {
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span {
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!doctype html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<!-- BEGIN NAVBAR -->
<nav class="navbar">
<img class="logo" src="logo.png">
<ul>
<li> <a class="active" href="#">Home</a></li>
<li> About</li>
<li> CV</li>
<li> Favourites</li>
<li> Contact</li>
</ul>
</nav>
<!-- END NAVBAR -->
<!-- BEGIN CONTENT -->
<div class="center">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
<!-- END CONTENT -->
</div>
<!-- BEGIN FOOTER -->
<footer>
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-phone"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
<!-- END FOOTER -->
</body>
</html>
What you describe kind of feels like a grid to me using three "rows", one for the "navbar", one for the "content" and one for the "footer" such as:
display: grid;
grid-template-rows: auto 1fr auto;
Now given that we can put the containers for the rows in a wrapper .wrapper
Then we tall it which "row" each of the sections belongs in. grid-row: 2/2; for the content for example in row 2 (start and end)
I took a good bit of liberty with your CSS (it is still a "lot" just for this) specifically, I added borders to show where things are - you will want to remove those but I did it to illustrate where is "is" in the flow.
This is by no means "perfect" but just a very quick place to build from.
#import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: ghostwhite;
padding: 0;
margin: 0;
border: solid orange 3px;
}
.wrapper {
display: grid;
grid-template-rows: auto 1fr auto;
border: lime 4px dashed;
}
.navbar-container {
border: red 4px solid;
grid-row: 1/1;
display: flex;
align-items: start;
margin: 0rem;
}
.content-container {
font-family: sans-serif;
display: grid;
place-items: center;
grid-row: 2/2;
border: blue 1px solid;
}
.footer-container {
padding-top: 2rem;
display: grid;
grid-template-rows: auto 1fr auto;
border: cyan 1px solid;
}
.footer-content {
display: grid;
grid-template-rows: 1fr auto 1fr;
align-items: center;
justify-items: center;
}
.footer-bottom {
grid-row: 3/3;
align-text: center;
padding: 0.25rem;
border: dashed blue 1px;
}
.navbar {
height: 5rem;
width: 100%;
background-color: #808080;
font-family: 'Roboto', sans-serif;
}
.navbar>.logo {
width: 140px;
height: auto;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 50px;
padding-right: 50px;
border: solid 1px green;
}
.navbar ul li {
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
transition: 0.2s;
}
.navbar ul li a:hover {
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center {
user-select: none;
}
.buttons {
display: flex;
flex-direction: row;
margin-top: 1rem;
margin-bottom: 1rem;
}
.buttons button {
margin: 1rem;
}
.buttons button {
flex: auto;
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons button:hover {
background: #4b79b4;
}
.socials {
list-style: none;
display: flex;
align-items: middle;
justify-content: center;
}
.socials li {
margin-right: 10px;
}
.footer-bottom {
font-size: 0.75rem;
background-color: #737373;
text-align: center;
width: 100%;
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!doctype html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<nav class="navbar navbar-container">
<img class="logo" src="logo.png">
<ul class="menu-items">
<li> <a class="active" href="#">Home</a></li>
<li> About</li>
<li> CV</li>
<li> Favourites</li>
<li> Contact</li>
</ul>
</nav>
<div class="center content-container">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
</div>
<footer class="footer-container">
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-phone"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
</body>
</html>