Tagged: gap
-
AuthorPosts
-
January 23, 2017 at 9:59 am #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,
CorinaJanuary 26, 2017 at 10:25 am #738817Hey 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,
NikkoJanuary 27, 2017 at 8:36 am #739268Hi 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 7 years, 10 months ago by cd2s. Reason: it just stopped working... not quite sure why as I didn't do anything else
January 28, 2017 at 9:14 pm #739776Hi,
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,
NikkoJanuary 30, 2017 at 2:20 am #740061Hey 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,
CorinaFebruary 1, 2017 at 9:01 am #741081Hi 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,
RikardFebruary 1, 2023 at 3:07 pm #1396231Hi,
I’m trying to have the columns gap bigger between posts (in the post slider), but the css code above is not working for me.
Can you help me with that?
Thank you very much!
February 1, 2023 at 7:38 pm #1396278Hi scitation,
Please try the following in Quick CSS under Enfold->General Styling:
.avia-content-slider .av_one_third { margin-left: 10%; width: 26%; } .avia-content-slider .av_one_third.first { margin-left: 0; }
Best regards,
RikardFebruary 2, 2023 at 12:21 pm #1396374Hi Rikard,
It was exactly that!
Thank you very much!February 2, 2023 at 3:40 pm #1396408Hi scitation,
I’m glad that Rikard could help you :)
Thanks for using Enfold and have a great day!Best regards,
Nikko -
AuthorPosts
- The topic ‘Post Slider – Gap Size’ is closed to new replies.