Gantry 5 Helium Template Question

[guy_in_ohio]

How to you make the white space smaller (where I have the red arrows)?

Both the space between the menu and the article title and the article title and the start of the article text.

I have a custom.scss file but I'm not sure what to add.

Thanks!

[AMurray]

I would guess margin-top (and maybe margin-bottom) (above/below "Past Projects" respectively) but that could also be "margin-top" (above "Nothing at this time" The best you can do is identify with the browser's developer tool (F12 typically e.g. in Firefox or Google Chrome) to find out what CSS is causing the large space.

It's more difficult to guess if we don't have a link to the page to view the source code in order to give you a more accurate answer.

SO "Past Projects" seems to be like heading1 (<h1> so you'd apply the margin-top and margin-bottom to that, or create your own CSS class name like :

Code: Select all

.past_project_heading { 
margin-top: 15px; 
margin-bottom:5px;
}

Something like that would go in your custom.css and then you would apply the class name to the <h1> tag (or whatever it is) as an example:

Code: Select all

<h1 class="past_project_heading">Past projects</h1>

That's my rudimentary guesswork.

Perhaps the folk at Gantry can provide better guidance given it's their template/product.

[guy_in_ohio]

Thanks for your help. I'm getting close.

https://neilrisko.com/HCE/index.php/pro ... t-projects

Any suggestions would be greatly appreciated.

[pablop76]

Currently, the only option to set the height is

Code: Select all

body {
    line-height: 1.5;
}

in the file _typography.scss

Code: Select all

// Body Base
body {
	font-size: $core-font-size;
	line-height: $core-line-height;
}

change the value in yours custom.scss

[Webdongle]

Change

margin 01.JPG

set in custom scss

Code: Select all

margin: -10px auto;

margin 02.JPG

Or -11px or -12px or -13px or -14px etc

fyi
https://docs.gantry.org/gantry5/tutoria ... tyle-sheet

If Production Mode is set to No, then Gantry will recompile the CSS/SCSS automatically when changes are made.

[guy_in_ohio]

Thank you!

[guy_in_ohio]

Is there a way to make the text <p> (Lorem ipsum dolor sit amet, consectetur...) line up to the top of the image on the left? Thank you so much for your help. https://neilrisko.com/HCE/

[Webdongle]

Yes but not sure how you would do it.

[nacc]

Is there a way to make the text <p> (Lorem ipsum dolor sit amet, consectetur...) line up to the top of the image on the left?

Yes. Currently, the HTML for <p> that contains the image looks like this

Code: Select all

<p><img src="/HCE/images/OLDimages/chris_fauber_2019.jpg" alt="Chris Fauber" style="margin: 20px 10px 0px 0px; float: left;" width="200" height="300"><br style="clear: right;"></p>

Replace the HTML with

Code: Select all

<p><img src="/HCE/images/OLDimages/chris_fauber_2019.jpg" alt="Chris Fauber" style="margin: 0.25em 0.9em 0 auto; float: left; width: 200px;"></p>

[nacc]

Another idea is to replace the <p> with

Code: Select all

<p style="float: inline-start; margin: 0.75em 1em 0.5em auto; max-width: 200px;"><img src="/HCE/images/OLDimages/chris_fauber_2019.jpg" alt="Chris Fauber"></p>

[guy_in_ohio]

Thank you very much!

[guy_in_ohio]

When I bring up the home page I'm sometimes forced to refresh the page because the heading (Highland County Engineer, Chris Fauber) is cut off.

Any ideas how to fix this?

[pablop76]

You can add UIKit and use the UIKit framework component code directly in the particles or write your own particle

[guy_in_ohio]

Thanks everyone for all your help!

I can't figure out where to ask this (or find the answer after several hours of searching):

Can you copy or duplicate a particle, that is not yet in the particles directory (like one that came with the Helium or Hydrogen theme)?

I have read the instructions at https://docs.gantry.org/gantry5/tutoria ... -particles but I can't find anywhere how to copy a particle from one theme to another if it's not in the particles directory.

[pablop76]

which particle from which template?

[guy_in_ohio]

I think I understand it now. Thanks anyway.