By aaronmarsh632 on

Hi,

I have a content type with a bunch of fields, and I have them arranged 1 under the other on my node using display suite. If I go to 'Manage Display' I change the field template to expert and set the element h3 for each field so the label will be slightly bigger than the fields value, but now there are large gaps between the labels and the fields, so now it takes up a whole load of vertical page space, how can I decrease the gap between each piece of text? I guess i'll have to change something in 1 of the css files but I don't know what.

Please can anyone help?

Thanks

⋅ Categories: Drupal 7.x

Comments

nevets’s picture

nevets commented

A link to a page showing the behavior would help. My guess would be you need need to decrease line-height and/or margin-bottom on the h3 tag.

drupalshrek’s picture

drupalshrek commented

Each browser has tools to enable developers to inspect the CSS being used by a particular HTML tag. For example, in Google Chrome, if I right click and select "Inspect element" when hovering over an item, I can see the HTML and CSS being used for that item. In addition, I can even change those values which I am looking at to see the effect making such a change would make.

For example, if I hover over the B (for Bold) in the editing toolbar when I am editing this post and do "Inspect element", I see the HTML as:

<input type="image" alt="Bold(B)" title="Bold (Alt + B)" accesskey="B" id="bue-0-button-0" class="bue-button bue-sprite-button editor-sprite-button" src="/sites/all/modules/bueditor/icons/x1.png" style="background-position: -0px 0;" tabindex="0">

and the CSS includes:

media="all"
.bue-e10 .bue-sprite-button {
background-image: url(https://drupal.org/files/bueditor-sprites/sprite_7cd18835b1b79d28571553895d57fd06.png);
width: 20px;
height: 20px;
}

I can now do things like change the width to 40px to see the effect. Of course, when I refresh the page, all these temporary changes will be reset, so if I want to keep the effect I have to make the change in the CSS files.

drupalshrek

aaronmarsh632’s picture

aaronmarsh632 commented

Hi,

Thanks for the replies. I got the stlye.css from the themes folder and changed the margains for h3, its now working. I tried the inspect element through firefox but it wasnt working - however once I changed the css and reuploaded to the server I had to clear the sites cache to see the change so I guess this is why I didnt see the resutls because resfreshing the page would of removed my temp changes through the inspect element page.

Thanks