image container or lining up images

  • Hello,

    I’m trying to make the images in my site line up somewhat, so at least the ‘add to basket’ button is lined up across the page. Or even put the images in a container that’s a fixed size irrespective of what size the product image is.

    The way I would like is some kind of invisible container that has the image inside it and the page buttons are lined up on that container and not the edges of the image.

    I have zero knowledge of CSS and I am using the Woocommerce Storefront theme.

    A good example of the problem can be found on this page https://drweld.co.uk/product-category/welding/mig-welding/mig-torches-consumables/binzel-style-mb15/

    I’m sure I could probably resize all the images in image manipulation software but that seems like a long-winded way to solve this issue.

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

Viewing 2 replies - 1 through 2 (of 2 total)

  • Go to https://www.codecademy.com/catalog/language/html-css and take the first two courses. HTML and CSS. It will help you.

    As far as customizing the theme, I suggest you ask at the theme developers support page.

    Some basic custom css can fix your issue:

    
ul.products li.product {
    min-height: 300px;
    border: 1px solid #eee;
    padding-top: 4px;
}
ul.products li.product .woocommerce-LoopProduct-link {
    min-height: 245px;
}

    try that

    Thread Starter drwelduk

    (@drwelduk)

    Thanks for the reply. I will take a look at the courses you linked.

    It’s sort of worked, but there was issues. I have removed all the pictures now but I’m still getting problems with the ‘add to basket’ button not aligning.

    I have made another post in the storefront theme forum about this

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘image container or lining up images’ is closed to new replies.