[Theme: Hatch] Changing Thumbnail Image Size on Homepage

Please post a link to sample page of your website.

The website is at – https://tdbarch.com/

Ideally the five smaller images towards the bottom would be changed into a larger images.

Well, You can change the size of the conataining elements of that images by changing the width and height properties of the following area around line 700 in your style.css

.home .hentry, .archive .hentry {
float: left;
width: 23.40425531914894%;
height: 150px;
margin: 0 2.127659574468085% 20px 0;
position: relative;
overflow: hidden;
}

You can increase the width and height of those containars as needed. Let me know if there are any other problems

The thumbnails are resizing server-side.
Are you sure there is nowhere in the dashboard defining this size?

The widths and heights of thumbnail images aren’t defined/ constrained through CSS

I dont agree with this. CSS can constrain the image sizes.

@juicehead

other than the above modification
around line 719 of the style.css find the following area and add the width attribute as specified below
.hentry .archive-thumbnail {
max-width: 100%;
width: 33.40425531914894%;
}

put the same value that you have specified above as the width.

Let me know if there are any other problems

I have all of thumbnail sizes worked out, but now I am having problems with getting the larger header image centered (not the logo.) I’m also wondering if there is a way to remove the text when you hover over the images on the homepage. Ideally I would like it gone altogether.

first find the area around line 689 in style.css
#header-banner {
width: 68.08510638297872%;
float: right;
}

and remove the contents so it will appear as
#header-banner {
}

Then find the the following around line 691

#header-banner img {
max-width: 100%;
}

and put some content so it will appear as

#header-banner img {
max-width: 100%;
margin-left: auto;
margin-right: auto;
display: block;
}

Now that i’ve gotten all that working i’ve run into yet another problem. On my page I am trying to set it so my images will be more centered. I tried to change the margin size in style.css, but that also affects the height of the header and makes it to low.

I’d also like to say thank you for all the help. I wouldn’t have been able to get this far without it.