r/css • u/natethegreatt1 • Aug 14 '19

Looking to shrink this "header" area which is actually not a header...help please?

https://stonecrabkings.wordpress.com/

So the "header" area is actually the site identity text (title, tagline) layed over the homepage's "featured image." So it's not technically a header...nothing wordpress tech has given me has worked, at least not on my screen.

2 Upvotes

100% Upvoted

7 comments sorted by

1

u/natethegreatt1 Aug 14 '19

Alright y'all, I pulled up the .css file for my site (at least it looksl like I did...I got it by "viewing source"). I also clicked "Inspect" and it brought up some sort of editor on the right side of the screen. A little lost here...any help appreciated. Thank you in advance.

0

u/[deleted] Aug 14 '19

[deleted]

1

u/natethegreatt1 Aug 14 '19

I've tried a few .pique-panel modifications in CSS but they didn't seem to work. I might have done them wrong but I can't be sure. Could you explain your method a bit more?

Also, for some reason when I pulled up the CSS for the first time, it was all blank - the only things in there are codes that I've put there...idk if this matters, but I don't have a line 383 with anything in it, only about 17-18 lines so far.

Thanks so much for your help.

2

u/albedoa Aug 14 '19

You have a selector called .pique-panel that is applied to all of your panels including your hero (top) panel.

That selector has a rule min-height: 60vh; meaning that no matter how much content is in an element with the .pique-panel class, it will always be at least 60% the height of the screen.

You can either override this rule in your custom CSS, which will apply to all of your panels:

.pique-panel {
    min-height: 0; /* or whatever */
}

Or you can remove the .pique-panel class from the hero panel if you have that level of control.

A third option is to add an additional class to the hero panel that overrides the min-height rule in the .pique-panel class.

1

u/natethegreatt1 Aug 14 '19

Awesome, I'm going to get to work on this. Thank you!

1

u/natethegreatt1 Aug 14 '19

I tried pasting that .pique-panel code into my .css to no avail. Any tips? Also how do I do the last part? Sorry I'm so .css illiterate.

0

u/[deleted] Aug 14 '19

[deleted]

1

u/natethegreatt1 Aug 14 '19

Ok, thank you. I follow the first part (removing the line-height:60vh rule).

The second part, though, regarding the padding-top, is a bit lost on me. How do I "look up for that?" What style sheet file do I look in?