Image Gallery border issue?

mat1746
(@mat1746)

9 years, 3 months ago

I’m using Elementor 1.0.9 and having some trouble trying to set up an image gallery. For some reason my style settings are ignored and there is always a 2px grey border around the images in the gallery.

Another site I made using an older version of Elementor didn’t cause this issue.

Is there any chance gallery settings are glitchy in 1.0.9? Am I doing something wrong?

Thanks a bunch in advance.

Viewing 8 replies - 1 through 8 (of 8 total)

snifflevalve
(@snifflevalve)

9 years, 3 months ago

@mat1746 –

There must be some CSS being applied from elsewhere. I just set up an image gallery on a fresh local install of Elementor 1.0.9 and there is no border around any of the images.

Do you have a link to the site in question?

Cheers!
Lyle

Thread Starter mat1746
(@mat1746)

9 years, 3 months ago

Thanks so much for helping out! I tried figuring out what the cause is by inspecting the element but I’m afraid my webdev skills aren’t good enough to figure it out… the site in question is drystroke.com, I have uploaded some generic pictures as temporary placeholders

snifflevalve
(@snifflevalve)

9 years, 3 months ago

I’m seeing this CSS being applied to the images:

`#gallery-1 img {
border: 2px solid #cfcfcf;
}’

Doesn’t look like Elementor CSS nor WP Featherlight.
What theme are you using?
snifflevalve
(@snifflevalve)

9 years, 3 months ago
I note that you are using the Blankslate theme and that the CSS I noted above is being added inline on the index.php page on line 222.

This is the CSS that would be present if that border was applied with Elementor’s Image Gallery:
```
.elementor-15 .elementor-element.elementor-element-8nweakw .gallery-item img {
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #cfcfcf;
}
```
So it’s coming from somewhere else 🙂
- This reply was modified 9 years, 3 months ago by snifflevalve. Reason: more info
Thread Starter mat1746
(@mat1746)

9 years, 3 months ago
That’s so confusing… where could it come from? You’re right, I’m using the blank slate theme. I checked the index.php file but there’s only this code in there:
```
<?php get_header(); ?>
<section id="content" role="main">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'entry' ); ?>
<?php comments_template(); ?>
<?php endwhile; endif; ?>
<?php get_template_part( 'nav', 'below' ); ?>
</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
```
and after searching with ctrl-F through all the other .php files and ofcourse the style css I didn’t find the entry even once. I’m also using very few plugins (really only a custom css plugin, elementor and featherlight) so I doubt it’s coming from there either

Oh nice, I might have fixed it. Probably in a very inefficient and unstable way though.
I just added this via custom-css
```
#gallery-1 img {
    border: 0px solid #000000; !important
}
```
Not very elegant, right?

another edit: damnit now I broke everything
- This reply was modified 9 years, 3 months ago by mat1746.
- This reply was modified 9 years, 3 months ago by mat1746.
snifflevalve
(@snifflevalve)

9 years, 3 months ago
It should be:
```
#gallery-1 img {
    border: 0px solid #000000 !important;
}
```
And it should really not “break” anything else 🙂
Thread Starter mat1746
(@mat1746)

9 years, 3 months ago

Perfect! Thank you so so much 🙂

Andrew Maney
(@andymaney)

8 years, 9 months ago

That’s the default WordPress gallery styles being adding inline.
If you wanted a cleaner workaround use filters.
To disable that entirely add the following to your funtions.php file.

add_filter( ‘use_default_gallery_style’, ‘__return_false’ );