How to get margin and borderless images in a gallery?

Support
#1

Hi there, I made a gallery (http://www.clipl2r.nl/portfolio/fris-meubellijn-voor-primair-onderwijs/) in a portfolio item. But I would like to have marginless images without a border. How can I do this? Thank you! I use the Integrity stack.

Regards, Marjolijn

#2

Hello Marjolijn,

Thanks for asking. :slight_smile:

You can use .gallery-item CSS selector and then use CSS padding and border property to make necessary changes. I am sharing links to CSS tutorials that will help you get started:

https://www.w3schools.com/css/css_padding.asp
https://www.w3schools.com/css/css_border.asp

Also sharing CSS code that you can use as a starting point:

.gallery-item {padding: 0; border: none;}

Thanks.

#3

Thank you @Prasant! It works fine!

#4

Glad to hear it!

#5

Hi:

I have added the below code to Global CSS (thru CornerStone), but my gallery image still has a light border. Happens only with a few of the gallery images, not all. Please help. Thank you.

.gallery-item {
padding:0;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

#6

Hey Ravi,

Please give us the URL of the page having this issue. You said it happens only to few images. That means the code works. As to why it doesn’t work, there is 2 possibilities.

  1. There is a syntax error in your CSS. Please check your CSS in http://csslint.net/
  2. You placed the CSS in the wrong location. Try putting it in Appearance > Theme Options > Global CSS. Cornerstone’s CSS is called Content CSS and putting CSS there will work only for the page you put it in and not the whole site.

Thanks.

#7

Hey Christian:

Here is the url: http://cohegic.com/CWP/cohegic-method/
The full width image at the bottom has the issue.

http://cohegic.com/CWP/
The full width image at the bottom has no issue. It never had the issue, did not need the recent css code that I added.

All my css code is added in one place - to the Global CSS. Cornerstone->Customize->Custom->Edit Global CSS

Thanks.

#8

Hi There,

The border is present on the image itself, please take a look.

In this case you will need to edit it on Photoshop or Similar software.

Hope it helps!

#9

Thank you, Joao. You’re right. I cropped the image and it looks great now. Thanks.

#10

Hi There,

My recommendation would be Copy press Ctrl or Command + A select all copy to a Text Editor like Sublime or Brackets and paste it back.

If you have more questions regarding this issue, please open a new thread.

Thanks!