I've been playing about with media queries in hopes of getting my head around creating a responsive page.
I seem to have got it working but I've noticed that my hover effects in the navbar <li> items are no longer working when I reduce the page size to meet the media query regarding the smaller screen...is this just something that happens when you reduce the screen size or is it been overridden somewhere?
html {
scroll-behavior: smooth;
}
body{
font-family: 'Nunito';
background: linear-gradient(#47585B, #E8EFF0);
}
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: 2px;
/* border: 1px solid black; */
}
/* Underline on Company Name */
h1::after{
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 0px;
margin-top: 0.1em;
padding-top: 0.25rem;
background: linear-gradient(90deg, #47585B, #47585B20);
}
header {
background-color: #e6763c90;
box-sizing: border-box;
padding: 0 2rem;
box-shadow: 2px 0px 100px 10px #e6763c90;
text-align: center;
position: fixed;
top: 0px;
right: 0px;
width: 100vw;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
}
ul {
margin: 0;
padding: 20px;
list-style: none;
/* border: 1px solid black; */
}
a {
color: black;
text-decoration: none;
}
li {
display: inline-block;
padding: 7px;
margin: 0 0 0 2.5em;
text-align: center;
border-radius: 5px;
transition: all 0.2s ease;
}
.container {
height: 70vh;
padding: 10rem;
text-align: center;
/* border: 1px solid black; */
}
.dropDown{
display: none;
}
/* On hover animations */
li:hover{
transform: scale(1.08);
}
/* Smaller Screen */
@media (max-width: 1100px) {
header {
background-color: #e6763c90;
box-sizing: border-box;
padding-left: 0.25rem;
right: 0px;
text-align: center;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
li {
display: inline;
margin: 2rem;
z-index: 1000;
}
ul {
position: relative;
bottom: 1.4rem;
}
/* Adjust underline on smaller screen */
h1::after{
content: "";
display: none;
position: absolute;
width: 100%;
margin-top: 1.5em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: #47585B
}
li::after{
content: "";
position: absolute;
width: 100%;
margin-top: 1.5em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: linear-gradient(90deg, #47585B, #47585B20);
z-index: 10000;
}
}
/* Mobile */
@media (max-width: 800px) {
header {
background-color: #e6763c90;
box-sizing: border-box;
padding-left: 0.25rem;
right: 0px;
text-align: center;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.navbar {
display:none;
margin:1.2rem;
}
/* Adjust underline on mobile */
h1::after{
content: "";
position: absolute;
width: 100%;
margin-top: 0.1em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: #47585B
}
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<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=Nunito" rel="stylesheet">
<link href="styleSheet.css" rel="stylesheet"></link>
<title>Original Tombstones</title>
</head>
<body>
<header>
<h1 ><a href="#home">Original Tombstones</a></h1>
<ul >
<li><a href="#new">New Memorials</a></li>
<li><a href="#additionals">Additionals</a></li>
<li><a href="#renovations">Renovations</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</header>
<div id="home">
<h2>About Us</h2>
</div>
<div id="new">
<h2>New Memorials</h2>
</div>
<div id="additionals">
<h2>Additional Inscriptions</h2>
</div>
<div id="renovations">
<h2>Renovations</h2>
</div>
<div id="contact">
<h2>Get In Touch</h2>
</div>
</body>
</html>I apologise in advance if my code looks messy but I've not got my head round that bit yet!
Cheers!
CodePudding user response：
So without a media-query you've set the <li> elements to display: inline-block; Right now your li:hover{transform: scale(1.08);} works fine.
But then in one of your media-queries you set the <li>elements to display: inline;. Not really sure why tough, guess what you want will work with inline-block as well and this breaks the scaling right now. You're hover problem would be fixed if youjust removed the display:inline; line in youre media-query .
CodePudding user response：
try add the following keywords: only, screen on the media queeries ex:
@media only screen (max-width: 800px) {
also add the following meta tag on your html head :
<meta name="viewport" content= "width=device-width, initial-scale=1.0">