Product Category page

This topic contains 15 replies, has 2 voices, and was last updated by  Alma Viki 7 months, 3 weeks ago.

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #19087

    kernow seascapes
    Participant

    Supported

    Hello,

    Regarding the weblink below, I have recently changed some Custom Code by accident previously provided by CTH Support and the page now does not work as it should.

    The link is – http://kernowseascapes.co.uk/product-category/cornwall/

    I have accidentally changed the code for;

    1) Cursor Hover – when you hover the cursor over the jpeg thumb, the Opacity feature only appears as a grey ‘bar’ in the middle of the thumb, instead of across the entire image.

    2) Jpeg Thumb product category Text – this is now appearing only aligned left, instead of in the centre as it used to be.

    If I provide WP Admin login details, please can you take a look at the code and change accordingly?

    I don’t know what I have done. Thanks.

    #19102

    Alma Viki
    Participant

    Unknow

    Hi,

    Thanks for contacting with us.
    Let us answer your questions:
    1. Cursor Hover: If you check on our demo, you can see it is same.
    2. If you send to us your wp-admin account, we will help you adjust it 🙂

    Thanks

    #19105

    kernow seascapes
    Participant

    Supported
    This reply has been marked as private.
    #19130

    Alma Viki
    Participant

    Unknow

    Hi,
    I did adjust it by using this CSS code:
    .tax-product_cat .product-category>a>h3{ text-align: center;}

    Please help us re-check it.

    Thanks

    #19151

    kernow seascapes
    Participant

    Supported

    Hi,

    Thanks – this has worked & the product category text is now centred

    However, the image does still not go ‘darker’ when you hover cursor over it – only a thin ‘bar’ in the middle of the image.

    Are you able to supply the code to enable the full, entire image to go darker upon cursor hover?

    Thanks

    #19168

    Alma Viki
    Participant

    Unknow

    Hi,

    I tried, but it is impossible.

    Thanks

    #19178

    kernow seascapes
    Participant

    Supported

    Hi,

    This definitely is possibly as the code was previously provided by yourselves at CTH Themes.

    I have accidentally changed it, but I don’t know how to reverse it.

    It has something to do with the code below – but I don’t know what

    .tax-product_cat .product-category > a {
    width: 100%;
    position: relative;
    height: 100%;
    float: center;
    }
    .tax-product_cat .product-category > a > img {
    max-width:100%;
    height:auto;
    }
    .tax-product_cat .product-category > a > h3 {
    position: absolute;
    top: 50%;
    float: absolute;
    width: 100%;
    font-size: 30px;
    font-family: ‘FuturaPT-Book’;
    letter-spacing: 2px;
    color:#fff;
    z-index:2;
    }
    .tax-product_cat .product-category > a:after {
    content:” “;
    position: absolute;
    top: 0;
    left:0;
    float: center;
    width: 100%;
    height:100%;
    background:rgba(0,0,0,0.3);
    z-index:1;
    opacity:0;

    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;

    }
    .tax-product_cat .product-category > a:hover:after{
    opacity:5;
    }

    #19179

    Alma Viki
    Participant

    Unknow

    Ok, I have added it for you 🙂

    Thanks

    #19194

    kernow seascapes
    Participant

    Supported

    Hi,

    This great. Thanks. Just for future reference, which is the correct line of code & command add if this happens again?

    I have checked the page on a laptop, desktop, smartphone & tablet. On each device, except for laptop – there hover effect still does not cover the entire image – there is still areas at the top & bottom of each image that do not go ‘dark’ when you cursor hover over them.

    Please check using a smartphone and you will see what I am referring to – I am unable to take a screenshot on my phone, otherwise I would add here.

    Please can you take a look at this? Like I say, the effect now works on a laptop, but not on any other device used to check.

    Thanks

    #19210

    Alma Viki
    Participant

    Unknow

    Here, I’m using this CSS code:

    tax-product_cat .product-category>a:after{
            content: " ";
            top: -76px;
            height: 174px;
    }
    
    @media screen and (max-width: 768px) {
        .tax-product_cat .product-category>a:after{
        top: -98px;
        height: 218px;
        }
    }
    
    @media screen and (max-width: 375px) {
        .tax-product_cat .product-category>a:after{
                top: -119px;
                height: 260px;
        }
    }
    
    @media screen and (max-width: 320px) {
        .tax-product_cat .product-category>a:after{
              top: -99px;
            height: 220px;
        }
    }

    Please help us re-check it.

    Thanks

    #19356

    kernow seascapes
    Participant

    Supported

    Hi,

    This is great, and although has almost fixed this issue which I am very greateful for – when you hover the cursor over the product category thumb there ‘dark’ box which appears extends beyond the image – there is now 2 ‘bars’ on the top and bottom of the image; it does not fit exactly the size of the image

    On the previous code I had provided, there was the word ‘absolute’ in the code – I cannot see this above in the new code. Could this have something to do with the problem?

    Thanks

    #19369

    Alma Viki
    Participant

    Unknow

    Hi,

    Can you send to us some screenshot about it?
    Which screensize you are checking?

    Thanks

    #19386

    kernow seascapes
    Participant

    Supported
    This reply has been marked as private.
    #19398

    Alma Viki
    Participant

    Unknow

    Ok, Please help us re-check this issues.

    Thanks

    #19422

    kernow seascapes
    Participant

    Supported

    Hi,

    This seems to have worked – brilliant – thank you very much; your help is appreciated

    Thanks

    #19435

    Alma Viki
    Participant

    Unknow

    Great that!
    Please let us know if you have other troubles.

    Thanks

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.

Hello! CityBook version 1.2.7 was released. Bulk Import Add-On, OpenStreetMapView Details
+