CSS help with image resize and spacing

HTML & CSS
1

Hello,

I am working on my dev site and cannot seem to resize the image properly and make the proper spacing.

Here is a screenshot of what I mean: http://wv.cloudaccess.host/screenshot.png
Here is the development site URL: http://wv.cloudaccess.host/devsite

If anyone can help on where to insert the image width and height, along with reducing space. The smaller the image gets, the bigger gap / spacing between the image and the text is.

Thank you

2

Looks fine to me as it is unless I’m missing something?

I don’t see a gap as big as the one in your drawing (in chrome at least).

3

It looks like you solved the issue by some media queries, is this not a problem any longer?

If not, I guess you want the space stay the same regardless of the images’ size? If so you could abandon the absolute position of the thumb part and:

– Use css table-row-cell displays, but that would require a restructuring of the html to get the same layout column wise.

– Or you could use float to let the item details left edge follow the thumb with a margin. E.g.:

.td_module_10 .td-module-thumb {
    /* position: absolute; */
    /* left: 0; */
    /* top: 0; */
    float: left;
    margin-right: 20px;
}
.td_module_10 .item-details {
    /* margin-left: 244px; */
    min-height: 150px;
    overflow: hidden;
}

I think the image sizes could be as they are. But you could also let the images be sized by css to adapt to its container.

Please tell what the desired display is.

4

Hi Erik,

I need to resize my image (width: 175px; height: 100px;)

How do I do that? Because I tried to do it last time and it expanded the space in between the image and the text link.

Thanks

5

I restored a backup because when I resized the image, it made a huge space.

So my question here would be the same I asked Erik. How do I resize my image? And once I do, there will be a huge gap beside it, I would need to adjust that. All in CSS. Seems very simple, but I cannot solve it.

Thanks for the help.

1 Like
6

I’m not sure what you are asking? The 175x100 doesn’t keep the image ratio so that would be better done in an image editor where you can resize and crop to another ratio.

The space is set by a large left margin on the “.item-details” that is changed by media queries. The “.td-module-thumb” has position absolute placed in the space left by that left margin and its width and the left margin is changed together by media queries.
(I think you knew that anyway. )

7

Hi Erik,

I am not worried about the image ratio. I have a tool that will resize them all. Even without the ratio, I need to know where in the CSS to specify the width: 175px and height: 100px?

After I resize, I will look into the “item-details” and see what to do to take out the gap beside the picture.

Thanks.

8

Your" style.css" has set all image tags to 100% width. To set only those images you could create a new rule using their class “.entry-thumb”. E.g.:

img.entry-thumb {
    width: 170px;
    height: auto; /* height by ratio */
}
1 Like
9

Thanks Erik. That’s the code I was overlooking. It’s what I needed. It fixed the image resize.

Now, I am breaking my head trying to fix the space / gap beside the picture on its right side. I tried in item-details and it didn’t work. Any idea?

Many thanks for your help and patience.

10

Just figured it out.

Many thanks Erik for your help.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.