Spacing around Images

Spacing around Images was created by Traveller

Posted 5 years 4 months ago #50196
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?
Attachments:

Please Log in or Create an account to join the conversation.

Replied by ced1870 on topic Spacing around Images

Posted 5 years 4 months ago #50197
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

Joomlack Webmaster and Developer

by ced1870

Please Log in or Create an account to join the conversation.

Replied by Traveller on topic Spacing around Images

Posted 5 years 4 months ago #50230
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

Please Log in or Create an account to join the conversation.

Replied by ced1870 on topic Spacing around Images

Posted 5 years 4 months ago #50240
you must give me an url because this code does not help ;)

Joomlack Webmaster and Developer

by ced1870

Please Log in or Create an account to join the conversation.

Replied by Traveller on topic Spacing around Images

Posted 5 years 4 months ago #50242
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

Please Log in or Create an account to join the conversation.

Replied by ced1870 on topic Spacing around Images

Posted 5 years 4 months ago #50243
you must set the margin 0 on
Code:
figure[class*="effectck"] { margin: 0; }
line 32

Joomlack Webmaster and Developer

Last Edit:5 years 4 months ago by ced1870
Last edit: 5 years 4 months ago by ced1870.

Please Log in or Create an account to join the conversation.

Time to create page: 0.679 seconds

Fast and powerful creation, customizable and responsive.

Read More

We have 334 guests and no members online