CSS throwing out the placement of Price/Click Here/Review stars…

This topic has 12 replies, 2 voices, and was last updated 8 years, 5 months ago ago by Jack Richardson

  • Avatar: Lily
    Lily
    Participant
    October 19, 2015 at 13:06

    Hi,

    On this page, you will see featured products. The final product CRYSTAL PEARL GRADUATED NECKLACE has ‘review stars’ but the price is sitting over the top of the ‘review stars’ or vice versa!

    Now I think the reason for this is custom CSS coding you preovided to me some time ago. This CSS made the products display on Category Pages with a fixed height.

    So that the price/Review/Click Here are uinformly the same depth – see category example below. THis page has the Crystal Peal Graduated Necklace in it.

    Please, contact administrator
    for this information.
    11 Answers
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    October 19, 2015 at 14:06

    Hello,

    Edit your custom.css file, find the code:

    .products-grid .product .add-to-container {
        position: absolute;
        bottom: 0;
    }

    and delete the line bottom: 0;

    and find the code:

    .products-grid .product .product-name {
        height: 90px;
    }

    Change the value to 50px.

    Best regards,
    Jack Richardson.

    Avatar: Lily
    Lily
    Participant
    October 20, 2015 at 09:52

    Many thanks for that, But I need the

    Price
    Stars
    Click Here

    All in line with each other? Would this be possible?

    Please, contact administrator
    for this information.
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    October 20, 2015 at 10:39

    Hello,

    Try to use this code in custom.css:

    .products-grid .product .add-to-container {
       display: inline-flex;
    }

    Also edit the code as I told you in the previous post.

    Best regards,
    Jack Richardson.

    Avatar: Lily
    Lily
    Participant
    October 20, 2015 at 10:51

    HI,

    Already had

    .products-grid .product .add-to-container{
    position: absolute;

    So added

    display: inline-flex;

    But now everything is uniform but on 1 row…see any category page, home-page4, so not quite right

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    October 20, 2015 at 11:09

    Hello,

    Please clear browser cache and check again. Now your products are shown this way:
    http://storage6.static.itmages.com/i/15/1020/h_1445335767_5026403_d52ff24e4a.png

    Best regards,
    Jack Richardson.

    Avatar: Lily
    Lily
    Participant
    October 20, 2015 at 11:22

    Yes I know which is incorrect.

    I want them as before, but uniform in depth, and not overlapping each other which they are still doing.

    So I have removed CSS you sent over

    display: inline-flex;

    But the depth is now not uniform.

    please see urls below

    So I want the the price, review and Click here all vertical as they now are, but with a uniform depth, so all prices are on same row, and all click heres are on same row and if there is a review this would inline as well.

    Many thanks

    Please, contact administrator
    for this information.
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    October 20, 2015 at 12:10

    Hello,

    Sorry, but it can’t be done because some products have review stars and some don’t.
    You need either add review for all products or remove it from Products page.

    Best regards,
    Jack Richardson.

    Avatar: Lily
    Lily
    Participant
    October 20, 2015 at 12:19

    Hi,

    Many thanks for that but it was done previously on Category pages. I have removed your suggested CSS

    And now if you look at the category page, everything is inline.

    So it is possible on that page, do you agree?

    THerefore surely it must be possible on the homepage – see URLs below.

    Please, contact administrator
    for this information.
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    October 20, 2015 at 12:35

    Hello,

    Please update the theme to the latest version and Woocommerce as well.
    Before update delete “woocommerce” folder in the directory wp-content/themes/legenda/ and it’ll be reuploaded from a new theme package.
    Also update all required plugins https://www.8theme.com/download-plugins/ .

    Don’t forget to create back up of your files and database before starting update process!

    Best regards,
    Jack Richardson.

    Avatar: Lily
    Lily
    Participant
    October 20, 2015 at 12:40

    So the current CSS will only work in new version of the theme?

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    October 20, 2015 at 13:09

    Hello,

    The displaying issue may be caused by old versions of the theme and plugins you’re using. That’s why we recommend you to update everything.
    Before starting update make sure you created back up of the files and database.

    Best regards,
    Jack Richardson.

  • Viewing 12 results - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.