Kevin Powell - Community•2y ago

Extra space in slider gallery

Hi, I'm having a lot of trouble with the desktop version of this page: https://www.ohvaz.ro/produse/ovaz-cu-ciocolata-si-ananas/ there's a lot of empty space underneath the photo gallery. I tried various CSS tricks, but I'm no success. How can I make the photo fit the height of that element better? Thank you!

22 Replies

MarkBoots•2y ago

there are a lot of fixed sizes and absolute positioned elements going on, (there are even floats). It looks like quite an old template (not really to current standards) but think these adjustments will do

.product-images {
  /* height: 300px */
  height: 100%;
}
.slick-list { 
  height: 100% 
}
.slick-track { 
  height: 100% 
}
.product-images img {
  /* height: 300px; */
  height: 100%;
}

.product-images {
  /* height: 300px */
  height: 100%;
}
.slick-list { 
  height: 100% 
}
.slick-track { 
  height: 100% 
}
.product-images img {
  /* height: 300px; */
  height: 100%;
}

ChrisBarin•2y ago

let me try. thank you ❤️ hmm no change in incognito mode.. firefox trying to see if there's cache... I don't have a cache plugin

MarkBoots•2y ago

you'll need to adjust those in the existing css

ChrisBarin•2y ago

I just added it at the end of my styles.css file no good? can I temp add !important to see if it works?

MarkBoots•2y ago

not sure, try adding !important to everything

ChrisBarin•2y ago

hehe cool

MarkBoots•2y ago

it's not a really nice way, best would be adjusting the existing styles

ChrisBarin•2y ago

not working

MarkBoots•2y ago

I checked again, these changes should work

.product-images {
  /*height: 300px;*/
  height: 100%;
}
.slick-list{
  height: 100%;
}
.product-images img {
  /*height: 300px;*/
  height: 100%;
}

.product-images {
  /*height: 300px;*/
  height: 100%;
}
.slick-list{
  height: 100%;
}
.product-images img {
  /*height: 300px;*/
  height: 100%;
}

ChrisBarin•2y ago

hmm ok

ChrisBarin•2y ago

for whatever reason it's not working

ChrisBarin•2y ago

no matter the size of the window on chrome it's the same issue

MarkBoots•2y ago

I can not see the changes applied. you are sure the styles are saved?

ChrisBarin•2y ago

yep yep I'm trying to find out if there's some cache in cpanel I'm not seeing any. no wp module for caching installed

MarkBoots•2y ago

what is the filename of where you are putting that css?

ChrisBarin•2y ago

styles.css

ChrisBarin•2y ago

MarkBoots•2y ago

ohw, you did it inside a media query. move it to below that last curly brace }

ChrisBarin•2y ago

oh sorry I'm a designer 😄

MarkBoots•2y ago

ChrisBarin•2y ago

yesss thank you so much! it works very happy! ❤️ 🍻

MarkBoots•2y ago

good luck!

Gaming

Programming

Extra space in slider gallery