No replies
alanvers
alanvers's picture
Offline
newbie
berlin
Last seen: 5 years 47 weeks ago
berlin
Timezone: GMT+2
Joined: 2017-07-01
Posts: 1
Points: 2

Hello everybody,

I'm taking care of a website for a friend, and she ask me to resize the thumbnails images that you can see here (http://www.laetitiamichal.com/index.php/works/pink-top/)
basically the .galleria-thumbnails .galleria-image is #height: 40px #width: 60px; and I would like to put them at height: 200px; width: 400px;.

The problem is, doing that, there is an overlap between the main image and the thumbnails.
I tried to resize the all container up to 770px height ( In chrome inspect first, and It worked) but not in the css directly and I can't figure out why.

So I put back the original css for the moment,
If someone could help me that would be great!
Thank you so much,

Alan

Here is my css:

/* Galleria Classic Theme 2012-08-07 | https://raw.github.com/aino/galleria/master/LICENSE | (c) Aino */
.forgallerydiv {
position:relative;
}
.forgallerydiv .gallery_fullscreen {
position: absolute;
z-index: 10;
right: 10px;
top: 10px;
width: 25px;
height: 25px;
display: none;
background:#000 url(../../images/gallery_fullscreen.png) 4px 4px no-repeat;
}
.forgallerydiv:hover .gallery_fullscreen {
display:block;
}

.galleria {
height:600px;
}

.galleria_shortcode {
height:450px!important;
}

@media only screen and (max-width: 767px) {
.galleria {
height:350px;
}
.galleria_shortcode {
height:250px!important;
}
}

#galleria-loader{height:1px!important}

.galleria-container {
position: relative;
overflow: hidden;
background: #000;
}
.galleria-container img {
-moz-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.galleria-stage {
position: absolute;
top: 10px;
bottom: 60px;
left: 10px;
right: 10px;
overflow:hidden;
}
.galleria-thumbnails-container {
height: 50px;
bottom: 0;
position: absolute;
left: 10px;
right: 10px;
z-index: 2;
}
/*
.galleria-carousel .galleria-thumbnails-list {
margin-left: 30px;
margin-right: 30px;
}
*/
.galleria-thumbnails .galleria-image {
height: 40px;
width: 60px;
background: #000;
margin: 0 5px 0 0;
/* border: 1px solid #000;*/
float: left;
cursor: pointer;
}
.galleria-counter {
position: absolute;
bottom: 10px;
left: 10px;
text-align: right;
color: #fff;
font: normal 11px/1 arial,sans-serif;
z-index: 1;
}
.galleria-loader {
background: #000;
width: 20px;
height: 20px;
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
display: none;
background: url(classic-loader.gif) no-repeat 2px 2px;
}
.galleria-info {
width: 100%;
top: 0px;
background: transparent url(../../images/trnsblck.png);
left: 0px;
z-index: 2;
position: absolute;
}
.galleria-info-text {
padding: 10px 15px;

/* IE7 */ zoom:1;
}
.galleria-info-title {
font: bold 12px/1.1 arial,sans-serif;
margin: 0;
color: #fff;
margin-bottom: 7px;
}
.galleria-info-description {
margin: 0;
display:block!important;
color: #f0f0f0;
}
.galleria-info-close {
width: 9px;
height: 9px;
position: absolute;
top: 5px;
right: 5px;
background-position: -753px -11px;
opacity: .5;
filter: alpha(opacity=50);
cursor: pointer;
display: none;
}
.notouch .galleria-info-close:hover{
opacity:1;
filter: alpha(opacity=100);
}
.touch .galleria-info-close:active{
opacity:1;
filter: alpha(opacity=100);
}
.galleria-info-link {
background-position: -669px -5px;
opacity: .7;
filter: alpha(opacity=70);
position: absolute;
width: 20px;
height: 20px;
cursor: pointer;
background-color: #000;
display:none;
}
.notouch .galleria-info-link:hover {
opacity: 1;
filter: alpha(opacity=100);
}
.touch .galleria-info-link:active {
opacity: 1;
filter: alpha(opacity=100);
}
.galleria-image-nav {
position: absolute;
top: 50%;
margin-top: -62px;
width: 100%;
height: 62px;
left: 0;
}
.galleria-image-nav-left,
.galleria-image-nav-right {
opacity: .3;
filter: alpha(opacity=30);
cursor: pointer;
width: 62px;
height: 124px;
position: absolute;
left: 10px;
z-index: 2;
background-position: 0 46px;
}
.galleria-image-nav-right {
left: auto;
right: 10px;
background-position: -254px 46px;
z-index: 2;
}
.notouch .galleria-image-nav-left:hover,
.notouch .galleria-image-nav-right:hover {
opacity: 1;
filter: alpha(opacity=100);
}
.touch .galleria-image-nav-left:active,
.touch .galleria-image-nav-right:active {
opacity: 1;
filter: alpha(opacity=100);
}
.galleria-thumb-nav-left,
.galleria-thumb-nav-right {
cursor: pointer;
display: none;
background-position: -495px 5px;
position: absolute;
left: 0;
top: 0;
height: 40px;
width: 23px;
z-index: 3;
opacity: .8;
filter: alpha(opacity=80);
}
.galleria-thumb-nav-right {
background-position: -578px 5px;
border-right: none;
right: 0;
left: auto;
}
.galleria-thumbnails-container .disabled {
opacity: .2;
filter: alpha(opacity=20);
cursor: default;
}
.notouch .galleria-thumb-nav-left:hover,
.notouch .galleria-thumb-nav-right:hover {
opacity: 1;
filter: alpha(opacity=100);
background-color: #111;
}
.touch .galleria-thumb-nav-left:active,
.touch .galleria-thumb-nav-right:active {
opacity: 1;
filter: alpha(opacity=100);
background-color: #111;
}
.notouch .galleria-thumbnails-container .disabled:hover {
opacity: .2;
filter: alpha(opacity=20);
background-color: transparent;
}

.galleria-carousel .galleria-thumb-nav-left,
.galleria-carousel .galleria-thumb-nav-right {
display: block;
}
.galleria-thumb-nav-left,
.galleria-thumb-nav-right,
.galleria-info-link,
.galleria-info-close,
.galleria-image-nav-left,
.galleria-image-nav-right {
background-image: url(classic-map.png);
background-repeat: no-repeat;
}