Блог

Главная - Вопросы по программированию - CSS не работает для медиа-запроса woocommerce wordpress

CSS не работает для медиа-запроса woocommerce wordpress

#php #css #wordpress #woocommerce #hook-woocommerce

Вопрос:

Пытаюсь создать фирменный стиль сайта для экрана медиа — запроса с максимальной шириной 768 пикселей, но он не работает. То, что я пытался, было:

 /* Without media query */

.custom-logo-link img {
  width: 80%!important;
  margin-bottom: -4em;
}

@media screen and (max-width: 768px) {
  .storefront-primary-navigation {
    clear: both;
    height: 36px !important;
    float: right;
    margin-left: 0!important;
    margin-top: -2em;
  }
     
  .custom-logo-link img {
  width: 62%!important; /*this is what not changing. need this from 80 to 62 */
  margin-bottom: -4em;
  display:flex;//tried block inline 
  }
}

  /*same css for .site-branding too
  Tried in theme customizer and child css but its not changing */
 
   //other option tried 
  add_action( 'storefront_header', 'storefront_site_branding', 20 );
      
  function storefront_site_branding() {
    echo '<style>
      @media  screen  and (max-width : 768px){
        .site-branding {
          margin-bottom: -2.5em;
          width: 32.739%!important;
        }
      }
      </style>';
  }

Но это не сработало. Потратил впустую 6 часов, но не смог найти решение.

Комментарии:

1. все выглядит нормально, можете ли вы поделиться ссылкой или дополнительной информацией

2. работа над wamp.использование функции заставляет изображение исчезать/проверяется на наличие конфликтов с плагинами, но css все еще не работает

3. Поскольку правило экрана вашего устройства, вероятно, имеет кэш ? Попробовать в окне инкогнито ? Или попробуйте @media (максимальная ширина: 768 пикселей) {} Пока я работаю над локальным проектом, я предпочитаю отключать кэш, проверьте это- a2hosting.com/kb/developer-corner/apache-web-server/…

4. я сделал это вместе с разными браузерами

Ответ №1:

Вы тоже пробовали использовать медиа-запросы для размеров выше 768 пикселей? Что-то вроде этого:

 @media screen and (min-width: 769px) {
.custom-logo-link img {
width: 80%!important;
margin-bottom: -4em;
}}

@media screen and (max-width: 768px) {
.storefront-primary-navigation {
 clear: both;
 height: 36px !important;
 float: right;
 margin-left: 0!important;
 margin-top: -2em;
}

.custom-logo-link img {
 width: 62%!important;
 margin-bottom: -4em;
 
}}

Комментарии:

1. да все то же самое ………….

Метки: