Как сделать мобильную домашнюю страницу моего блога распознающей мои CSS-реализации?

Question

Я пытаюсь оптимизировать свой сайт для мобильных пользователей.Я применил настройки, предназначенные для мобильных устройств, добавив CSS в @ media screen и (max-width: 480px) .

Я добился успеха, но только на всех страницах сообщений.Домашняя страница не будет следовать принятому мною правилу css, которое работает на всех страницах сообщений.

Это скриншот страницы сообщений до добавления css и это его скриншот после того, как я добавил css . Между тем, это скриншот домашней страницы до и после CSS добавлен.Домашняя страница не изменилась после того, как я добавил свои реализации CSS.

CSS

@media screen and (max-width:480px) {
.header-logo {width: 62%; float:left; margin-left: 58px;}
.navigation-item {margin-left: -15px;}
.hometab {height: 42px; padding-top:4px;}
.main-navigation-items {position: relative; width: 97%; height: 32px; margin-top:-27px;}
.main-social {height: 20px; display: inline-block;}
.mainfl {height: 42px; padding-top: 0;}
i.fa-plus-square {size:500px;  margin-top:-40px;}
i.fa-facebook-square {display: none;}
i.fa-google-plus-square {display: none;}
i.fa-twitter-square {display: none;}
}

HTML

<div class='header-logo' id='header-brand'>
<div class='navigation-item'>
    <ul class='main-navigation-items top-menu' id='main-navigation-items'>
        <li><a class='hometab' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Home</a></li>

                <b:if cond='data:blog.pageType != &quot;http://fourthblogtester.blogspot.com/?m=1&quot;'>
         <ol class='main-social'>
            <li><a class='mainfb' href='#' itemprop='url' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook-square'/></a></li>
            <li><a class='maingp' href='#' itemprop='url' rel='nofollow' target='_blank' title='Google+'><i class='fa fa-google-plus-square'/></a></li>
            <li><a class='maintw' href='#' itemprop='url' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter-square'/></a></li>
            <li><a class='mainfl' href='#' itemprop='url' rel='nofollow' target='_blank' title='Follow Us'><i class='fa fa-plus-square'/>Follow</a></li>
         </ol>
      </b:if>
    </ul>
</div>

Я ценю всю вашу помощь.Большое вам спасибо.

Answer 1

Проблема решена после стольких проб и ошибок. Раньше это выглядело так и СЕЙЧАС выглядело это .

Вот некоторые твикичто я использовал

Я посмотрел в разделе CSS.В моем шаблоне есть два набора реализаций CSS для общего макета, а именно: Глобальный Отзывчивый и Отзывчивый Элемент CSS .

Я скопировал CSS, который я создал под Элементом CSSОтзывчивый, код которого указан ниже:

/* CSS Item Responsive */

@media screen and (max-width:480px) {
h1.post-title {font-size: 20px;
   margin-top: -20px;}
.header-logo {width: 62%;
   float:left;
   margin-left: 58px;}
.homepage .mobile-menu .hamburger{
   float: left;
   margin-left: -15px;}
html, body {max-width: 100%;
   overflow-x: hidden;}
.post-body {width: 108%;
   text-align: justify;
   text-justify: inter-word;
   margin-left: -20px;
   margin-right: 5px;}
.navigation-item {margin-left: -15px;}
.hometab {height: 42px; padding-top:4px;}
.main-navigation-items {position: relative; width: 99%;
   height:32px; margin-left: -6px;
   margin-top:-27px;}
.main-social {height:20px;display: inline-block;}
.mainfl {height: 42px;padding-top: 0;}
i.fa-plus-square {size:500px;;margin-top:-40px;}
i.fa-facebook-square {display: none;}
i.fa-google-plus-square {display: none;}
i.fa-twitter-square {display: none;}
}

Я вставил код выше прямо под Global Responsive.Панель навигации исправила свою ширину и отцентрировала себя.Тем не менее, эти ошибки существовали:

1. Вкладка «Follow» опустилась ниже половины черной панели навигации.
2. Черный панель навигации опустился в правильное положение.
3. Логотип заголовка по-прежнему слишком большой.
4. Элементы каждого пост-резюме перекрывали друг друга.
5. Весь пост-отчет был обрезан справа от мобильного браузера.

Итак, я несколько раз настраивал ивнесены коррективы в значения свойств, пока я не получу идеальный макет.Кроме того, я удалил несколько синтаксисов CSS по мере необходимости.Должен быть добавлен также синтаксис пост-резюме.

Вот окончательный код:

/* Global Responsive */

.header-logo {width: 62%!important;
   float:left!important;
   margin-left: 58px!important;}
.homepage .mobile-menu .hamburger{
   float: left;
   margin-left: -15px;}
html, body {max-width: 100%;
   overflow-x: hidden;}
.post-summary p {width: 108%;
   margin-left: -20px!important;
   margin-right: 5p!important;}
.navigation-item {margin-left: -15px;}
.hometab {height: 42px; padding-top:4px;}
.main-navigation-items {position: relative; width: 99%;
   height:32px; margin-left: -5px;
   margin-top:-27px!important;}
.main-social {height:20px;display: inline-block;}
.mainfl {height: 42px;padding-top: 0;}
i.fa-plus-square {size:500px;;margin-top:-40px;}
i.fa-facebook-square {display: none;}
i.fa-google-plus-square {display: none;}
i.fa-twitter-square {display: none;}
}