Need help aligning header that has text, image, and print link

[mldardy]

I have a header that I want to show similar to the image below

Ignore the dropdown and all of the links to the right except for the Print link. I want to have the text ‘Account Overview’ lined up with the PGA image and the Print link justified all the way to the right . The Account Overview should be lined up with any image. PGA image is just one example but if I have another image that is wide than the PGA image it should line up with the text.

In my code pen everything the Print link doesn’t justify to the right and the spacing between Account Overview and the logo are too close together and not spaced out as shown in the image above. I need help on how to fix this to look similar to the image above.

[kicken]

This is fairly easy with Grid.

HTML:

<header>
  <div class="title">
    Account Overview
  </div>
  <img class="logo-header" src="https://i.imgur.com/Ls2mMpk.png">
  <div class="print">
    <a href="">
      <i class="fa fa-print fa-print-color-blue"></i>
      &nbsp; Print
    </a>
  </div>
</header>

CSS:

header {
  display: grid;
  grid-template-columns: max-content auto auto;
  grid-gap: 2rem;
}

.logo-header {
  max-width: 225px;
  max-height: 150px;
}

.title {
  font-family: Charles Modern;
  font-size: 36px;
  font-weight: 300;
  line-height: 44px;
  letter-spacing: -0.15000000596046448px;
  text-align: left;
}

.print {
  text-align: right;
}

[Archibald]

Here is a way of doing it using CSS Flex:

[PaulOB]

I believe the other posters have answered your question but I’d just like to mention that for the following:

@mldardy

and the Print link justified all the way to the right

All you need is margin-left:auto on the print link and that will push it all the way over to the right.

.print{margin-left:auto}

Could you tell me what this means as I’ve never seen it before:

width: Hug (86px);

What value is ‘Hug’. I can’t find it in the specs anywhere? Or is that some sort of pre-processor code accidently mixed in with real css?

Also what is this doing?

letter-spacing: -0.15000000596046448px;

Can I have a ‘use case’ for that please?

[mldardy]

@PaulOB

Could you tell me what this means as I’ve never seen it before:

width: Hug (86px);

What value is ‘Hug’. I can’t find it in the specs anywhere? Or is that some sort of pre-processor code accidently mixed in with real css?

Also what is this doing?

letter-spacing: -0.15000000596046448px;

Can I have a ‘use case’ for that please?

All of this code is what I copied from a website called Figma that is used for the project that I’m working on. It is a collaborative design tool for design, prototype, develop, etc. for each of our pages that we design. In that design tool there is a css template for each component that you click on and things like Hug and letter-spacing are in that template. I coped and pasted into the css file in my OP. It’s probably not needed but just something that is checked during a code review. Does that make sense?

[PaulOB]

@mldardy

Does that make sense?

Ok yes it’s some preprocessed code but not actual css.

@mldardy

I coped and pasted into the css file in my OP.

You can only use code like that inside whatever application you are using (Figma). I assume at some point it gets compiled into css. You can’t copy and paste pre processed like that as it’s not css and no use to anyone outside of figma. What you would need is the real css that you get when you view the live page.

It doesn’t really make a difference to your question as that part wasn’t relevant but I didn;t want you to think you could just copy code like that and put it in a css file anywhere

[mldardy]

I still need help with this @PaulOB @Archibald @kicken or anyone else that can help. I have to match what it looks like in Figma for normal and responsive view. I updated my code pen to what I currently have now for my code.

Here are the screenshots of what it looks like in Figma and you can see the css values as well. The first is what the normal view should look like and the second is the responsive should look like with the Account Overview is supposed to wrap and the Print icon should show without the word ‘Print’. Please disregard The ‘Export’ and it’s icon and all of the other links in the header except Print and it’s icon, the logo and ‘Account Overview’ if that makes sense.

When I test and inspect if I remove the width it looks good in the normal browser mode

but when I add it back it looks like this

Here is what it looks like responsive

I need help fixing this but not sure how with those Figma values. If any of you have any input to get those to look like those Figma screenshots it would help a lot.

Thanks

[PaulOB]

@Archibald gave you the starting point so you really only needed to tweak and add media queries etc.

Here’s a quick rejig to get the layout I think you wanted.

The small screen will look like this:

If you need to match exactly your drawings then the mechanics are the same but you just have to refine the measurements etc.

(Of course if you wanted all that other stuff in the header then you’d need to encapsulate them in a similar structure .)

[mldardy]

@PaulOB

@Archibald gave you the starting point so you really only needed to tweak and add media queries etc.

Here’s a quick rejig to get the layout I think you wanted.

The small screen will look like this:

If you need to match exactly your drawings then the mechanics are the same but you just have to refine the measurements etc.

(Of course if you wanted all that other stuff in the header then you’d need to encapsulate them in a similar structure .)

Hi Paul, this looks great. My only thing is the ‘Account Overview’ title needs to be moved over to the far left instead of a little over to the right in your example

How would I fix that?

[PaulOB]

It is at the far left of the header!

Just remove the max-width if you want a viewport width but that would be a design mistake. That would be about a mile wide on my 27” iMac.

Or were you talking about body margins on small screen?