Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #737173

    Hello Enfold Support Team

    I am testing options for a client and added the post slider to display properties (they are a real estate). I initially tested the Masonry but I don’t think that it does what he wants unless we have the same amount of properties for each category and display “all”. Because as soon as I say display for example “8”, it won’t show all categories in the filter.

    The other option is that I add a slider (not my favourite option) for each category but the gap is so massive. Is there a way I can make the gap exactly the same size as in the Masonry above on the page? (link below). Also no rounded corners and have the slight gray box like in the Masonry?

    I will also have to hide the Category but I should be able to figure that out…

    Thanks so much,
    Corina

    #738817

    Hey Corina,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    .avia-content-slider-inner .av_one_fourth {
        margin-left: 2.6666667%;
        width: 23%;
    }
    
    .avia-content-slider-inner .av_one_fourth.first {
        margin-left: 0;
    }

    Hope this helps.

    Best regards,
    Nikko

    #739268

    Hi Nikko

    Thanks so much. I applied the CSS you provided and the gap was still bigger than the Masonry… so I had a bit of a play with the % (not sure if I’ve done it correct)… but I amended it to the following, so it now visually looks the same as in the masonry.

    .avia-content-slider-inner .av_one_fourth {
    margin-left: 1.5%;
    width: 23.875%;
    }

    .avia-content-slider-inner .av_one_fourth.first {
    margin-left: 0;
    }

    The one issue I still have though, is that it expanded the container (grey) but not the image…. how can I make the image resize to fit the column width, without it looking pixelated? When I look at the HTML & CSS I can see that it loads a 270px size image into the container… is there a way to make it load a larger size that fits the whole width of the column and adjusts in height proportionally?

    //Update Note… for some reason it just stopped working at all… not quite sure why… I even tried to copy/paste back your css and it doesn’t do a thing?

    Thanks so much.
    Corina

    • This reply was modified 3 years, 2 months ago by  cd2s. Reason: it just stopped working... not quite sure why as I didn't do anything else
    #739776

    Hi,

    Do you have a caching plugin enabled, or some plugins that allow custom css, try to disable it, as it might be the cause.

    Best regards,
    Nikko

    #740061

    Hey Nikko

    Okay I got it… deleted everything and started from scratch… also got the image to resize with the following code… in case anyone else needs the solution:

    .avia-content-slider .slide-image, .avia-content-slider .slide-image img {
    border-radius: 0 !important;
    display: block;
    margin: 0 auto;
    position: relative;
    width: 100%;
    }

    definitely did not have a caching plugin.

    Thanks for all your help.
    All the best,
    Corina

    #741081

    Hi Corina,

    Great, glad you got it working and thanks for sharing your solution. Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

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

You must be logged in to reply to this topic.