Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 1, 2018 at 2:45 pm #992425
    sdesign-web

    hi,
    2 questions concerning the catalogue element

    1# – i would like to increase the size of the circle image in the catalogue element.

    i already have the follow quick css and i try to increase the width of av-catalogue-image but nothing change :

    @media screen and (max-width: 767px) {
    .av-catalogue-image {
    border-radius: 400px;
    width: 44px;
    float: none;
    margin: 0 auto;
    display: block;
    }
    .av-catalogue-price {
    position: relative;
    }

    .av-catalogue-title-container {
    text-align: center;
    }

    .av-catalogue-title {
    padding-right: 0;
    }

    .av-catalogue-content {
    text-align: center;
    padding: 0;
    }
    }

    2# – Is it possible to have a rectangular image instead of circle ?

    Thank you in advance for your help

    kinds regards

    Stan

    August 2, 2018 at 5:24 am #992679
    Rikard

    Hi Stan,

    Could you post a link to the page in question so that we can take a closer look please?

    Best regards,
    Rikard

    August 2, 2018 at 9:46 am #992781
    sdesign-web

    Hi Rikard,
    please find in private content the link and screen shots :
    Thank you in advance for your help !
    best regards
    Stan

    August 2, 2018 at 1:53 pm #992875
    Rikard

    Hi Stan,

    Thanks for that. I can see the CSS you posted applying though, so maybe it’s working? If you want to increase the image and have it square then please try this CSS:

    .av-catalogue-image {
    border-radius: 0 !important;
    width: 100px !important;
}

    Not sure if your media query is supposed to be there, do you want it to apply for mobile only? If so then just paste the CSS inside the query.

    Best regards,
    Rikard

    August 23, 2018 at 4:42 pm #1000829
    sdesign-web

    Hello,
    At the end I can not find the right quickcss to set the catalogue element as i want.
    If you could help me it would be so great as i use this element in many enfold site.

    What i would like to do :

    1-in desktop horizontal view
    – stay align left
    – set (increase) the size of the image
    – set size and color of catalogue title
    – set thickness and color of catalogue separator

    2-in mobile vertical responsive view
    idem but align all center

    Please find in private content the url + temporary admin login + screenshot

    Thank you so much in advance for your help

    Stan

    August 24, 2018 at 5:15 pm #1001322
    Vinay

    Hi,

    Unfortunately, it would require quite some time and customization of the theme to achieve this, but we have put together a documentation and customization guide for you here https://kriesi.at/documentation/enfold/catalogue/#customization

    Please use the codes from the examples provided to achieve what you are looking for. Once you get started if there is anything you need, we are happy to help you :)
    Best regards,
    Vinay

    September 11, 2018 at 5:16 pm #1008463
    sdesign-web

    Hi Vinay,

    Thanks, in the end I managed to get pretty much what I wanted with your resources and forum.

    Just a little extra, can you tell me what code to add to the quick css below to increase the space between the image and the title of the catalog item.
    ( please find in private content example and page url

    thanks very much in advance
    Kind regards
    Stan

    .av-catalogue-title {
    font-size: 23px;
    color: #c41546;
    }
    .av-catalogue-image {
    border-radius: 200px;
    width: 166px;
    float: none;
    margin: 0 auto;
    display: block;
    }
    @media screen and (max-width: 767px) {
    .av-catalogue-price {
    position: relative;
    }

    .av-catalogue-title-container {
    text-align: center;
    }

    .av-catalogue-title {
    padding-right: 0;
    }

    .av-catalogue-content {
    text-align: center;
    padding: 0;
    }
    }
    .av-catalogue-list li:first-child {
    border-top: 1px;
    }

    .av-catalogue-list li {
    background: #ffffff;
    border: 10px solid #c4bab8;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    }

    September 11, 2018 at 6:55 pm #1008510
    Jordan Shannon

    Hi,

    Try adding this to the title css:

    margin-top:20px;

    Best regards,
    Jordan Shannon

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