thisFunkinGuy thisFunkinGuy - 3 months ago 12
CSS Question

Keeping a WP shortcode element centered using media query

I am using the Krown Backer theme, and I am using a Krown shortcode to display a specified number of my latest posts on the home page. However, once my site is displayed on a wider screen, the posts migrate to the left side of the screen.

I want to make center the posts element and keep the element centered as the screen gets wider.

Here is the rendered 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>


My site has been customized using the following 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;
}
}


You can view the issue at http://centerforalternativefuels.org on a wide enough screen.

Answer

Interesting, it doesn't appear that your custom styles overwrite any of the relevant styles you are asking about.

So, for reference, here are the two styles that make a difference (in their CURRENT form):

The "container" for the entries:

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

And the list items themselves:

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

Note that these are easy to see - and even adjust / play with - if you use your Browser's Developer's Console. I'd strongly recommend using Chrome and getting to know the Developer's Console. It's a SUPER powerful tool - I honestly don't know how we did development efficiently before we had them!

So, if you'll notice a couple if things are missing / "wrong" in those styles, that need to be adjusted, to do what you want:

  1. The container (.posts-grid) does not have text-align: center on it.
  2. The items (.posts-grid .item) are float: left.

So, let's assign the correct styles:

.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;
}

Where you add these in your styles is up to you, but I think these styles are appropriate for everything that is not "mobile" version (in which all elements stack vertically currently in your site).