Home › Forums › Automattic › Forefront › Decrease featured photo on top of summary on blog index
-
AuthorPosts
-
theeagertravellerMemberI 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.comAugust 16, 2013 at 3:06 am #138434
MichelleHi 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
theeagertravellerMemberHi 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
MichelleHmm, 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
theeagertravellerMemberNo problem, thanks
August 16, 2013 at 4:29 am #138446
theeagertravellerMemberActually, 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,
-or-
http://theeagertraveller.com/category/philippines/
Thanks
August 16, 2013 at 9:45 pm #138460
MichelleHi 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
theeagertravellerMemberItem 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
MichelleHi 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
theeagertravellerMemberHi 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
MichelleHi 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
theeagertravellerMemberHi 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
theeagertravellerMemberCopy and thanks Michelle. Will be responding on the other thread.
-
AuthorPosts
The topic ‘Decrease featured photo on top of summary on blog index’ is closed to new replies.