Not able to resize objects <HREF> + Media Query CSS
Question
I am having problems with resizing some buttons in my page because when you resize the page for the screen of a mobile phone and you try to click on them <href "1.htm"> , they will do not do anything.
I know that it is a problem of the media query but I do not how to solve it.
index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>DaZPlayer</title>
<link rel="stylesheet" type="text/css" href="index_files/styles.css">
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="index_files/menu.css">
</head>
<body>
<a href="1"><img class="portada" src="index_files/DaZ-Player_v2.jpg"></a>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<nav class="nav">
<input class="chk-nav" type="checkbox" id="btn-navbar" />
<label for="btn-navbar"><i class="fa fa-bars"></i></label>
<ul class="navbar">
<li><a href="#" class="casa"><i class="fa fa-home"></i>Inicio</a></li>
<li>
<!--- SI QUIERES PONER UNA FLECHA DEBES PONER CLASS lbl-nav --->
<label for="btn-subnav1">
<i class="fa fa-play-circle"></i>Canales
</label>
<input class="chk-nav" type="checkbox" id="btn-subnav1"/>
<!--- ESTO ES POR SÍ QUIERES PONER MÁS COSAS ADENTRO DE UNA
<ul class="sub-nav">
<li><a href="#">Excel básico</a></li>
<li><a href="#">Diseño web</a></li>
<li><a href="#">Computación básica</a></li>
<li><a href="#">Fundamentos de programación</a></li>
</ul>
--->
</li>
<li>
<label class="" for="btn-subnav2">
<i class="fa fa-info-circle"></i>Nosotros
</label>
<input class="chk-nav" type="checkbox" id="btn-subnav2" />
<!--- ESTO ES POR SÍ QUIERES PONER MÁS COSAS ADENTRO DE UNA
<ul class="sub-nav">
<li><a href="#">Excel básico</a></li>
<li><a href="#">Diseño web</a></li>
<li><a href="#">Computación básica</a></li>
<li><a href="#">Fundamentos de programación</a></li>
</ul> --->
</li>
<li><a href="#" class="casa"><i class="fa fa-envelope"></i>Contáctenos</a></li>
</ul>
</nav>
<!--- Ya Por fin Comenzamoz y salimos del Menu --->
<h1 class="titulo_1">Canales de TV en Vivo</h1>
<div id="contenedor1">
<br>
<a href="1" class="conexion"><img alt="" class="canales" src="img_canales/cnn.png"></a>
<a href="2" class="conexion"><img alt="" class="canales" src="img_canales/rt1.png"></a>
<a href="3" class="conexion"><img alt="" class="canales_mas_ancho" src="img_canales/todo_noticias.png"></a>
<a href="4" class="conexion"><img alt="" class="canales_mas_ancho" src="img_canales/tlx_arg.png"></a>
</div>
</body>
</html>
menu.css :
/*_________________________________________________________________
$RESET
____________________________________________________________________*/
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*_________________________________________________________________
$ESTILOS GENERALES
____________________________________________________________________*/
ul {
list-style-type: none;
}
.casa, label {
display: block;
font-size: 1.25rem;
text-decoration: none;
color: #E5E5E5;
padding: 1rem 1rem 1rem 3rem;
cursor: pointer;
-webkit-transition: all .3s ease;
transition: all .3s ease;
border-left: 4px solid rgba(255, 255, 255, 0);
}
.casa:hover, label:hover {
color: #FFB503;
border-left: 4px solid #049CF3;
}
.chk-nav {
display: none;
}
/*_________________________________________________________________
$NAV <nav class"nav"></nav>
____________________________________________________________________*/
.nav {
width: 100%;
position: absolute;
z-index: 10;
}
/*_________________________________________________________________
$NAVBAR <ul class"nav-bar"></ul>
____________________________________________________________________*/
.navbar {
width: 50%;
}
.navbar .sub-nav {
display: block;
}
.sub-nav .casa {
padding-left: 2rem;
font-size: 1rem;
}
.navbar > li {
border-top: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
}
/*_________________________________________________________________
$ESTILOS PARA MODIFICAR EL LABEL SECUNDARIO DEL SUBMENU
____________________________________________________________________*/
.navbar .fa {
position: absolute;
left: 1rem;
}
/* 25BC es la flecha */
.lbl-nav:after {
content: "\25BC";
font-size: 1rem;
position: absolute;
width: 100%;
text-align: right;
left: 0;
padding-right: .75rem;
line-height: 1.5rem;
}
/*_________________________________________________________________
$ESTILOS PARA MODIFICAR EL LABEL PRINCIPAL O ICONO DE HAMBURGUESA
____________________________________________________________________*/
label[for="btn-navbar"] {
padding: .5rem 1rem .5rem 1rem;
font-size: 2rem;
text-align: left;
color: #049CF3;
background-color: #252525;
}
label[for="btn-navbar"]:hover {
color: #E5E5E5;
border-left: 4px solid transparent;
}
/*_________________________________________________________________
$ESTILOS PARA ESCONDER LA LISTA PRINCIPAL DEL MENU
____________________________________________________________________*/
.navbar {
margin-left: -100%;
height: 100vh;
-webkit-transition: all .5s ease;
transition: all .5s ease;
background-color: #252525;
}
.chk-nav:checked ~ .navbar {
margin-left: 0;
}
/*_________________________________________________________________
$ESTILOS PARA ESCONDER LOS SUBMENUS
____________________________________________________________________*/
.navbar .sub-nav {
display: none;
}
.chk-nav:checked ~ .sub-nav {
display: block;
}
/****************_________________________________________________________________*******************
$ESTILOS PARA DESKTOP MEDIAQUERYS
****************____________________________________________________________________*****************/
@media all and (min-width: 49rem) {
.casa, label {
display: block;
padding: 1rem 1.25rem;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
/*_________________________________________________________________
$ESTILOS PARA NAVBAR
____________________________________________________________________*/
.navbar {
max-width: 100%;
width: 100%;
height: auto;
display: table;
table-layout: fixed;
margin: auto;
}
.navbar > li {
display: table-cell;
}
.chk-nav:checked ~ .navbar {
margin: auto;
}
/*_________________________________________________________________
$ESTILOS PARA ESCONDER EL ICONO DE HAMBURGUESA
____________________________________________________________________*/
label[for="btn-navbar"] {
display: none;
}
/*_________________________________________________________________
$ESTILOS PARA el SUBMENU
____________________________________________________________________*/
.navbar .sub-nav {
display: none;
}
.navbar > ul > li {
position: relative;
}
.chk-nav:checked ~ .sub-nav {
display: block;
}
.navbar .sub-nav {
width: 100%;
background-color: #222;
position: absolute;
}
.sub-nav .casa {
font-size: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
/*_________________________________________________________________
$ESTILOS PARA LOS ICONOS
____________________________________________________________________*/
.navbar .fa {
position: static;
padding-right: .3rem;
}
.lbl-nav:after {
top: 0;
height: 100%;
line-height: 3.5rem;
}
/*_________________________________________________________________
$ESTILOS PARA EL MENU PRINCIPAL
____________________________________________________________________*/
/* BORDES*/
.navbar > li {
position: relative;
border-top: 4px solid #049CF3;
}
.navbar > li > .casa:hover, label:hover {
border-left: 4px solid transparent;
}
}
styles.css :
#contenedor1 {
margin-top: 30px;
margin-right: 40px;
margin-bottom: 20px;
margin-left: 70px;
}
@media all and (max-width: 450px){
.portada{
width:100%;
}
}
h1.titulo_1 {
text-align: center;
font-size: 60px;
color: black;
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 40px;
}
/* CUANDO LA PANTALLA ES MENOR A 1000px PASARA ESTO*/
@media all and (max-width: 1000px){
.canales{
width: 155px;
height: 90px;
}
}
/* CUANDO LA PANTALLA ES MENOR A 500px PASARA ESTO*/
@media all and (max-width: 300px){
.canales{
width: 140px;
height: 70px;
display:block;
margin:auto;
}
}
/* PARA QUE NO APAREZCAEL TAMAÑO ORIGINAL CUANDO YA ESTA EXTENDIDA LA VENTANA
DEL NAVEGADOR, COLOCAS UN TAMAÑO ESTABLECIDO, EN MI CASO 160px*/
.canales{
width: 170px;
height: 100px;
margin-bottom: 25px;
margin-left: 10px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-ms-border-radius: 20px;
}
.canales_mas_ancho{
width: 170px;
height: 100px;
margin-bottom: 25px;
margin-left: 10px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-ms-border-radius: 20px;
}
/* CUANDO LA PANTALLA ES MENOR A 1000px PASARA ESTO*/
@media all and (max-width: 1000px){
.canales_mas_ancho{
width: 155px;
height: 90px;
}
}
/* CUANDO LA PANTALLA ES MENOR A 500px PASARA ESTO*/
@media all and (max-width: 300px){
.canales_mas_ancho{
width: 140px;
height: 70px;
display:block;
margin:auto;
}
}
1 answers
solution1
0 ACCPTED 2017-12-06 01:40:19
See if this helps you: https://s.codepen.io/panchroma/debug/EbJdjM/jVMpogKwympk
This pen is the same HTML and CSS that you posted except that in the CSS for the .nav block, starting at line 46, I set a height for the .nav element.
.nav {
width: 100%;
position: absolute;
z-index: 10;
height: 55px !important;
background-color: pink;
}
What seemed to be happening with your code is that on mobile viewports, .nav covered the entire window, and therefore you couldn't access the links because they are 'under' the fullscreen nav element. To confirm this, comment out line 50 which is limiting the height of .nav
Good luck!
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.
Related Question
Unable to resize 1/6 css grid into 2 /2 css grid with media query
CSS Media Query only works on browser resize (Chrome)
css3 media query not working — background color change on resize
CSS Media Query only works on browser resize (Edge)
CSS reset values on Media Query Breakpoint (Resize window or Orientation changes)
CSS Media Print Query
CSS - Not applying media query
HTML/CSS Media Query
CSS Media Query Tricks
css media query responsive
Related Tags