Сохранение элемента короткого кода WP с центрированным использованием медиа-запроса

Question

Я использую тему Krown Backer, и я использую короткий код Krown, чтобы отображать указанное число моих последних сообщений на главной странице. Однако, как только мой сайт отображается на более широком экране, сообщения перемещаются в левую часть экрана.

Я хочу сделать центр элементов столбцов и держать элемент в центре, поскольку экран становится шире.

Вот тонированное HTML:

<h3 style="text-align: center;"> 
Latest Articles 
</h3> 

<div class="centered"> 

<p style="text-align: center;"> 

    <div class="krown-column-container clearfix last span12 clearfix"> 

</p> 

<p style="text-align: center;"> 

    <div class="krown-latest-posts classic"> 

    <ul class="posts-grid clearfix"> 

    <li class="item"> 

    <a class="post-img fancybox-thumb" href="http://centerforalternativefuels.org/alternative-fuel-deployment/cultivating-a-supportive-environment-for-alternative-fuel-vehicles/"> 

     <img src="http://centerforalternativefuels.org/wp-content/uploads/sites/2/2015/05/LinkedIn-Header-255x173.jpg" width="255" height="173" alt="" /> 

     <span> 
     </span> 

    </a> 

    <a href="http://centerforalternativefuels.org/alternative-fuel-deployment/cultivating-a-supportive-environment-for-alternative-fuel-vehicles/"> 

     <h3> 
     Cultivating a Supportive Environment for Alternative Fuel Vehicles 
     </h3> 

    </a> 

    <span class="post-cat"> 
     Alternative Fuels, Technology Innovation 
    </span> 

    <p class="post-excerpt"> 
     Because of the multitude of benefits they offer, alternative fuel vehicles (AFVs) provide a tantalizing investment prospect for many organizations However, valuation of these investments can vary significantly within an organization. 
    </p> 

    </li> 

    <li class="item"> 

    <a class="post-img fancybox-thumb" href="http://centerforalternativefuels.org/advanced-vehicles/heavy-duty-trucks-regulations-technology/"> 

    <img src="http://centerforalternativefuels.org/wp-content/uploads/sites/2/2014/08/Analyze-your-Fleet-center-for-alternative-fuels-carbonblu-255x173.jpg" width="255" height="173" alt="" /> 

     <span> 
     </span> 

    </a> 

    <a href="http://centerforalternativefuels.org/advanced-vehicles/heavy-duty-trucks-regulations-technology/"> 

    <h3> 
     How Regulations Advance Technology and Impact The Heavy Duty Truck Market 
    </h3> 

    </a> 

    <span class="post-cat"> 
    Advanced Vehicles, Technology Innovation 
    </span> 

    <p class="post-excerpt"> 
    The newest semi-trucks have a futuristic, streamline appearance more akin to a bullet train than the boxy workhorses that populated our highways over the last several decades. But it is function, not form, driving these changes. 
    </p> 

    </li> 

    <li class="item"> 

    <a class="post-img fancybox-thumb" href="http://centerforalternativefuels.org/fleet-optimization/nafa-fleet-accreditation/"> 

    <img src="http://centerforalternativefuels.org/wp-content/uploads/sites/2/2014/08/Get-funded-center-for-alternative-fuels-carbonblu-255x173.jpg" width="255" height="173" alt="" /> 

     <span> 
     </span> 

    </a> 

    <a href="http://centerforalternativefuels.org/fleet-optimization/nafa-fleet-accreditation/"> 

    <h3> 
     NAFA Fleet Accreditation 
    </h3> 

    </a> 

    <span class="post-cat"> 
    Fleet Optimization 
    </span> 

    <p class="post-excerpt"> 
    It’s no secret, companies and government agencies like to be seen doing the right thing. Cleaning up their fleet operations is one highly-visible way to broadcast their commitment to the environment. Take a short drive and you’re likely to see vehicles with words like “clean energy”, “low emissions”, or “green fleet” in careful juxtaposition with the company logo. 
    </p> 

    </li> 

    <li class="item"> 

    <a class="post-img fancybox-thumb" href="http://centerforalternativefuels.org/advanced-vehicles/advancing-alternative-fuels/"><img src="http://centerforalternativefuels.org/wp-content/uploads/sites/2/2015/03/center-for-alternative-fuels-news-255x173.jpg" width="255" height="173" alt="" /> 

    <span> 
    </span> 

    </a> 

    <a href="http://centerforalternativefuels.org/advanced-vehicles/advancing-alternative-fuels/"> 

    <h3> 
    Advancing Alternative Fuels 
    </h3> 

    </a> 

    <span class="post-cat"> 
    Advanced Vehicles, Alternative Fuels 
    </span> 

    <p class="post-excerpt"> 
    Organizational fleets have long been targeted as an ideal market for alternative fuels beginning with passage of the Alternative Motor Fuels Act in 1988. Although fleets are widely considered good candidates for alternative fuel vehicles (AFVs), advancing these new technologies through the fleet sector has proven difficult. <!--more--> 
    </p> 

    </li> 

    </ul> 

