Change preview image size?

  • Resolved nekobaby

    (@nekobaby)


    5 years, 11 months ago

    Hello,
    I was wondering what code I would need to change to make the preview image sizes smaller. I love the layout/design of the Hamilton theme, but I find the preview images for the posts to be really large and I’d like to reduce them.

    Also, is it possible to change the shape to a square?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • AddWeb Solution

    (@addweb-solution-pvt-ltd)

    Hello nekobaby,

    Add below css code into your current active child theme’s style.css file or you can add additional css option in theme customizer

    .preview-image img {
    height: 292px !important;
}

    Hope this will helps you.

    Thanks.

    Theme Author Anders Norén

    (@anlino)

    Hi @nekobaby,

    You can change the number of images per row to four on desktop by going to Appearance → Customize → Additional CSS (the menu labels might be different in your language), where you enter the following code:

    @media (min-width: 1001px) {
    .posts .post-preview {
        width: 25%;
    }
}

    To get square images, add the following below the first block of code:

    .post-preview {
	overflow: hidden;
}

.post-preview:before {
    content:"";
    display: block;
    padding-top: 100%;
    width: 100%;
}

.preview-image {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    top: 10px;
}

    This will keep the images square on all screen sizes.

    — Anders

    • This reply was modified 5 years, 11 months ago by Anders Norén.
    • This reply was modified 5 years, 11 months ago by Anders Norén.
    Thread Starter nekobaby

    (@nekobaby)

    That’s brilliant! Thank you for the help!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change preview image size?’ is closed to new replies.