Featured images are huge on desktop

Resolved aseques
(@aseques)

3 years, 5 months ago

I am starting a new blog with this theme, and after setting the featured images I see that the images look really good on mobile, but when I’m on desktop the featured image occupies a lot of screen space.

The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)

Moderator James Huff
(@macmanx)

Volunteer Moderator

3 years, 5 months ago

That’s how the the theme intentionally operates, nothing broken there.

They’re designed to span edge-to-edge.

Thread Starter aseques
(@aseques)

3 years, 5 months ago

Thanks James, are you aware of any extension that can help me with that? Cropping the image to make it more rectangular when in full screen would be fine for me.

Moderator James Huff
(@macmanx)

Volunteer Moderator

3 years, 5 months ago

Not that I can find, sorry!

wmvelandia
(@wmvelandia)

3 years, 4 months ago

I ran across this code snipet, maybe it will help in your case?

/* controls featured image height. eg 60hv is 60% of vertical height of window*/
.site-header.featured-image {
min-height: 60vh;
}

btw, I’m a newbie, so the above is literally *everything* I know.

Joy
(@joyously)

3 years, 4 months ago

You could just use a different theme that looks more like you prefer. There are quite a lot of choices out there.

Ron the Web Guy
(@ronthewebguy)

3 years, 4 months ago

@wmvelandia – Thank you so much. This is exactly what I have been looking for. 🙂
nostradamuszen
(@nostradamuszen)

3 years, 3 months ago
@wmvelandia @ronthewebguy

Many thanks guys, it worked for me too – but I’m now foxed by a dark filter that overlays all the header images I’m using. If anyone finds out how to get a handle on that I’d much appreciate hearing about it.

And indeed, any other nifty means of customising the 2019 theme!

Cheers, Mark

[Edit: Yes, I have unchecked the box that says ‘Apply a filter to featured images using the primary color’ – and I simply get a dark, muddy filter applied instead of a coloured filter – see the disappointing result at http://learningclouds.co.uk ]

Oh, wow – I posted that edit before I say your reply @ronthewebguy – thank you so much, I’ll try it now!
- This reply was modified 3 years, 3 months ago by .
- This reply was modified 3 years, 3 months ago by .
Ron the Web Guy
(@ronthewebguy)

3 years, 3 months ago

@nostradamuszen – try this CSS to remove the dark filter

.site-header.featured-image:after {
background: none;
}

nostradamuszen
(@nostradamuszen)

3 years, 3 months ago

@ronthewebguy Ron – it worked, instandly – thank you so much!

Mark
Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

3 years, 3 months ago
@nostradamuszen, You should now increase the text shadow colour around the header text to ensure the text is readable:
```
.site-header.featured-image {
    /* It was at 0.35 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
```
But in future @ronthewebguy, @nostradamuszen, make sure to create your own threads to discuss your issues as this thread has been derailed (including me).