Медиа-запросы работают на Инспекторе, но не на живом сайте

Question

Пользовательские css (медиа-запросы) работают для WordPress и инспектора, но не на реальном сайте.

Я добавил тег meta viewport в HTML, но он все еще не работает.

/* Media Queries */

/* small phones */

@media (max-width: 320px) {
  #intro {
    margin-left: 20px;
    width: 85%;
  }
  .logo-image {
    position: relative;
  }
  .logo-img {
    display: none;
  }
  main {
    width: 85%;
    position: relative;
    top: 0px;
  }
  .card {
    width: 85%;
  }
  .card .card-image img {
    width: 100%;
  }
  footer {
    flex-direction: column;
    text-align: center;
  }
  footer #left-footer {
    flex: 1;
    border-right: 0;
    padding-left: 0;
  }
  footer #right-footer {
    background: #eee;
    color: black;
  }
  footer #right-footer a {
    color: black;
  }
  footer #social-media-footer ul li:hover a .fa-instagram {
    color: purple;
    transition: 0.4s;
  }
  nav ul {
    display: none;
  }
  #menu-icon {
    display: flex;
  }
  #slideout-menu {
    display: block;
    text-align: center;
  }
  #searchbox {
    display: none;
  }
  #blogpost {
    width: 100%;
    border-left: 0;
  }
  #sidebar {
    display: none;
  }
  .comment-form {
    width: 70%;
  }
}

@media (max-width: 320px) {
  #slideout-menu {
    width: 65%;
  }
  #logo-img {
    display: none;
  }
  #intro {
    width: 95%;
    height: 120vw;
  }
  #intro .logo-image {
    width: auto;
    height: auto;
    max-width: 680px;
    max-height: 750px;
    position: relative;
    right: 18px;
    top: 50px;
  }
  main {
    width: 95%;
    margin-top: 0px;
  }
  .card {
    width: 95%;
  }
  .card .card-image img {
    width: 100%;
  }
  .logo-img {
    display: none;
  }
  .card .card-description {
    width: 100%
  }
}

@media (min-width: 375px) and (max-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
  #nav ul {
    display: none;
  }
  #slideout-menu {
    width: 65%;
  }
  #logo-img {
    display: none;
  }
  #intro {
    width: auto;
    height: 120vw;
  }
  #intro .logo-image {
    width: auto;
    height: auto;
    max-width: 800px;
    max-height: 750px;
    position: relative;
    right: 5px;
    top: 50px;
  }
  main {
    width: 85%;
    margin-top: 0px;
  }
  .card {
    width: 95%;
  }
  .card .card-image img {
    width: 100%;
  }
  .logo-img {
    display: none;
  }
  .card .card-description {
    width: 100%
  }
  nav ul {
    display: none;
  }
  #menu-icon {
    display: flex;
  }
  #slideout-menu {
    display: block;
    text-align: center;
  }
  #searchbox {
    display: none;
  }
  #sidebar {
    display: none;
  }
  #comments-section {
    width: 140%;
  }
}

@media (min-width: 720px) {
  .logo-image {
    display: flex;
  }
  main {
    width: 95%;
  }
  .card {
    width: 45%;
  }
  .card .card-image img {
    width: 100%;
  }
}


/* Tablet */

@media screen and (min-width: 668px) and (max-width: 768px) {
  nav {
    font-size: 2vw;
  }
  #logo-img {
    height: auto;
    width: auto;
    max-width: 680px;
    max-height: 750px;
  }
  #intro {
    width: auto;
    height: 100vw;
  }
  #intro .logo-image {
    width: auto;
    height: auto;
    max-width: 1500px;
    max-height: 1000px;
    position: relative;
    right: 10px;
    top: 10px;
  }
  main {
    width: 95%;
  }
  section {
    flex-direction: column;
  }
  .card,
  .card .Card Image img {
    width: 100%;
  }
  footer {
    flex-direction: column;
    text-align: center;
  }
  footer #left-footer {
    flex: 1;
    border-right: 0;
    padding-left: 0;
  }
  footer #right-footer {
    background: #eee;
    color: black;
  }
  footer #right-footer a {
    color: black;
  }
  footer #social-media-footer ul li:hover a .fa-instagram {
    color: purple;
    transition: 0.4s;
  }
  #searchbox {
    display: ;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
  nav ul {
    display: flex;
    list-style: none;
    padding: 0 150px;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    margin: 0;
  }
  #logo-img {
    left: 30px
  }
  .logo-image {
    display: flex;
  }
  main {
    width: 95%;
  }
  .card {
    width: 45%;
  }
  .card .card-image img {
    width: 100%;
  }
}


