Decrease featured photo on top of summary on blog index

Home › Forums › Automattic › Forefront › Decrease featured photo on top of summary on blog index

Tagged: , , , , , ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • August 15, 2013 at 10:47 am #107903 Resolve

    theeagertraveller

    I just noticed that upon expanding the content width (http://premium-themes.forums.wordpress.com/topic/decrease-empty-space-after-sidebar-and-increase-content-width?replies=7), the featured photo above the post summary overlaps with the sidebar on the right.

    Hence, there are portions of the photos that are seen in the small spaces between the first few widgets.

    Is there a code to decrease only the featured photo on the blog index (or as long as there is a sidebar) just before the sidebar? I’m happy with the width of the summary posts on the left.

    Cheers

    The blog I need help with is theeagertraveller.com
    August 16, 2013 at 3:06 am #138434

    Michelle

    Hi there, this should prevent the featured image from overflowing into the widget area:

    .blog-thumbnail {
    
margin-right: 0;
    
}

    August 16, 2013 at 3:10 am #138435

    theeagertraveller

    Hi there – thanks but when I placed the CSS, the featured photo shrunk drastically. :( the result was an inch of empty space between the featured photo and the sidebar.

    August 16, 2013 at 3:34 am #138441

    Michelle

    Hmm, that was not the result I got, my apologies! I’ll look into this more tomorrow and will get back to you!

    August 16, 2013 at 3:37 am #138442

    theeagertraveller

    No problem, thanks

    August 16, 2013 at 4:29 am #138446

    theeagertraveller

    Actually, I just noticed that there’s nothing wrong with the featured photo on the posts page.

    It’s when the post is opened that the featured photo is overlapping with the sidebar and also there is a nasty gray background (with slanted lines) behind the first widget.

    See the post page is fine,

    http://theeagertraveller.com/blog/

    But when a posts or category page is opened for instance,

    http://theeagertraveller.com/2013/08/10/spontaneous-weekend-in-pangasinan-pretty-tipsy-nail-salon-lady-of-manaoag-meat-and-greet-sausages-and-san-fabian-beach/

    -or-

    http://theeagertraveller.com/category/philippines/

    Thanks

    August 16, 2013 at 9:45 pm #138460

    Michelle

    Hi Jean,

    I took a closer look at this. Can you give this CSS a try?

    This will hide the striped background pattern: 

    .blog-thumbnail {
    
background: none;
    
}

    And this should help the featured image fit better: 

    @media (min-width: 1110px) {
    
.single .blog-thumbnail {
    
margin-left: -29px;
    
max-width: 71%;
    
}
    
}

    August 16, 2013 at 10:09 pm #138464

    theeagertraveller

    Item 1 – worked perfectly, thanks

    Item 2 – worked when opening a post but didn’t work for category pages. For instance, http://theeagertraveller.com/category/china/

    August 19, 2013 at 7:14 pm #138568

    Michelle

    Hi Jean,

    Ah, that’s because I specified in the CSS to only apply the code for single posts.

    Try changing that second block of code to: 

    @media (min-width: 1110px) {
    
.single .blog-thumbnail,
    
.archive .blog-thumbnail {
    
margin-left: -29px;
    
max-width: 71%;
    
}
    
}

    August 19, 2013 at 11:04 pm #138587

    theeagertraveller

    Hi Michelle, Unfortunately I can’t see if this has worked already because there’s something funky happening on my posts page and the rest of the pages (i.e. category pages, individual posts).

    1. The featured photo, rather the whole left side of the page is indented, there’s an inch space between the photo and start of the content column.

    2. The post summary is not aligned to the featured photo above.

    3. The title per post is indented unnecessarily, hence overlapping with the sidebar on the right.

    4. The preview when I customize looks fine but not when I check the actual blog.

    If you could look into this urgently, that would be much appreciated.

    Thanks

    August 20, 2013 at 5:40 am #138617

    Michelle

    Hi Jean,

    I’ve replied to this over here. Let me know on that thread if things have improved!

    August 20, 2013 at 10:12 am #138633

    theeagertraveller

    Hi Michelle,

    Thanks for explaining this.

    Is there a code to override the responsiveness of the theme only when it comes to wide screens or expanding the browser? It looks fine when viewing it it a normal sized window.

    What I mean, to avoid any confusion, was to maintain the content and sidebar width despite expanding the browser window.

    I tried opening the page normally and looked awful when I expanded the browser because the content overlapped with the sidebar on the right :( And I’m afraid I have no control whatsoever on how large the viewer prefers to read my site with.

    Lastly, on the CSS code provided,

    1. Thanks but it didn’t look nice since it expanded the widget sidebar drastically which was never my intention.

    2. Nothing happened, and there’s still a square behind the post title causing an empty rectangle overlap on top of the post featured photo. I noticed that this rectangle also overlaps with the sidebar on the right.

    Appreciate if you could help with this.

    Thanks.

    August 20, 2013 at 10:13 am #138634

    theeagertraveller

    Copy and thanks Michelle. Will be responding on the other thread.

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Decrease featured photo on top of summary on blog index’ is closed to new replies.