The header in Argent is a background image that may be cropped at different screen sizes, as you can see on the demo:
https://argentdemo.wordpress.com/
For this reason, it works best with an image that does not have any important visual information on the edges.
Have you tired using css adding the line width:100%?
Kathryn,
I understand that the image may be cropped at different screen sizes, but what I am trying to do is make all header images behave the way the home page image does.
If you notice that the home page header continues to scale down even on small browser dimensions. However, other pages stop scaling down once the browser window is 600px wide. This is the same for your live demo as well
I have tried various things in CSS (inlcuding width: 100%) to no avail and cannot seem to find what code is causing the homepage header to behave differently than the other pages
Thanks
Connor
Update: I have solved the issue
This line is in the themes CSS for the home page
.home .site-branding {
padding: 2.5em 0;
}
I added this to the @media screen and (max-width: 767px) section
.site-branding {
padding: 2.5em 0;
}
And now all pages headers behave the same on smaller browser resolutions
Thanks
Connor
Very nice. Glad you resolved this.
Glad you achieved the effect you wanted. Just a heads-up that if you edited the theme files directly, your changes will be overwritten and lost every time the theme is updated to the latest version. To avoid this, you can add a custom CSS override instead. An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.
As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.
