Title: Decrease text width in posts only
Last modified: October 21, 2017

---

# Decrease text width in posts only

 *  Resolved [gdaytaiwan](https://wordpress.org/support/users/gdaytaiwan/)
 * (@gdaytaiwan)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/decrease-text-width-in-posts-only/)
 * Hi there
 * I like to decrease only the text portion of all blog posts on my website. So 
   instead of making changes to content width as I like to keep my photos as wide
   as possible, is there a CSS specifically for text only?
 * For example in this page: [https://www.gdaytaiwan.com/2017/10/03/minimosey-zhongshan/](https://www.gdaytaiwan.com/2017/10/03/minimosey-zhongshan/)
   
   I’d like to increase the padding on the left and right side or decrease the width
   for where there are block of texts (including titles). However images and captions
   will remain wide-screen.
 * I would like this to be on all resolutions bigger than mobile, and have the mobile
   version remain as is.
 * Many thanks.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fdecrease-text-width-in-posts-only%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 12 replies - 1 through 12 (of 12 total)

 *  [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * (@siobhyb)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/decrease-text-width-in-posts-only/#post-9609729)
 * Hi [@gdaytaiwan](https://wordpress.org/support/users/gdaytaiwan/). 🙂
 * If you first remove the following piece of custom CSS:
 *     ```
       .site {
           max-width: 100%;
       }
       ```
   
 * You could use the following to increase the width of the images in your posts
   on larger devices:
 *     ```
       @media screen and (min-width: 75em) {
           .site-content .gallery-columns-1.gallery a img {
               max-width: 140%;
               width: 140%;
               margin-left: -20%;
               margin-right: -20%;
           }
       }
       ```
   
 * Give that a try and let me know how it goes!
 *  Thread Starter [gdaytaiwan](https://wordpress.org/support/users/gdaytaiwan/)
 * (@gdaytaiwan)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/decrease-text-width-in-posts-only/#post-9614868)
 * Hi Siobhan
 * Thanks for your help! some of the photos are now full screen which I love! Could
   you also help me with a css for all other types of Jetpack galleries? ie. Tiled
   mosaic, square tiles, tiled columns etc. As you can see the single images are
   nicely full-screen, but the others aren’t: [https://www.gdaytaiwan.com/2017/10/03/minimosey-zhongshan/](https://www.gdaytaiwan.com/2017/10/03/minimosey-zhongshan/)
 * Also, I didn’t get rid of this code as you asked me to:
 *     ```
       .site {
           max-width: 100%;
       }
       ```
   
 * the reason being because once I do that, there is an obvious grey area on the
   left and right side. Is there a way I can still decrease the width of text / 
   increase margins for just the text area?
 *  [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * (@siobhyb)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/decrease-text-width-in-posts-only/#post-9616782)
 * > Could you also help me with a css for all other types of Jetpack galleries?
   > ie. Tiled mosaic, square tiles, tiled columns etc. As you can see the single
   > images are nicely full-screen, but the others aren’t: [https://www.gdaytaiwan.com/2017/10/03/minimosey-zhongshan/](https://www.gdaytaiwan.com/2017/10/03/minimosey-zhongshan/)
 * I’m afraid I’m not able to find a good, consistent way to get those galleries
   to take up more than 100% of the available screen width, due to the way a width
   is assigned to the images.
 * > Is there a way I can still decrease the width of text / increase margins for
   > just the text area?
 * If your main issue is with the grey bars, then I think the best approach is to
   remove that first bit of CSS then change the background of the body from grey
   to white with the following:
 *     ```
       body {
           background: #fff;
       }
       ```
   
 *  Thread Starter [gdaytaiwan](https://wordpress.org/support/users/gdaytaiwan/)
 * (@gdaytaiwan)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/decrease-text-width-in-posts-only/#post-9618269)
 * thanks Siobhan
 * The reason why I’m a little reluctant to move the
 *     ```
       .site {
           max-width: 100%;
       }
       ```
   
 * is because if I do that, I have to fix the width for header and front page. Unless
   there are css to help me keep everything else the way it is, I only want to do
   the text. I tried playing around with some code and this is what I’ve done which
   has helped me increase the padding to some of the text. However this affects 
   pages and posts, and I only want to change the width on single posts. I also 
   need text subheadings and columns to line up. Not sure if you could help me elaborate
   it:
 * `p {margin:30px 200px;}`
 * as an example the post I need help with is: [https://www.gdaytaiwan.com/2017/10/03/minimosey-zhongshan/](https://www.gdaytaiwan.com/2017/10/03/minimosey-zhongshan/)
    -  This reply was modified 8 years, 7 months ago by [gdaytaiwan](https://wordpress.org/support/users/gdaytaiwan/).
 *  [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * (@siobhyb)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/decrease-text-width-in-posts-only/#post-9618823)
 * Could you try the following to only reset the width on single posts?
 *     ```
       .single-post .site {
           width: auto;
       }
       ```
   
 *  Thread Starter [gdaytaiwan](https://wordpress.org/support/users/gdaytaiwan/)
 * (@gdaytaiwan)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/decrease-text-width-in-posts-only/#post-9654116)
 * thanks Siobhan
 * Unfortunately that doesn’t seem to help. It reverts the layout to the default
   two column and then the home page is affected by removing the max width for the
   site which I want it to stay as it is.
 * Would you know what the CSS is for me to change the width of all headings and
   columns in single posts only?
 *  [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * (@siobhyb)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/decrease-text-width-in-posts-only/#post-9654533)
 * [@gdaytaiwan](https://wordpress.org/support/users/gdaytaiwan/): It wouldn’t be
   necessary for you to remove the **max-width** of your site if you added the above
   custom CSS, you could add it at the end of your custom CSS so that the home page
   isn’t impacted. I can’t think of a good way to increase the width of your images
   on single posts without overriding that **max-width**.
    -  This reply was modified 8 years, 7 months ago by [Siobhan](https://wordpress.org/support/users/siobhyb/).
 *  Thread Starter [gdaytaiwan](https://wordpress.org/support/users/gdaytaiwan/)
 * (@gdaytaiwan)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/decrease-text-width-in-posts-only/#post-9655074)
 * Oh Thank you! I misunderstood you about removing the max-width! now everything
   works fine just like how I wanted.
 * Thanks very much for your patience and help!
 *  Thread Starter [gdaytaiwan](https://wordpress.org/support/users/gdaytaiwan/)
 * (@gdaytaiwan)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/decrease-text-width-in-posts-only/#post-9657202)
 * Hi Siobhan sorry before I let this one go completely, I noticed that the photos
   are only enlarged on larger resolutions, not on mobile.
 * Is there another code I can use to make the photos on smaller screens also full
   width?
 * Let me know if I should just open up a new ticket.
 * Thank you!
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/decrease-text-width-in-posts-only/#post-9671478)
 * Hi [@gdaytaiwan](https://wordpress.org/support/users/gdaytaiwan/) – I’m taking
   over this thread for Siobhan.
 * I’ve read over what’s been done so far but I’m not 100% sure about what you would
   like to see now on smaller screens.
 * The CSS Siobhan gave you earlier applies to screens larger than 75em:
 * `@media screen and (min-width: 75em) {`
 * Would it be possible to explain in a little more detail what you want? This is
   what I see now on smaller screens:
 * [⌊10 Mini Moseys Central Zhongshan District⌉⌊10 Mini Moseys Central Zhongshan
   District⌉[
 * It looks good to me as is, but if you’re looking for a different effect, I’d 
   be happy to help you get there! Would you just like more empty space to the right
   and left of the text on smaller screens? Let me know.
 *  Thread Starter [gdaytaiwan](https://wordpress.org/support/users/gdaytaiwan/)
 * (@gdaytaiwan)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/decrease-text-width-in-posts-only/#post-9680106)
 * Thanks Kathryn
 * Yes i just realised for some reason that single blog post has different sized
   images to the other recent posts I’ve published. It’s supposed to look like this:
   
   [https://www.gdaytaiwan.com/2017/09/01/another-blog-sun-moon-lake-not/](https://www.gdaytaiwan.com/2017/09/01/another-blog-sun-moon-lake-not/)
 * Could you help me make that post the same size with how it should be? I went 
   through the CSS and I don’t see why that single post is unique to the others.
 * And regarding images on smaller resolutions, I would like the images to also 
   be full screen, so no empty space on the left and right of the image.
 * Many thanks Kathryn!
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/decrease-text-width-in-posts-only/#post-9703349)
 * > Yes i just realised for some reason that single blog post has different sized
   > images to the other recent posts I’ve published. It’s supposed to look like
   > this:
   >  [https://www.gdaytaiwan.com/2017/09/01/another-blog-sun-moon-lake-not/](https://www.gdaytaiwan.com/2017/09/01/another-blog-sun-moon-lake-not/)
   > Could you help me make that post the same size with how it should be? I went
   > through the CSS and I don’t see why that single post is unique to the others.
 * Looks like this part of your CSS is the culprit – those 200% values are telling
   the images within that specific gallery element to be twice as wide as their 
   containing element, on screens at least 75em wide:
 *     ```
       @media screen and (min-width: 75em) {
           .site-content .gallery-columns-1.gallery a img {
               max-width: 200%;
               width: 200%;
               margin-left: -100%;
               margin-right: -100%;
           }
       }
       ```
   
 * It’s coming from your custom CSS:
 * [https://www.gdaytaiwan.com/?custom-css=64503ef411](https://www.gdaytaiwan.com/?custom-css=64503ef411)

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Decrease text width in posts only’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/sketch/1.2.4/screenshot.png)
 * Sketch
 * [Support Threads](https://wordpress.org/support/theme/sketch/)
 * [Active Topics](https://wordpress.org/support/theme/sketch/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/sketch/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/sketch/reviews/)

 * 12 replies
 * 3 participants
 * Last reply from: [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * Last activity: [8 years, 6 months ago](https://wordpress.org/support/topic/decrease-text-width-in-posts-only/#post-9703349)
 * Status: resolved