Dyad 2 – Reducing height of home page header image(s) w/CSS?
-
Hello,
Is there a way to reduce the display height of the home page header image on Dyad2? The blog in question is todayincthistory.wordpress.com. We love the theme, but we’d like the header image to take up less “real estate” on the home page. Ideally, we’d like to reduce it enough to where someone in a typical browser window can see the first row of posts and part of the second row in the window upon first opening the site.
(For the record, I am a CSS n00b but am trying to learn! I have tried modifying both the “height” and “max-height” properties of both the “.home .featured-content” and “.home .site-banner-media” elements, but that didn’t do anything. Any help/instruction is greatly appreciated!)
The blog I need help with is: (visible only to logged in users)
-
Hi there, go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see what you think.
@media screen and (min-width: 1600px) { .site-banner-media { padding-bottom: 30%; } } @media screen and (max-width: 1599px) { .site-banner-media { padding-bottom: 30% } .home .content-area, .blog .content-area, .single-format-image.has-post-thumbnail .content-area { margin-top: 30%; } } @media screen and (max-width: 850px) { .site-banner-header { bottom: 0; } } @media screen and (max-width: 480px) { .site-banner-media { padding-bottom: 40%; } } -
This looks excellent! It also looks like the CSS changes involved were a lot more multi-faceted than I ever would have guessed… thank you very much for working out a solution!
Just a quick follow-up question: The current display (using your CSS above) looks great, but if I wanted to tweak it (either increase or decrease the height), which numbers should I change in the above code?
Thank you again!
-
Hooray!
The main thing for adjusting the height would be the padding-bottom values. I would adjust them all the same, so if you change the 30% numbers to 25 – a reduction of 5, reduce the 40% value by 5.
Let me know if you have any problems with that.
-
Thank you so much for the information!
I seem to have found a small bug regarding the behavior of the reduced-size header: Whenever the site is viewed on an extra-wide browser window (e.g. when the theme automatically arranges the content in three columns instead of the typical two), a thick white stripe of empty space appears between the header image and the content. This only happens when the browser window is wide enough for the theme to split into three columns; it doesn’t show up when the site is viewed in a 1 or 2 column format, or in mobile.
Is there a way this can be fixed, or is the source of the bug hard-coded into the theme php? Thank you so much for all of your help.
-
Small addendum: I have been able to replicate this bug on a PC using the latest versions of Firefox and Chrome, and on a Mac using the latest version of Safari. Hope this helps. Thank you for your assistance!
-
Ah, I missed that. What we need to do is use an additional Media Query to adjust for screens 1600px and wider. Add this to the very bottom of your custom CSS.
@media screen and (min-width: 1600px) { .home .content-area, .blog .content-area, .single-format-image.has-post-thumbnail .content-area { margin-top: 30% } }Make sure and check various pages and such on your site. In my testing it looks like it does not cause any issues anywhere else, but check just to make sure.
-
-
- The topic ‘Dyad 2 – Reducing height of home page header image(s) w/CSS?’ is closed to new replies.
WordPress.com Forums 