Я пытаюсь исправить ошибку в моем WordPress и css кодировании. Я создал нижний колонтитул и применил медиа-запрос, чтобы скрыть его (максимальная ширина: 768 пикселей). Я следил за курсом онлайн, но часть кода, который, кажется, работает для него, не работает для меня, и эта проблема действительно беспокоит меня, поэтому вся помощь очень ценится.
ниже, если мой код нижнего колонтитула и css код:
Нижний колонтитул:
<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>
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;
}
}