X3Photo Gallery Forums

JMM · 06 Nov 2023, 09:35

Hello, Karl,

I searched the forums here for the word spacing and vertical space, but didn't find any results pertaining to my question here.

And I acknowledge that the vertical spacing that I'm asking about would quite likely be related to the font used on my X3 sites.

If you look at THIS page, below the breadcrumbs, text is displayed from the Content section of that gallery: the word Questions, the 3 green lables, and the text below each lable.

My question here is: Is there a way (Custom CSS, maybe?) whereby I can reduce:

The vertical spacing between the Breadcrumbs line and the first line from the Content section (in this case, the word Questions)?
The vertical spacing between the last line of the Content section of that gallery & the start of the images?

I don't have many galleries (maybe a couple of dozen) where I use Content, so I would use whatever Custom CSS just for those galleries, not site-wide.

However, while I am asking about reducing vertical spacing, and this would apply site-wide for all of my 1/2-dozen or so X3 sites: is there a way to reduce the vertical spacing between the horizontal line below the menu and the page titles (on this particular page, between the horizontal line and the words "Research questions" ?

Thank you in advance & have yourself a great week.

Regards,
John

06 Nov 2023, 13:21

This is quite tedious, because because margins are also assigned separately for different screen sizes. You start adjusting between elements here, unless you only adjust on this page, I can't possibly assume margins will be perfect on all other pages. To me, it seems borderline pointless, as no adjustments will make anything "easier to read".

The vertical spacing between the Breadcrumbs line and the first line from the Content section (in this case, the word Questions)?

This is actually the <h2> element in your content, with margins above and below, which is default in for all headers in html, because the margin is there to separate the section from the above, and create some space below the the content it emphasizes. Even without X3, this is how headers work.

Basically, you can change margins:

.content h2 {
 margin: ...
}

Or better, assign your own class to the <h2>

<h2 class="my-custom-header-margin">

.my-custom-header-margin {
  margin: ...
}

Or perhaps don't use <h2> at all? That is the element that is causing the natural margins.

<div class="myheader">text here, it doesn't have to be header element</div>

.myheader { /* style the header */ }

The vertical spacing between the last line of the Content section of that gallery & the start of the images?

Override the natural margin below the context. Will of course affect the margin between content/gallery on all pages, unless only assigned to this page. There is some margin below your <p> paragraphs in the content also, but most of the margin is assigned to context.

.context {
  margin-bottom: 0 !important;
}

Use !important to override different margins on different screen sizes.

is there a way to reduce the vertical spacing between the horizontal line below the menu and the page titles (on this particular page, between the horizontal line and the words "Research questions" ?

Very counter-productive, as that negative space is there to allow the page to breathe. If the title goes closer to the menu, it will look more cluttered 100%. You can try:

.main {
  padding-top: 0 !important;
}

X3Photo Gallery Forums

Vertical spacing between sections2 posts

Vertical spacing between sections

Re: Vertical spacing between sections