Title: Full width image when centered content Last modified: August 30, 2016 --- # Full width image when centered content * [karinlin](https://wordpress.org/support/users/karinlin/) * (@karinlin) * [10 years, 10 months ago](https://wordpress.org/support/topic/full-width-image-when-centered-content/) * I would like to have full width images on my site, but I would like the text content to NOT be full width since it’s hard to read. * How can I change either the text content width OR the image width? * These are my options now: – When I set the default layout to be centered the text is a good with but the images are then too small. * – When I set the default layout to fullwidth both text and images are fullwidth, then I would like to set the text width to smaller. * Can you please help me? Viewing 15 replies - 1 through 15 (of 27 total) 1 [2](https://wordpress.org/support/topic/full-width-image-when-centered-content/page/2/?output_format=md) [→](https://wordpress.org/support/topic/full-width-image-when-centered-content/page/2/?output_format=md) * [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [10 years, 10 months ago](https://wordpress.org/support/topic/full-width-image-when-centered-content/#post-6377136) * 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 * Thread Starter [karinlin](https://wordpress.org/support/users/karinlin/) * (@karinlin) * [10 years, 10 months ago](https://wordpress.org/support/topic/full-width-image-when-centered-content/#post-6377204) * Hi Bojan, thanks for your quick reply. Here is my webpage: [http://karintri.com/](http://karintri.com/) * I have now set it the default layout to centered. The site layout is set to “ Boxed layout with content width of 1218px” * Please let me now how to change the css. * [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [10 years, 10 months ago](https://wordpress.org/support/topic/full-width-image-when-centered-content/#post-6377261) * 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](http://screencast.com/t/ANo5GBlvF). * Hope this helps 🙂 * Cheers, Bojan * Thread Starter [karinlin](https://wordpress.org/support/users/karinlin/) * (@karinlin) * [10 years, 10 months ago](https://wordpress.org/support/topic/full-width-image-when-centered-content/#post-6377262) * Hi Bojan, Thanks for your help. I tried to enter that code snippet into the Custom CSS, and it looks good on the first post. However, the following posts( after the full width picture) now have the text full width again? Same when you click into the post-pages, only the first one have the text centered. * Do you know how I could fix this? Thank you! * [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [10 years, 10 months ago](https://wordpress.org/support/topic/full-width-image-when-centered-content/#post-6377268) * 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): * ``` ``` * 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 * Thread Starter [karinlin](https://wordpress.org/support/users/karinlin/) * (@karinlin) * [10 years, 10 months ago](https://wordpress.org/support/topic/full-width-image-when-centered-content/#post-6377271) * Perfect, thank you so much! * [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [10 years, 10 months ago](https://wordpress.org/support/topic/full-width-image-when-centered-content/#post-6377280) * Glad I could help 🙂 * Have a nice day! * Cheers, Bojan * Thread Starter [karinlin](https://wordpress.org/support/users/karinlin/) * (@karinlin) * [10 years, 10 months ago](https://wordpress.org/support/topic/full-width-image-when-centered-content/#post-6377358) * Hi again, Could you please help me with a little detail about the pictures? How do I set all the pictures to be centered, say in old posts where the width isn’t wide enough, I would like them centered. Now they are to the left. * [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [10 years, 10 months ago](https://wordpress.org/support/topic/full-width-image-when-centered-content/#post-6377359) * 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 * Thread Starter [karinlin](https://wordpress.org/support/users/karinlin/) * (@karinlin) * [10 years, 10 months ago](https://wordpress.org/support/topic/full-width-image-when-centered-content/#post-6377360) * yeah sure, here it is: * [http://karintri.com/2014/08/24/race-report-ironman-kalmar-2014/](http://karintri.com/2014/08/24/race-report-ironman-kalmar-2014/) [http://karintri.com/2013/11/18/race-report-ironman-florida-2013/](http://karintri.com/2013/11/18/race-report-ironman-florida-2013/) * Thanks! * [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [10 years, 10 months ago](https://wordpress.org/support/topic/full-width-image-when-centered-content/#post-6377361) * 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 * Thread Starter [karinlin](https://wordpress.org/support/users/karinlin/) * (@karinlin) * [10 years, 10 months ago](https://wordpress.org/support/topic/full-width-image-when-centered-content/#post-6377362) * Great, thanks for your help! * [db3online](https://wordpress.org/support/users/db3online/) * (@db3online) * [10 years, 10 months ago](https://wordpress.org/support/topic/full-width-image-when-centered-content/#post-6377363) * when ever internet speed is slow my template and theme cant uploaded clearly. its all interface get distracted _[Non-WordPress website redacted]_ * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 10 months ago](https://wordpress.org/support/topic/full-width-image-when-centered-content/#post-6377364) * [@db3online](https://wordpress.org/support/users/db3online/), create a new thread please: [https://wordpress.org/support/forum/how-to-and-troubleshooting#postform](https://wordpress.org/support/forum/how-to-and-troubleshooting#postform) * [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [10 years, 10 months ago](https://wordpress.org/support/topic/full-width-image-when-centered-content/#post-6377365) * Glad I could help 🙂 * Cheers, Bojan Viewing 15 replies - 1 through 15 (of 27 total) 1 [2](https://wordpress.org/support/topic/full-width-image-when-centered-content/page/2/?output_format=md) [→](https://wordpress.org/support/topic/full-width-image-when-centered-content/page/2/?output_format=md) The topic ‘Full width image when centered content’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/spacious/1.9.12/screenshot.jpg) * Spacious * [Support Threads](https://wordpress.org/support/theme/spacious/) * [Active Topics](https://wordpress.org/support/theme/spacious/active/) * [Unresolved Topics](https://wordpress.org/support/theme/spacious/unresolved/) * [Reviews](https://wordpress.org/support/theme/spacious/reviews/) * 27 replies * 5 participants * Last reply from: [karinlin](https://wordpress.org/support/users/karinlin/) * Last activity: [10 years, 8 months ago](https://wordpress.org/support/topic/full-width-image-when-centered-content/page/2/#post-6377467) * Status: not resolved