Full width image when centered content

Hey there karinlin,

How are you doing today?

Would you mind posting link to your site where I can see this with the first option set up for example and we can try to increase image size with some CSS.

Best regards,
Bojan

Hey again karinlin,

Thanks for the link, I’ve checked your site and you should be able to achieve that by adding the following CSS code to Appearance -> Theme Options -> Design -> Custom CSS:

div#primary {
    width: 100%;
}

div#primary .entry-content p span {
    display: block;
    width: 61.5763547%;
    margin-left: auto;
    margin-right: auto;
}

This should be the result http://screencast.com/t/ANo5GBlvF.

Hope this helps 🙂

Cheers,
Bojan

Hey again karinlin,

Sorry about that, that was completely my bad. When I checked that page the first time I saw that text inside p element is placed in span so I just assumed they all are and never actually scrolled down to check the rest.

After checking again there is no way we can target p elements that has only text and no image with just CSS since images are also placed in p elements so we’ll have to use some jQuery for this. Please try placing this at the end of your theme functions.php (Ideally you’d want to use child theme so you don’t lose changes when you update the theme):

<?php
add_action('wp_footer','my1_javascript_function');
function my1_javascript_function(){
?>
<script>
jQuery(function(){
;(function ($) {$(function () {$(".entry-content p").each(function() {var $me = $(this); if ($me.find("a img").length) return true; $me.closest("p").addClass("reducewidth"); } ); }); })(jQuery);
})
</script>
<?php
}
?>

This script will search for p elements that are not having img inside them and add class to those p elements which we can later use to reduce the width with CSS.

When done with that replace the CSS code I provided above with this one:

div#primary {
    width: 100%;
}

.reducewidth {
width: 61.5763547%;
margin-left: auto;
margin-right: auto;
}

This should fix it on both blog and single post pages.

Hope this helps 🙂

Cheers,
Bojan

Glad I could help 🙂

Have a nice day!

Cheers,
Bojan

Hey again,

Sure thing 🙂

Can you just give me few examples (links) where this happens so I don’t have to search for it on your site? I tried looking but couldn’t find those images.

Best regards,
Bojan

Hey again,

Please try adding the following:

.single .entry-content p a img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

This should center content images on your single post pages.

Best regards,
Bojan

when ever internet speed is slow my template and theme cant uploaded clearly.its all interface get distracted [Non-WordPress website redacted]

Glad I could help 🙂

Cheers,
Bojan