Welcome! To use this support forum, please Login or Join Today!

   

Chrome / Safari Issue with Featured Images on Homepage

{name}
Rank

Total Posts: 23

Joined 2012-02-01

PM

 

Hi,
I just ported over one of my blogs to Presstige and noticed a rendering problem in Chrome & Safari.
My featured image thumbnails are set to be 630x210.

Have a look at the home page on my blog (and the attached screenshot):
http://www.blogwebdesigner.com

Notice that the first line of the text in the post is displayed over the top of the image (only in Chrome & Safari).
When you click through to a post, it renders ok.

If I set the thumbnail size to something smaller (like 200x200) this issue does not occur since all the text appears to the right of the image.

Can you help?
Thanks,
Kirk.

Image Attachments

render-issue.jpg

Click thumbnail to see full-size image

{name}
Rank

Total Posts: 23

Joined 2012-02-01

PM

 

Hi,
Since my site is live… I had to make a quick fix.

master.css, change:

.post-thumb {
    margin
0px 15px 5px 0px;
    
floatleft;

to

.post-thumb {
    margin
0px 15px 5px 0px;
    
floatnone;

Now… this works in my case where the thumbnail is the width of the content pane, but you would not want to do that if your thumbnails are 200x200 (since you want the text to be right of the image).

What do you suggest so it works in both cases?

Thanks,
Kirk.

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

You could use a body class selector to single out other post types/categories where you use a smaller post thumb.

/* for larger post images on home page */

body.home .post-thumb {
    margin: 0px 15px 5px 0px;
    float: none;
}

/* for smaller post images on archive pages */

body.archive .post-thumb {
    margin: 0px 15px 5px 0px;
    float: left;
}  

Great looking site btw!

{name}
Rank

Total Posts: 23

Joined 2012-02-01

PM

 

Ok cool, I’ll do that.
Thanks,
Kirk.