This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by Cakra (Support Staff) Cakra (Support Staff) 2 years ago.

DF Flip Cards Issues

  • Hi Support Team,

    I have installed AZ theme and have been filling it with my content (wordpress locally hosted on my PC).

    I have some issues with Flip Cards (in display in Menu page):

    1. When in grid style, there are 6 items – the placement of grids is not centered. 5 items are placed in row 1 and 6th item is placed in 2nd column (2nd row).
    I would like to make it centered, so 6th item should be in center (in 2nd row). The screenshot is attached here (placement_issue.png).

    2. In grid style, if the item title is longer (and spreads to 2 lines) – this item is on first row; it will push the item on second row one line lower.
    In that case, all the items in grid view on 2nd row don’t appear in same horizontal position. The screenshot is attached here (alignment_issue.png).

    3. On flipcard (an item in grid view), I don’t want to display the price. But the price only appears in expanded mode (it doesn’t appear in non-expanded / normal view).

    Could you please look into these issues and guide me on how to resolve it.

    I look forward to your response.

    Thank you :).

    Attachments:
    You must be logged in to view attached files.
    Cakra (Support Staff)
    Post count: 4276

    Hi, Thank you for purchasing AZ theme. 🙂

    1) Please use these custom css to make the last item centered:

    .products {
    text-align: center;
    }
    
    .product-item {
    height: 300px;
    display: inline-block !important;
    }
    
    .post-xx {
    left: 36% !important;
    }
    

    Change “xx” value with class number of your last item.
    But you need to edit these css code again if you add new products because there’s some javascript that make the grid display float to the left so it cannot be automatically centered.

    2) Please use these custom css below to fix it:

    .product-item {
    height: 300px;
    }
    

    The purpose of the css code above is to make height of a product item will has fixed value.

    3) Please use these custom css code to hide the price:

    .product-item .price {
    display: none;
    }
    

    Let me know how it goes.

The forum ‘AZ Theme’ is closed to new topics and replies.