Tagged: , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • May 17, 2024 at 5:24 pm #1444105
    biscuitik

    Hi. I added the category list to my enfold shop page via CODE BLOCK. – [product_categories]
    Is it please somehow possible to chage the size of the categories blocks? It’s too huge compared to whole design of the page :)

    Thank you
    Martina

    May 17, 2024 at 9:02 pm #1444151
    Rikard

    Hey Martina,

    I’m getting a 404 page on the link you posted, please check. Also please try to explain what you are looking to achieve a bit further, or post a screenshot highlighting your intentions.

    Best regards,
    Rikard

    May 17, 2024 at 10:20 pm #1444162
    biscuitik

    Hey Rikard,

    sorry I change the page, so it’s not working anymore. Sending you the new link. :)
    I would like to have the category grid a bit smaller. Not big 4 columns, but for example 5 columns with smaller pictures, so it is aligned with the product grid below.
    As the category list is inserted via the code block, there is no possibility in the theme to set the characteristic for the product categories grid. :)
    So my question is if there is any way to adjust for example the size, the number of columns, size of the font..

    Thank you
    Martina

    May 19, 2024 at 11:31 am #1444505
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    #top .woocommerce.columns-4, #top .products.columns-4 {
  display: flex; 
}

#top .products .product.last, #top #main .products .product.last {
  margin-right: 13px;
}

    Best regards,
    Rikard

    May 19, 2024 at 6:47 pm #1444563
    biscuitik

    Hi Rikard :)

    Thank you.. weeeell now the categories are great :) but it messed up the product display..

    Martina

    May 19, 2024 at 8:54 pm #1444595
    Mike

    Hi,
    Try this CSS instead:

    #top .avia_codeblock_section .woocommerce.columns-4, #top .avia_codeblock_section .products.columns-4 {
  display: flex; 
}

#top .avia_codeblock_section .products .product.last, #top #main .avia_codeblock_section .products .product.last {
  margin-right: 13px;
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, and removing the previous css, please clear your browser cache and check.

    Best regards,
    Mike

    May 20, 2024 at 9:31 am #1444690
    biscuitik

    Hello Mike :)

    Thank you very much. Looks perfect on the desktop PC.
    The mobile view is unfortunatelly off the grid :) and the 5th category is not visible until I rotate the phone to landscape.

    Kind regards
    Martina

    • This reply was modified 6 months, 1 week ago by biscuitik.
    May 20, 2024 at 10:59 am #1444708
    Mike

    Hi,
    Try this instead

    @media only screen and (min-width: 768px) { 
    #top .avia_codeblock_section .woocommerce.columns-4, #top .avia_codeblock_section .products.columns-4 {
        display: flex; 
      }
      
      #top .avia_codeblock_section .products .product.last, #top #main .avia_codeblock_section .products .product.last {
        margin-right: 13px;
      }
}

    Best regards,
    Mike

    May 20, 2024 at 12:40 pm #1444731
    biscuitik

    Hi Mike,

    Thank you so much.. Looks great! :)

    Best regards
    Martina

    May 20, 2024 at 4:15 pm #1444757
    Rikard

    Hi,

    Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    May 21, 2024 at 10:59 am #1444896
    biscuitik

    Hi Rikard,

    thank you very much, everything was solved, we can close it :)

    Martina

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Shop Category List Size’ is closed to new replies.