WordPress.org

Ready to get started?Download WordPress

Forums

[Theme: Hatch] Changing Thumbnail Image Size on Homepage (9 posts)

  1. JuiceHead
    Member
    Posted 1 year ago #

    Using the hatch theme I wondering how you can change the thumbnail image size on the homepage. I am looking to make a portfolio style site and would ideally have larger image thumbnails. Any help would be appreciated.

  2. udaraaka
    Member
    Posted 1 year ago #

    Please post a link to sample page of your website.

  3. JuiceHead
    Member
    Posted 1 year ago #

    The website is at - http://tdbarch.com/

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

  4. udaraaka
    Member
    Posted 1 year ago #

    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

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  6. udaraaka
    Member
    Posted 1 year ago #

    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

  7. JuiceHead
    Member
    Posted 1 year ago #

    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.

  8. udaraaka
    Member
    Posted 1 year ago #

    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;
    }

  9. JuiceHead
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags