Extra space added to image fields

[kcostellomak]

Hello,

I am trying to create a project grid with NO SPACE between the images. I need to be able to assign CSS to the images so I can create rollover effect. I need these images to link to other pages. I have tried the following:

1. Image element: I can not find a way to assign a class to the image field

2. Classic image element: I can assign a class but I get extra space along the bottom of the images I cannot find a way to get rid of it.

3. Ttext element then add an image. This works great in terms of adding the image and class BUT as soon as I try to make the image a link, I get space along the bottom again.

Here it is as I have it now. These are text elements without the links added. http://cherylbenard.com/arch/

I am running the latest version of x-pro.

PLEASE HELP!!

[kcostellomak]

I figured out how to add a class to the image element.

[jade]

Hi @kcostellomak,

@kcostellomak

2. Classic image element: I can assign a class but I get extra space along the bottom of the images I cannot find a way to get rid of it.
3. Ttext element then add an image. This works great in terms of adding the image and class BUT as soon as I try to make the image a link, I get space along the bottom again.

There is a default bottom margin for the classic image elements. To get rid of it, you can add the ready class mbn to the classic image element.

Please check this link for more CSS Ready Classes available that you can use:

@ThemecoKB

Utility Classes

The classes listed in this section are not meant to be targeted with CSS to alter their styling or functionality. Instead, these classes already perform a specified action and are meant to be used with various elements when needed.

Spacing Helpers

In order for pages to be structured properly, all elements must receive some type of margin or padding for adequate spacing. While this spacing is beneficial in most cases, it might be something you wish to remove or modify at other times. We have provided plenty of helper classes to use in these instances. These helper classes allow you to modify the margin and padding of elements by removing the spacing completely, or adding a small, medium, or large amount of spacing. These classes are an acronym built from three different parameters:

1. Margin (m) or padding (p).
2. Top (t), left (l), right (r), bottom (b), vertical (v), horizontal (h), or all (a).
3. None (n), small (s), medium (m), or large (l).

For example, if you wanted to add a class that removed all of the margin from the top of an element you would use mtn, which stands for margin top none. Alternately, if you wanted to add a small amount of padding to both sides of an element you would use phm, which stands for padding horizontal medium.

To figure out where the spacing on an element is coming from, you can easily do this in Chrome. Simply right click on any element and select Inspect Element from the dropdown. This will reveal a popup at the bottom of your window, which will display HTML on the left and CSS on the right. You can hover over the HTML in the popup and select elements to see where any margin or padding is coming from. Margin is designated by a reddish/orange color and padding is designated by green.

Spacing: None

• mtn

• mrn

• mbn

• mln

• mvn

• mhn

• man

• ptn

• prn

• pbn

• pln

• pvn

• phn

• pan

Spacing: Small

• mts

• mrs

• mbs

• mls

• mvs

• mhs

• mas

• pts

• prs

• pbs

• pls

• pvs

• phs

• pas

Spacing: Medium

• mtm

• mrm

• mbm

• mlm

• mvm

• mhm

• mam

• ptm

• prm

• pbm

• plm

• pvm

• phm

• pam

Spacing: Large

• mtl

• mrl

• mbl

• mll

• mvl

• mhl

• mal

• ptl

• prl

• pbl

• pll

• pvl

• phl

• pal

Hope this helps.

[kcostellomak]

So helpful! Thank you!!!

[ruenel]

You’re welcome!
We’re glad @Jade were able to help you out.