</div> 

</p> 

<p style="text-align: center;"> 

</div> 

</div> 

</p> 

</div> 

Мой сайт был настроен с помощью следующего CSS:

@media all and (min-width: 1179px) { 
.wrapper { 
    width: 1179px; 
} 
} 

@media all and (max-width: 1179px) { 
#main-menu .responsive-menu { 
display: block !important; 
position: absolute; 
top: -13px; 
right: -13px; 
} 
} 

@media all and (max-width: 1179px) { 
#main-menu .top-menu { 
display: none !important; 
} 
} 

#main-menu { 
margin-top: 14px; 
margin-right: -50px; 
} 

.top-menu > li { 
    margin-left: 24px; 
} 

.top-menu > li > a { 
    font-weight: 400; 
    font-size: 12px; 
} 

#custom-body { 
    margin-bottom: 1px; 
    margin-left: 60px; 
    margin-right: 60px; 
} 

.home .wrapper:nth-child(2) { 
    width:100%; 
} 

.page-id-1067 .wrapper:nth-child(2) { 
    width:100%; 
} 

#custom-header { 
    margin-bottom: 0px; 
    height: 490px !important; 
} 


.home .wrapper:nth-child(2) { 
    width:100%; 
} 

.page-id-1067 .wrapper:nth-child(2) { 
    width:100%; 
} 


/* Fix to Events Calendar plugin and Backer CSS issues */ 
#tribe-events-pg-template dt:after { 
    content: none; 
} 

.single-tribe_events #tribe-events-content .tribe-events-event-meta dt { 
    margin-right: 1em; 
    text-align:left; 
} 

/*Make sure there is no underline when hovering over links */ 
a:focus, a:hover { 
    text-decoration: none; 
} 

/* Removes 404 Not Found from Events page */ 
.tribe-events-page-template #page-title { 
    display: none; 
} 

/* Community Page edits - not a huge white footer */ 
.page-id-1134 #content { 
padding: 60px 0 0; 
} 
} 

Вы можете просмотреть этот вопрос на http://centerforalternativefuels.org на достаточно широком экране.

Answer 1

Интересно, что ваши пользовательские стили не заменяют ни один из соответствующих стилей, о которых вы спрашиваете.

Так, для справки, вот два стиля, которые делают разницу (в их нынешнем виде):

«контейнер» для записей:

.posts-grid { 
    list-style: none; 
    margin-left: -20px; 
    width: 110%; 
} 

И сами элементы списка:

.posts-grid .item { 
    float: left; 
    width: 255px; 
    margin: 0 20px; 
} 

Обратите внимание, что это легко увидеть - и даже настроить/играть с - если вы используете консоль разработчика вашего браузера в. Я настоятельно рекомендую использовать Chrome и познакомиться с консолью разработчика. Это мощный инструмент SUPER - я, честно говоря, не знаю, как мы эффективно работали, прежде чем они были у нас!

Так что, если вы заметите пару, если вещи пропали без вести/«неправильно» в тех стилей, которые должны быть скорректированы, чтобы делать то, что вы хотите:

1. Контейнер (.posts-grid) не имеют text-align: center на нем.
2. Предметы (.posts-grid .item) - float: left.

Итак, давайте назначим правильные стили:

.posts-grid { 
    list-style: none; 
    /* these two cause funkiness, so remove them: 
    margin-left: -20px; 
    width: 110%; */ 
    /* we want text-align center to center the items */ 
    text-align: center; 
} 

.posts-grid .item { 
    /* float jams to the left edge, so remove it: 
    float: left; */ 
    /* now to make them line up in a row, add display inline-block */ 
    display: inline-block; 
    /* and now they have "text-align center" inherited, so fix that */ 
    text-align: left; 
    width: 255px; 
    margin: 0 20px; 
} 

Где вы добавляете их в своих стилях от вас, но я думаю, что эти стили подходят для всего, что не «мобильной» версии (в котором все элементы стек вертикально в настоящее время на вашем сайте).