By looking at the site that you have provided, There is container class in media query that has the height: 100vh; property, which is causing this issue.
.container {
width: 100%;
height: 100vh;
/* background:wheat; */
}
Either remove that class from media query or change to
.container {
width: 100%;
}
This will solve your problem.
I have got a button that redirects you to a hype-link i have tried so hard to debug but i don’t seem to find the bugs.It works fine on the full size screen but it is not clickable on the media query i applied.
1. First i tried to comment out the hamburg menu because i copied it from some video then but it didn’t seem to be the problem.
2. Then i tried to change from max-width to min-width it also didn’t work.
3. I also tried using the z-index on the button hoping it gets on the front but also didn’t work.
Checkout the entire website at https://spectrumsdl.com . Nothing seems clickable when in the media query view port.
@media(max-width:650px) {
* {
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
font-family: monospace;
font-size: 12px;
font-family: mon reg;
transition: ease-in-out .8s;
}
.container {
width: 100%;
height: 100vh;
/* background:wheat; */
}
.nav {
width: 100%;
height: 100vh;
/* background-color: white; */
top: -900px;
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: top 0.8s cubic-bezier(1, 0, 0, 1);
}
.right {
height: auto;
width: 100%;
align-items: center;
display: flex;
flex-direction: column;
}
.nav ul {
display: flex;
flex-direction: column;
list-style-type: none;
justify-content: center;
align-items: center;
}
.nav ul li :hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
border-radius: 3px;
transition: .3s;
color: var(--textColorSecondary);
}
li a {
display: block;
padding: 14px 14px;
text-decoration: none;
color: var(--textColorMain);
}
#nav-btn {
display: block;
color: var(--bottonColor);
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
height: 2.5em;
align-items: center;
margin-bottom: 2em;
}
#nav-btn:hover {
color: var(--mainColor);
background-color: var(--bottonColor);
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
transition: .5s;
}
.change {
top: 0;
}
.hamburger-menu {
width: 100%;
height: 30px;
display: flex;
position: fixed;
scroll-behavior: none;
margin-top: 2em;
top: 1em;
right: 1em;
cursor: pointer;
/* background-color: white; */
align-items: flex-end;
flex-direction: column;
justify-content: space-around;
}
.nav-item {
list-style: none;
margin: 25px;
text-decoration: none;
}
.line {
width: 35px;
/* width: 100%; */
height: 4px;
background-color: var(--bottonColor);
transition: all 0.8s;
}
.change .line-1 {
transform: rotateZ(-405deg) translate(-8px, 6px);
}
.change .line-2 {
opacity: 0;
}
.change .line-3 {
transform: rotateZ(405deg) translate(-8px, -6px);
}
/* main-cnt */
/*
body{
background-image:
linear-gradient(to right ,rgb(96,45,145),rgb(96,45,145, 0.1) ),
url("../media/background.jpg");
background-size: cover;
background-position:center;
background-repeat: no-repeat;
background-attachment: fixed;
} */
main {
display: block;
padding: 9em 4em;
height:
}
.main-cnt {
display: flex;
flex-direction: column;
width: 100%;
}
#bookNowBtn {
float: right;
padding-top: 10em;
display: flex;
flex-direction: column;
align-items: flex-end;
}
#bookNowBtn button {
font-size: 12px;
font-weight: 900;
font-family: mon semibold;
/* float: right;; */
box-shadow: 1px 1px 1px rgb(255, 255, 255);
}
#bookNowBtn button:hover {
box-shadow: 2px 2px 2px 2px rgba(255, 255, 255, 0.63);
transition: .1s;
}
#mainText {
display: flex;
flex-direction: column;
/* padding-top: 7em; */
color: white;
}
#mainText h2 {
display: flex;
font-size: 18px;
/* line-height: 1em; */
font-family: mon semibold;
}
#mainText h2 span {
color: var(--bottonColor);
font-size: 18px;
font-family: mon semibold;
}
#mainText p {
font-size: 15px;
margin-top: 1em;
}<header>
<div class="container">
<div class="nav navbar">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<div class="sdlLogo" ">
<a href="/"> <img src="sdl_logo.svg" alt="sdl_logo" height="75px " width="150px "></a>
</div>
<div class="right ">
<ul>
<li class="nav-item active "><a href="/ ">Home</a></li>
<li class="nav-item "><a href="about.php ">About</a></li>
<li class="nav-item "><a href="service.php ">Services</a></li>
<li class="nav-item "><a href="article.php ">Articles</a></li>
</ul>
<div>
<a href="contact.php "> <button class="btn " id="nav-btn ">Contact Us</button></a>
</div>
</div>
</div>
</div>
</header>
<!-- main -->
<main>
<div id="mainText " class="main-cnt ">
<h2>
Spectrum <span>Diagnostic</span> Laboratories
</h2>
<p>
Quality results for Quality patient care.
</p>
</div>
<a href="service.php#Mailing " id="bookNowBtn " class="main-cnt ">
<button class="btn " type="submit ">Book Now!</button>
</a>
</main>That’s … a
You have additional double quote after
@Nik What’s with your edit suggestion? Are you trying to answer by editing the question? Don’t do that; instead, copy the snippets to an answer.
@trippleee nope. i did not answer the question by editing it. just moved the code to snippet in order to see it in action. and while doing so i found the additional quote. so informed.
Also check your HTML, don’t have a