• Resolved aseques

    (@aseques)


    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)

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

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

    Thread Starter aseques

    (@aseques)

    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)

    Not that I can find, sorry!

    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.

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

    @wmvelandia – Thank you so much. This is exactly what I have been looking for. ??

    @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 https://learningclouds.co.uk ]

    Oh, wow – I posted that edit before I say your reply @ronthewebguy – thank you so much, I’ll try it now!

    @nostradamuszen – try this CSS to remove the dark filter

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

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

    Mark

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @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).

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Featured images are huge on desktop’ is closed to new replies.