Media Queries not working in my HTML code, Not sure what I am doing wrong here
Question
This is my Code for a FAST click on a website.
Website URL: www.vegastoothdr.com/wp_site/
<body>
<div id="wpadminbar" style="background-color: black; padding-top: 0px;border-color: white;">
<span class="row" style="vertical-align: top">
<!-- PHONE ICON -->
<a href="tel:(702) 473-5100">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/phone.png" width="60" height="36" style="padding-left: 20px">
</a>
<!-- CALENDAR ICON -->
<a href="appointment">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/calendar.png" width="60" height="36" style="padding-left: 20px">
</a>
<!-- EMAIL ICON -->
<a href="contact">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/envelope.png" width="67" height="36" style="padding-left: 20px">
</a>
<!-- PIN ICON -->
<a href="https://www.google.com/maps/place/1070+W+Horizon+Ridge+Pkwy+%23121,+Henderson,+NV+89012,+USA/@36.022368,-115.0346407,17z/data=!3m1!4b1!4m2!3m1!1s0x80c8d16f85764fa7:0x702e5efb00bd1ffb">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/pin.png" width="49" height="36" style="padding-left: 20px">
</a>
</span>
</div>
<header>
<!-- Nav CODE -->
</header>
Okay, Now i have the CODE and I placed a CSS code on the last line on the <head> section
@media screen and (max-width: 782px)
{
div#wpadminbar
{
height: 55px;
min-width: 300px;
}
}
Okay... It works on the mobile device now.
But, The links are not working. So i cant click the icons. none of the links are working.
TEST TWO:
I placed it under the Header Section and the links works.. But the media query is not working. Soo weird.
I have placed the code below where the links are working but the media query is not working.
<body>
<header>
<div id="wpadminbar" style="background-color: black; padding-top: 0px;border-color: white;">
<span class="row" style="vertical-align: top">
<!-- PHONE ICON -->
<a href="tel:(702) 473-5100">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/phone.png" width="60" height="36" style="padding-left: 20px">
</a>
<!-- CALENDAR ICON -->
<a href="appointment">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/calendar.png" width="60" height="36" style="padding-left: 20px">
</a>
<!-- EMAIL ICON -->
<a href="contact">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/envelope.png" width="67" height="36" style="padding-left: 20px">
</a>
<!-- PIN ICON -->
<a href="https://www.google.com/maps/place/1070+W+Horizon+Ridge+Pkwy+%23121,+Henderson,+NV+89012,+USA/@36.022368,-115.0346407,17z/data=!3m1!4b1!4m2!3m1!1s0x80c8d16f85764fa7:0x702e5efb00bd1ffb">
<img class="icons" src="http://www.vegastoothdr.com/wp_site/wp-content/uploads/2016/03/pin.png" width="49" height="36" style="padding-left: 20px">
</a>
</span>
</div>
1 answers
solution1
0 2016-03-23 07:21:18
I fixed the issue, There was JS script that was adding a Div for Video. It seems the DIV was on top on my code.
I deleted it and it fixed it :)
Link to the site: http://www.vegastoothdr.com/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.