i using krown backer theme, , using krown shortcode display specified number of latest posts on home page. however, once site displayed on wider screen, posts migrate left side of screen.
i want make center posts element , keep element centered screen gets wider.
here 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 supportive environment alternative fuel vehicles </h3> </a> <span class="post-cat"> alternative fuels, technology innovation </span> <p class="post-excerpt"> because of multitude of benefits offer, alternative fuel vehicles (afvs) provide tantalizing investment prospect many organizations however, valuation of these investments can vary within 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 , impact heavy duty truck market </h3> </a> <span class="post-cat"> advanced vehicles, technology innovation </span> <p class="post-excerpt"> newest semi-trucks have futuristic, streamline appearance more akin bullet train boxy workhorses populated our highways on last several decades. 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 , government agencies seen doing right thing. cleaning fleet operations 1 highly-visible way broadcast commitment environment. take short drive , you’re see vehicles words “clean energy”, “low emissions”, or “green fleet” in careful juxtaposition 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 ideal market alternative fuels beginning passage of alternative motor fuels act in 1988. although fleets considered candidates alternative fuel vehicles (afvs), advancing these new technologies through 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 following css:
@media , (min-width: 1179px) { .wrapper { width: 1179px; } } @media , (max-width: 1179px) { #main-menu .responsive-menu { display: block !important; position: absolute; top: -13px; right: -13px; } } @media , (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 > { 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 events calendar plugin , 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 no underline when hovering on links */ a:focus, a:hover { text-decoration: none; } /* removes 404 not found events page */ .tribe-events-page-template #page-title { display: none; } /* community page edits - not huge white footer */ .page-id-1134 #content { padding: 60px 0 0; } } you can view issue @ http://centerforalternativefuels.org on wide enough screen.
interesting, doesn't appear custom styles overwrite of relevant styles asking about.
so, reference, here 2 styles make difference (in current form):
the "container" entries:
.posts-grid { list-style: none; margin-left: -20px; width: 110%; } and list items themselves:
.posts-grid .item { float: left; width: 255px; margin: 0 20px; } note these easy see - , adjust / play - if use browser's developer's console. i'd recommend using chrome , getting know developer's console. it's super powerful tool - don't know how did development efficiently before had them!
so, if you'll notice couple if things missing / "wrong" in styles, need adjusted, want:
- the container (
.posts-grid) not havetext-align: centeron it. - the items (
.posts-grid .item)float: left.
so, let's assign correct styles:
.posts-grid { list-style: none; /* these 2 cause funkiness, remove them: margin-left: -20px; width: 110%; */ /* want text-align center center items */ text-align: center; } .posts-grid .item { /* float jams left edge, remove it: float: left; */ /* make them line in row, add display inline-block */ display: inline-block; /* , have "text-align center" inherited, fix */ text-align: left; width: 255px; margin: 0 20px; } where add these in styles you, think these styles appropriate not "mobile" version (in elements stack vertically in site).
Comments
Post a Comment