Estoy luchando por corregir un error en mi codificación de WordPress y CSS. He creado un pie de página y he aplicado una consulta de medios para ocultarlo en (ancho máximo: 768 px). He estado siguiendo un curso en línea, pero parte del código que parece funcionar para él no funciona para mí, y este problema realmente me está molestando, por lo que toda la ayuda es muy apreciada.

A continuación si mi código de pie de página y código CSS:

Pie:

<footer class="site-footer container">
<div class="footer-content">

<?php
$args = array(
    'theme_location'=> 'main-menu',
    'container' => 'nav',
    'container_class' => 'footer-menu'
);
wp_nav_menu( $args );
?>
<p class="copyright">All rights reserved . <?php echo get_bloginfo('name') . " " . date('Y'); ?> </p>
</div>


</footer>

<?php wp_footer(); ?>



</body>
</html>

Código CSS:

/*
Theme Name: Gym Fitness
Author: Luke Mersh
Description: Gym Theme
Version: 1.0
Tags: css grid, flexbox ready, mobile first, gym theme


*/
:root{
    --mainFont : 'Staatliches', cursive;
    --textFont : 'Open Sans', sans-serif;
    --secondaryFont : 'Raleway', sans-serif;

    /**colours**/
    --primary: #ff5b00;
    --darkGray : #2f2e2e;
    --lightGray : #ebebeb;
    --white : #ffffff;
    --black : #000000;

}
html{
    box-sizing: border-box;
    font-size: 62.5%;
}
*, *::before, *::after{
    box-sizing:inherit;
}
body{
    font-family: var(--secondaryFont);
    font-size:1.6rem;
    line-height: 2;
}

/*headings*/
h1, h2, h3{
    font-family: var(--mainFont);
    margin: .5rem 0;
    line-height: 1.2;
}
h1{
font-size: 6rem;
}
h2{
    font-size: 4.8rem;
    color: var(--primary);
}

h3{
    font-size: 3.6rem;
}
/*globals*/
a{
    text-decoration: none;
}
ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.container{
    max-width: 120rem;
    width: 95%;
    margin: 0 auto;
}
img{
    max-width: 100%;
    height: auto;
}

/* header*/
.logo{
    display: flex;
    justify-content: center;
}
.site-header{
    background-color: var(--darkGray);
    padding: 2rem 0;
}
@media (min-width:768px){
.navigation-bar{
    display: flex;
    justify-content: space-between;
}
}
.main-menu{
    display: none;
}
@media (min-width: 768px){
    .main-menu{
        display: flex;
    }
    .main-menu .menu{
        display: flex;
        align-items: center;
    }
    .main-menu li{
        margin-right: 2rem;
    }
    .main-menu li:last-of-type{
        margin-right: 0;
    }
    .main-menu a{
        color: var(--white);
        font-size: 2.8rem;
        font-family: var(--mainFont);
        padding: .5rem 2rem;
    }
    .main-menu .current_page_item{
        border-bottom: 3px solid var(--primary);
    }
    /**Mobile Menu**/
    @media (min-width: 768px){
        .slicknav_menu{
            display: none;
        }
    }
    /**footer**/
    .site-footer{
        border-top: 2px solid var(--lightGray);
        padding:2rem 0;

    }
    .footer-content{
        display: flex;
        justify-content: space-between;
    }
    /**footer menu**/
 .footer-menu .menu {
display: flex;
  }
.footer-menu .menu li{
      margin-right: 2rem;
  }
  .footer-menu .menu li: :last-of-type{
      margin-right: 0;
  }
 .footer-menu a{
font-family: var(--mainFont);
font-size: 1.8rem;
color: var(--black);

    }
  @media (max-width: 768px){
    .footer-menu .menu{  display: none;}
  }  





}
.copyright{
    text-align: center;
    flex:1;
    font-family: var(--mainFont);
    font-size: 2rem;
    margin:0;
}
@media (min-width: 768px){
    .copyright{
        flex: 0 0 auto;
    }
}
0
luke mersh 17 abr. 2020 a las 17:00

2 respuestas

La mejor respuesta
@media (min-width: 768px){
    .main-menu{
        display: flex;
    }
    .main-menu .menu{
        display: flex;
        align-items: center;
    }
    .main-menu li{
        margin-right: 2rem;
    }
    .main-menu li:last-of-type{
        margin-right: 0;
    }
    .main-menu a{
        color: var(--white);
        font-size: 2.8rem;
        font-family: var(--mainFont);
        padding: .5rem 2rem;
    }
    .main-menu .current_page_item{
        border-bottom: 3px solid var(--primary);
    }
} << missing this one
/**Mobile Menu**/
0
ravb79 17 abr. 2020 a las 14:24

Hay un problema de anidamiento en CSS que debe quitar el siguiente código de la consulta de medios de ancho mínimo

media (max-width: 768px) {
    .footer-menu .menu {
      display: none;
    }
  }
0
Joginder singh 17 abr. 2020 a las 14:20