Front page header resize

Hi Alex, it’s always easier for folks to help you when we can see your site directly. Could you provide a link so I can look at how you have things set up right now? Thanks!

Hey Alex!

The maximum width Argent supports is 2000 pixels and height is a flexible setting. What’s cool about that is you can crop an image -when you are selecting the image- to a smaller height than what the theme included ( which is 380 pixels. )

But, yes, as Kathryn mentioned it does make it a little easier to provide a solution specific to your needs. ??

One quick solution using a Custom CSS plugin or Jetpack’s CSS module would be:

.home .site-branding {
    padding: 0;
}

Thanks for chiming in, Jose!

zander919 – let me know if Jose’s suggestions work for you, or whether you can provide a link if you need more help.

Hi, I tried the code Jose provided in my custom css module but it did not affect my front page. I also plugged in a couple of values and was unable find any difference.

My website is

Sorry, not sure why it didn’t show up. It is “jamiedew.com.”

Also, I appreciate the help Jose! But no matter how I crop the image it doesn’t actually change the size of the image on the page, it only changes how “zoomed in” it is, per se.

I just don’t want the entirety of the front page to essentially be covered by an image, especially since my blog posts are going to show there.

I already too much white space in between the image and the text because I hid the page title (like “about” and “home”) and it just leaves a big white space there. So if i could greatly decrease the height of the image it would be awesome. Thank you!

Alex,

Taking a quick look I see you are using:

.home .site-branding {
    padding: 300 px;
}

If I change that to:

.home .site-branding {
    padding: 0; /* or 1em */
}

The space is decreased. Try to keep the unit next to the number; CSS is funky that way. Not like Funky Town groovy funky. There are several types of units used like px, rem, em, vh, vw, %, in, mm, cm, and a few others.

Something to keep in mind when it comes to troubleshooting. I’ve had moments when I forgot to include that and an hour later realized it was missing the % on a width setting. :/

Hope that helps! ??

Ok so I am very sorry to be “that guy” by posting three straight times but I think I have just realized that my Custom CSS is not even working at all. I have tried obvious and simple codes and nothing is taking affect. So I say this to 1) shed light on why maybe Jose’s suggestion didn’t work for me and 2) to ask you guys to help me troubleshoot as to why my custom css doesn’t work and doesn’t make changes to my site. Thank you, and I apologize for the posts

Thank you, and I apologize for the posts

Thank you for letting us help and being patient as well. ??

We all started somewhere. Not sure if you saw my post but that may shed some light as to why the CSS may not be working. ??

Thanks Jose! And yea I think the problem is with my Custom CSS feature. I copied your code into it, as well as others which would make obvious changes and nothing has yet to change on the actual site. (I feel like even if I wasn’t using correct syntax, etc i would at least see some kind of change, even if it was an undesired one). But in the past week of trying to change certain aspects of my site using code, nothing has been actualized on the site.

Hey! Ok so I just tried putting that code into the “editor” instead of the feature that reads “custom css” and it worked! I don’t know why Custom CSS doesn’t do anything for me but I believe the Editor(through Jetpack i guess) is doing everything that i wanted the Custom CSS to do. Thanks!

So now all I have is a quick follow up question, do you know how to make it affect all the pages and not just the home page? The other pages’ headers dont seem to be connected to the home/front page one

Ok so I am very sorry to be “that guy” by posting three straight times but I think I have just realized that my Custom CSS is not even working at all.

Looks like it’s working to me – when I view your source in the browser I see this:

<style id="custom-css-css">.home .site-branding{padding:100px}</style>

That’s your custom CSS there. ??

I noticed that there is a stray space between 300 px in the code Jose gave you above – maybe that’s why it wasn’t working, it needs to be 300px to take effect.

Hey! Ok so I just tried putting that code into the “editor” instead of the feature that reads “custom css” and it worked! I don’t know why Custom CSS doesn’t do anything for me but I believe the Editor(through Jetpack i guess) is doing everything that i wanted the Custom CSS to do. Thanks!

You should not edit the original theme files in the Appearance > Editor because you will lose all your customizations every time you update the theme to the latest version.

The editor you’re looking for – which you seem to have found – is Appearance > Edit CSS. (You’ll only see that option once you activate the Jetpack Custom CSS module.)

do you know how to make it affect all the pages and not just the home page?

You can do that by removing the .home class which targets just the homepage:

.site-branding {
  padding: 100px;
}

Let us know how it goes.