-
Posts
-
Hi all, we have a customer which has a yoga studio. In this studio a bunch of yoga-teachers are working. To link to “their” pages, we used mutiple sliders instead of images, due to lettering (for names).
You can see the page here.
But, when seeing the page now there are “white gaps” (as if somewhat was “too much”) at the bottom and to the left (2-3 pixel) for the second and third pic of each row. Images of the teachers are just not seamless in the grid, except the 1st in row..
We tried hours to fix, but either it’s no functioning or not responsive anymore. E.g., when I set the div with class “avia slideshow” to 350px, the images are seamless in that row, BUT in second row you have a broad white space above the pics. And % is not working, only fix pixel size.
Perhaps sliders were never thought to be used that way we did?
Do you have any ideas how this could be fixed or should we use pics edited by photoshop for the lettering?Hi @DMStemberg;
I’ve taken your question as a matter of intellectual question, however, and the answer is mathematical !The width of the element “.av_one_third” in “#av-layout-grid” is equals to 33,3% and 3*33,3% is never 100%.
On local I’ve achieved to reach to something (acceptable) by using different size of image :
1st cell image size 600*702px,
2nd cell image size 600*703px,
3rd cell image size 600*703px.Hi there, thx for the answer.
Nope, its not just an intellectual interest, we want to find a solution.
And if we could give the slideshow boxes a height of lets say 99%, we would, just to have the images seamless.
But U are right, with a e.g 4 column slideshow we do not have these kind of problems, since the boxes are all of equal height & width.
Hi!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
.page-id-29 .flex_cell { vertical-align: middle!important; }Regards,
YigitThx, Yigit, but that did not help. Images just don’t fit in, justthe 1st, 2nd and 3rd have the white gaps to the left and at the bottom.
Hi!
Adjust the width of the flex cells a little bit.
#top .no_margin.av_one_third { width: 33.2%; }Default width is 33.3%.
Best regards,
IsmaelHi!
Adjusting the width should fix the height. I checked the site but the code we suggested is not being applied. Did you use it?
Cheers!
IsmaelIt is applied – checked my self, but Firebug shows still 33.3%. Ah, I guess co-worker commented it out. Okay, is applied again. You can try again :-)
Hi!
I checked the link you have provided and it seems totally fine to me, I can’t see any issues. Can you highlight your intentions please? use imgur.com or dropbox.
Regards,
AndyDropbox-Link is:
https://www.dropbox.com/s/o9dvjj2kbxreobk/white_gaps.jpg?dl=0
Hi!
please remove all custom code you are using, to check which one is causing this.
Best regards,
AndyOkay all custom css except for the 33.2% is taken out of the theme.
Please tell me if this should be taken out too. Hope you find a solution.
Hi!
please try this code:
.av-border-cells .flex_cell { border: none; } ul.avia-slideshow-inner { height: 100%; }Best regards,
AndyWell, thanks a lot – but there are still white lines to the left and at the bottom, especially, when you look at the 3rd image in all rows. Code is still applied, I tried the thing with the .av-border-cells .flex_cell to and came to no result. Looks better, but not “perfect”.
And though the code is applied and I tried to add an !important, I still see in Firebug
.av-border-cells .flex_cell {
border-left-style: solid;
border-left-width: 1px;
}neverthelesse if this is in the custom css:
.av-border-cells .flex_cell {
border: none !important;
}Cheers, Martin
Hey!
your images have different sizes, which is causing this I think. Make sure they have all the exact same size. After changing image size don’t forget to regenerate your thumbnails.
Regards,
AndyNo, the images are all 600*700px, controlled by two people.
img width=”600″ height=”700″ alt=”” src=”http://www.lagoayoga.de/wp-content/uploads/2015/11/jess1.jpg” is, what is in the sourcecode. I llet out the HTML-Tags, because otherwise it will show the image.
Okay, now I commented out in shortcode.css
.av-border-cells .flex_cell{/* DMS border-left-style: solid; border-left-width:1px;*/}
Could that lead to something weird?
Now its better, but there ist still a fine white line to the left. Wonder where this may come from.
Hi!
try this code:
.main_color, .main_color div, .main_color header, .main_color main, .main_color aside, .main_color footer, .main_color article, .main_color nav, .main_color section, .main_color span, .main_color applet, .main_color object, .main_color iframe, .main_color h1, .main_color h2, .main_color h3, .main_color h4, .main_color h5, .main_color h6, .main_color p, .main_color blockquote, .main_color pre, .main_color a, .main_color abbr, .main_color acronym, .main_color address, .main_color big, .main_color cite, .main_color code, .main_color del, .main_color dfn, .main_color em, .main_color img, .main_color ins, .main_color kbd, .main_color q, .main_color s, .main_color samp, .main_color small, .main_color strike, .main_color strong, .main_color sub, .main_color sup, .main_color tt, .main_color var, .main_color b, .main_color u, .main_color i, .main_color center, .main_color dl, .main_color dt, .main_color dd, .main_color ol, .main_color ul, .main_color li, .main_color fieldset, .main_color form, .main_color label, .main_color legend, .main_color table, .main_color caption, .main_color tbody, .main_color tfoot, .main_color thead, .main_color tr, .main_color th, .main_color td, .main_color article, .main_color aside, .main_color canvas, .main_color details, .main_color embed, .main_color figure, .main_color fieldset, .main_color figcaption, .main_color footer, .main_color header, .main_color hgroup, .main_color menu, .main_color nav, .main_color output, .main_color ruby, .main_color section, .main_color summary, .main_color time, .main_color mark, .main_color audio, .main_color video, #top .main_color .pullquote_boxed, .responsive #top .main_color .avia-testimonial, .responsive #top.avia-blank #main .main_color.container_wrap:first-child, #top .main_color.fullsize .template-blog .post_delimiter, .main_color .related_posts.av-related-style-full a { border: none; }Best regards,
AndyIf I use inline-block instead of table-cell at .flex_cell {
display: inline-block;
padding: 30px;
vertical-align: top;
} (firebug), then everything seems okay without white gaps(of course, BAD for responsive)- well i think we can live with that, if there are no more ideas .
WITH table-cell, there are the fine white lines :-(Still fine white Line to the left, especially if you scroll down 4 or 5. But Browser still shows this fine white line if your are at highest screen possible. If you make the window smaller, it is seamless.
This is weird problem.Commented the border-color: #e1e1e1 out in enfold.css, still fine white line, but as I said, only in highest possible width of browser window. so commented it in again, and now it seems to be seamless. Dont know why, but it is. Custom CSS did notwork, and the border-color still is there, but it seems to be okay.
Thanx a lot, Andy, excellent work!
Upds, that was too fast – i was not on highst poosible width of browser window.We can live with that, i hear. just this moment.
- The topic ‘Mutiple Simple Sliders on one page in 3 columns – "white gaps"? Can you help?’ is closed to new replies.