/* ----------- Retina Screens ----------- */

@media screen and (min-width: 1200px) and (max-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
  #logo-img {
    left: 30px
  }
  .logo-image {
    display: flex;
  }
  main {
    width: 95%;
  }
  .card {
    width: 45%;
  }
  .card .card-image img {
    width: 100%;
  }
  #logo-img {
    height: auto;
    width: auto;
    max-width: 680px;
    max-height: 750px;
  }
  #intro {
    width: auto;
    height: 100vw;
  }
  #intro .logo-image {
    width: auto;
    height: auto;
    max-width: 2500px;
    max-height: 1000px;
    position: relative;
    right: 10px;
    top: -200px;
  }
  main {
    width: 95%;
  }
  section {
    flex-direction: column;
  }
  .card,
  .card .Card Image img {
    width: 100%;
  }
  footer {
    flex-direction: column;
    text-align: center;
  }
  footer #left-footer {
    flex: 1;
    border-right: 0;
    padding-left: 0;
  }
  footer #right-footer {
    background: #eee;
    color: black;
  }
  footer #right-footer a {
    color: black;
  }
  footer #social-media-footer ul li:hover a .fa-instagram {
    color: purple;
    transition: 0.4s;
  }
  #searchbox {
    display: ;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
  nav ul {
    display: flex;
    list-style: none;
    padding: 0 200px;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    margin: 0;
  }
  #logo-img {
    left: 30px
  }
}

Вот HTML

"> /img/fuchsifuchs.png" alt = "fuchsifuchs.png" class = "fuchs-intro" /> "> Gedichte 'post', 'posts_per_page' => 2,); $Gedichteposts = новый WP_QUERY ($ args); while ($ Gedichteposts-> have_posts ()) {$ Gedichteposts-> the_post ();?> ">" Alt = "Изображение карты"> "> *

"class =" btn-readmore "> weiter erkunden

        </section>

    <a href="<?php echo site_url('/projects'); ?>">
    <h2 class="section-heading"> Kurzgeschichten</h2>

    <section>
    <?php 

        $args = array(
        'post_type' => 'project',
        'posts_per_page' => 2,
        );

        $project = new WP_QUERY($args);

        while($project->have_posts()) {
        $project->the_post();


        ?>

        <div class="card">
            <div class="card-image">
                <a href=" <?php echo the_permalink(); ?>">
                    <img src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>"
                    alt="Card Image">
                </a>    
        </div>

        <div class="card-description">
            <a href="<?php the_permalink() ?>">
                <h3><?php the_title(); ?></h3>
            </a>
            <p><?php echo wp_trim_words(get_the_excerpt(), 30); ?>
            </p>
            <a href="<?php the_permalink(); ?>" class="btn-readmore"> weiter erkunden</a>
        </div>
        </div>

        <?php } 
        wp_reset_query();
        ?>

        </section>

    <a href="<?php echo site_url('/about'); ?>">
    <h2 class="section-heading"> Das bin ich</h2>

    <section id="section-source">
        <p>
        Wenn Ihr mehr über mich und meine Geschichte erfahren wollt, schaut gerne hier rein. Ich erzähle euch, wie es zu diesem Blog gekommen ist und warum ihr rein schauen solltet.
        </p>
        <a href="https://www.instagram.com/fabiancheves8/" class="btn-readmore">Instagram Profil</a>
    </section> 

Answer 1

Общая проблема, с которой я сталкиваюсь при попытке написать css из админ-панели WordPress, заключается в том, что мой css перезаписывается. Чтобы решить эту проблему, вы можете попытаться сопоставить специфику уже существующего css или, если вы смелы, просто добавьте «! Important» перед «;»каждого правила.

Рекомендую сначала изучить специфику.