Envira gallery drop shadow

Support
#1

Hi there see this page:

Im trying to add a drop shadow to the image boxes permanently, not just on hover, I have this code:

#envira-gallery-wrap-9657 .envira-gallery-item img:hover {
box-shadow: 0 10px 15px rgba(0,0,0,0.3);
}

#2

Hello @logoglo,

Thanks for asking. :slight_smile:

Looks like you forgot to share the website URL. Can you please share the same with us to take a closer look?

Thanks.

#3

Sorry about that:

https://www.logoglo.com/new-home/

Also, while you are there:

Can I remove the slight border on the thumbnails?

Also, it doesnt seam to be aligning right, there is more space on the left column than the right.

And, on a mobile, portrait, how can I have it stay in 3x3 rows instead of going to 2x2?

Thanks.

#4

Hi @logoglo,

In regards to the first concern, Use this code below:

.envira-gallery-wrap .envira-gallery-public .envira-gallery-item img:hover{
box-shadow: 0 10px 15px rgba(0,0,0,0.3);
}

and for your other concern,

  1. Thumbnails does not have borders, the image has the border.

  2. It doesn’t seem to be aligning to the right. The div is aligned in center.

  3. The rows are always in 3x3. It does not go to 2x2.

Let us know how it goes.

Thanks.

#5

Hi thanks, but as I said, I wanted it permanently, not just on hover, I dont have hover as I dont have the lightbox enabled. Thanks.

Others:

1: Oops, my bad, sorry.
2: I have it aligned center for mobile so its centers, if I take it off, it still has more of a margin on the right, I guess what Im asking is, how do I make the gallery “fill” the right column, 100% width, left to right?
3:
Its showing 2 (images in the column) x 3 rows, I want it to show 3 x 2

Thanks for all your help.

#6

Hi,

In that case, kindly change the code provided with this

.envira-gallery-wrap .envira-gallery-public .envira-gallery-item img{
   box-shadow: 0 10px 15px rgba(0,0,0,0.3);
}

  1. Sorry, I am not sure about this. Can you provide screenshot what you would like it to look like.

  2. To make it three column, add this in Cornerstone > CSS

@media only screen and (max-width: 459px) {
 .envira-gallery-wrap .envira-gallery-public.envira-gallery-3-columns .envira-gallery-item {
     33.33%
}

.envira-gallery-wrap .envira-gallery-public.envira-gallery-3-columns .envira-gallery-item:nth-child(2n+1) {
   clear:none;
}
}

Thanks

#7

OK, have a look, the columns are in pink, see how, even though the gallery is center aligned, its not, its too far to the left, it should be in the middle of that column right?

So more like this:

Thanks.

#8

The shadow code still isnt working. Sorry. Nor is the @ code to make it stay in 3 columns.

#9

And for the position, im basically trying to achieve this:

But as you can see on the live page, the margins are not equal, its too far to the left.

#10

Hi there,

The problem is the layout structure, and it’s nested.

As you can see from the screenshot, columns are within rows with limited width, then that rows is under a section where nested from another column, where column as float styling. Hence, faulty layout since floating will not just aligned.

There are many similar issues before and it’s one of the reason we have our own builder now. It’s not the fault of visual composer plugin, but the way users created their layout. Please avoid using nested layout when using visual composer, make it’s simple and as much as possible, please limit it to 1st level layout. This can’t be fixed by just CSS.

As for text shadow, I don’t see it being implemented into your site. But I tried that CSS in browser’s inspector and it works. Perhaps you can disable your optimization (cache and minification) while you’re working on your site? Cache against change. Or perhaps you added it in wrong place? I see similar CSS added to your grid class data. You should add it in custom CSS section.

Thanks!

#14

And this code:

@media only screen and (max-width: 459px) {
.envira-gallery-wrap .envira-gallery-public.envira-gallery-3-columns .envira-gallery-item {
33.33%
}

.envira-gallery-wrap .envira-gallery-public.envira-gallery-3-columns .envira-gallery-item:nth-child(2n+1) {
clear:none;
}
}

Isnt working

#15

I figured it out, I had an extra container within the container.

#16

A new problem has occurred, at certain sizes, the margin up top disappears and makes everything flush to the nav bar:

#17

Hi again,

Try adding the following code in the Theme Options > JS:

function stop_jumps() {
	jQuery('header.masthead.masthead-inline').css('height', jQuery('.x-topbar').height() + jQuery('.x-navbar').height());
}
jQuery(document).ready(function(){
	stop_jumps();
});
jQuery(window).resize(function(){
	stop_jumps();
});

Let us know how this goes!

#18

That worked! thanks for all your help.

#19

You are most welcome. :slight_smile:

#20

Whoops, its still going onto 2 columns:

Need it to go to 3 at this size.

Thanks.

#21

Hello There,

To maintain 3 columns in smaller screens, please make sure that you set a smaller mobile images. At least smaller than 230 pixels because the default is the smallest screen size.

Please edit your gallery and it can be found in the mobile tab.

Hope this helps.

#22

I tried it, but sorry, it didnt have an effect, I even tried it at 20px but it didnt change…

#23

Hey There,

Would you mind providing some access to you site so that we can check your Envira Gallery settings? We want to figure out how to stop it from going to less than 3 columns in smaller screens.

Kindly let us know.