Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 20, 2020 at 10:46 am #1214612
    Nin0

    Hello support team,

    I would like to ask if it’s possible to style the product category overview? I know that the size of the image is important, but I would like the box to have the same height.
    Please take a look at the examples. Also, is it possible to have the name of the category centered in the middle and apply some padding?

    Thanks,
    Best regards,
    Nin0

    May 20, 2020 at 10:07 pm #1214799
    Jordan Shannon

    Hey Nin0,

    Add this to quick css:

    #top .products .product-category {
    max-height: 400px!important;
    height: 300px!important;
    text-align: center!important;
    min-height: 300px!important;
}

    Best regards,
    Jordan Shannon

    May 20, 2020 at 10:26 pm #1214817
    Nin0

    Hi Jordan,

    Tnx for the quick reply. I used the css code you provided, but this only centers the name of the category without the padding.
    The size of category boxes are the same. I could change the min-height to a higher value, but then all the product boxes have that fixed value.
    Even the small ones.

    Best regards,
    Nin0

    May 20, 2020 at 10:39 pm #1214822
    Jordan Shannon

    Hi,

    Yes, you need to set a minimum value to ensure they are all sized evenly.

    Best regards,
    Jordan Shannon

    May 20, 2020 at 10:41 pm #1214823
    Nin0

    Ok, and how about the padding of the text?

    Best regards,
    Nin0

    May 22, 2020 at 1:07 pm #1215216
    Rikard

    Hi,

    Please try this as well to center the text:

    #av_product_description h1 {
  text-align: center; 
}

    Best regards,
    Rikard

    May 22, 2020 at 1:14 pm #1215217
    Nin0

    Hi Rikard,

    Centering the text is ok; like mentioned before. It’s the padding that i would like to adjust.
    Can i use the “#av_product_description h1” for this to?

    Tnx,
    Best regards,
    Nin0

    May 24, 2020 at 6:51 am #1215643
    Rikard

    Hi,

    Yes, you can use that CSS block to add padding as well.

    Best regards,
    Rikard

    May 24, 2020 at 11:03 am #1215684
    Nin0

    Thanks Rikard,

    I’ve noticed that this css block is for the main title displayed on top of the page and not under the image as I mentioned.
    I could fix this with the css code

    #top .products .product-category h2 { ... }

    Best regards,
    Nin0

    May 24, 2020 at 1:38 pm #1215741
    Victoria

    Hi Nin0,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.