Welcome to WebmasterWorld Guest from 34.238.194.166

Forum Moderators: not2easy

Message Too Old, No Replies

Tweak CSS to enlarge thumbnail

Image keeps overlapping title of post

     
12:48 pm on Mar 17, 2016 (gmt 0)

New User

joined:Mar 17, 2016
posts: 3
votes: 0


I'm trying to enlarge the current thumb on the homepage from 100x70 to say 150x115. The problem is that the enlarged thumb overlaps the adjacent title of the post. I want the thumb to enlarge and the title text to wrap around the thumb. It's supposed to be simple, but I'm out of tries.

[edited by: not2easy at 3:15 pm (utc) on Mar 17, 2016]
[edit reason] TOS compliance [/edit]

3:20 pm on Mar 17, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4391
votes: 310


Hello sdari and welcome to the forums. If you can share the code you are trying to work with you can get help to resolve the problem.

In general the size of an image is controlled by the size of the container <div> it is in and by the size of the actual image and by the css attributes for the image and for the container.
4:37 pm on Mar 17, 2016 (gmt 0)

New User

joined:Mar 17, 2016
posts: 3
votes: 0


Thank you @not2easy. This is the code I'm trying to work with. I try to change the image dimensions from 100x70 to 150x115 but then it overlaps the title and comes out of the block/module.

<div class="td-module-thumb"><a href="https://www.example.com/page/" rel="bookmark" title="example"><img width="100" height="70" class="entry-thumb td-animation-stack-type0-1" src="https://www.example.com/wp-content/uploads/2016/03/9-100x70.jpg" alt="" title="example"></a></div>

[edited by: not2easy at 5:59 pm (utc) on Mar 17, 2016]
[edit reason] TOS/charter compliance [/edit]

6:17 pm on Mar 17, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4391
votes: 310


And the css you are using, can you share that as well? I don't see the html that surrounds this div with the image and the container with both the image and title element that is being overlapped.
1:37 pm on Mar 18, 2016 (gmt 0)

New User

joined:Mar 17, 2016
posts:3
votes: 0


@not2easy I started thinking and tinkering with container and attributes like you said, and the thing is, when you enlarge the image, everything else cannot just adjust "itself", which makes coding sense. I'll stick with this theme for now and if a need arises, will get a developer.