Reduce blank spaces (gutter) on the blog page

  • Author
    Posts
  • #153698

    balamuthu
    Member

    Hi, I have switched to a new theme (Passenger) yesterday that has no sidebars which focuses on content. I like it, however, I want to see if I can increase the content horizontal length. Is it possible to make the blog content full size ? like remove or reduce the left/right gutter space and expand the blog content?

    Also, the feature image size cropped on the home page, what should be the size of it to display it properly ?

    http://www.balamuthu.com

    The blog I need help with is balamuthu.com.

    #153803

    binarymoon
    Theme Author

    Hi there – thanks for the message.

    1) Full width page content.

    We can change this with some custom css.

    .container,
    .page .main-content .the-content>*:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright):not(.wp-block-separator), 
    .single .main-content .the-content>*:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright):not(.wp-block-separator) {
        max-width: none
    }

    Looks a bit complicated but should do the job.

    2) Featured image

    The image should be 260 wide by 200 high.

    Thanks!

    #153865

    balamuthu
    Member

    Thank you, the feature image size worked.

    On Content full size, it worked and I was trying to make it 80% which looked perfect on the desktop browser however, on mobile, the width is too less. Is it possible to make the width to default size on mobile and iPad but make it to use 80% of width on the desktop browser ?

    #153995

    binarymoon
    Theme Author

    Sure – you can do this with a media query.

    
    .container,
    .page .main-content .the-content>*:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright):not(.wp-block-separator), 
    .single .main-content .the-content>*:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright):not(.wp-block-separator) {
        max-width: 80%;
    }
    
    @media only screen and ( max-width: 700px ) {
    
        .container,
        .page .main-content .the-content>*:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright):not(.wp-block-separator), 
        .single .main-content .the-content>*:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright):not(.wp-block-separator) {
            max-width: 100%;
        }
    
    }
    

The topic ‘Reduce blank spaces (gutter) on the blog page’ is closed to new replies.