Spacing around Images

I am using Joomla 3.9 and a template that does not have a file named "template.css" - it uses the sparky framework. The sparky framework css file is named "sparky......css". However, this would not seem to be aproblem from the instructions given in the article referenced below. I have followed the instructions given in " www.joomlack.fr/blog/184-override-image-...with-your-own-styles " and copied the imageeffectck.css file to a folder created in the template/css/plg_system_imageeffectck/ folder as explained.

I want to remove the excessive spacing around all the image in the 4 x 2 grid I have displayed (see pattached picture) which I assume is added by the template. I assume my template is now using the newly created css file, so what must I do to edit the css and reduce the unwanted spaces iaround the images?

Hi
yes it shall work with your framework. For the css you must use the web inspector from your browser to find the styles that are in cause. You can try to set the margin to 0 on the "figure" tag in the css file
CEd

Thanks for your reply.

The "figure" tag is already set to "0". Changing the "figure" to something large (eg 50) makes no differenc to the display at all.

I have attached the output from the web inspector below. I cannot see anything that is forcing large margins.

element {
}
figure.effectck-layla figcaption [class*="title"] {
-webkit-transform: translate3d(0,-30px,0);
transform: translate3d(0,-30px,0);
}
figure.effectck-layla figcaption [class*="title"] {
padding-top: 26%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
figure[class*="effectck"] figcaption [class*="title"], figure[class*="effectck"] figcaption [class*="desc"] {
margin: 0;
}
figure[class*="effectck"] figcaption [class*="title"] {
word-spacing: -0.15em;
font-weight: 300;
font-size: 1.5em;
line-height: 24px;
font-family: 'Open Sans';
}
* {
box-sizing: border-box;
}
figure[class*="effectck"] figcaption {
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
}
figure[class*="effectck"] {
text-align: center;
cursor: pointer;
}
element {
text-align: center;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
color: #666666;
font-size: 15px;
line-height: 1.5;
font-family: Roboto,sans-serif;
text-align: left;
font-weight: 300;
font-style: normal;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
}

******This change reduces the spacing but does not eliminate it. *******
/* Common style */
figure[class*="effectck"] {
position: relative;
/*float: left;*/
overflow: hidden;
** margin: 0px 1%; *************
/*min-width: 320px;*/
/*max-width: 480px;*/
/*max-height: 360px;*/
/*width: 48%;*/
background: #3085a3;
text-align: center;
cursor: pointer;
display: inline-block;
will-change: transform;
}

I cannot see why padding around the images remains so large, in particular underneath each image where the padding is much larger.

Any ideas appreciated.

Regards

you must give me an url because this code does not help

Thanks for your reply.
The page concerned is here: 79.170.40.166/jadance.co.uk/index.php/exams

Please note that this is a development site and things will inevitable appear unfinished!

Regards

you must set the margin 0 on line 32