Reducing cover size on edition theme via css injection

Running edition theme v1.0

Seeking to reduce the cover area to 50% height, while maintaining the general alignment / padding of the header and content elements.

I’ve tried a few different injections attempting to modify the cover… best I can do is resize the cover image by 50%, but the container didn’t resize and the body content is still off screen!

Would anyone be able to help me? (New to CSS styling, thank you so much for your help.)

Site: https://simoncrawfordash.com/

Hey @ashmonsi,

It could be something like:

<style>
    .with-full-cover .cover {
        height: 50vh !important;
    }

    .with-full-cover .cover-content {
        transform: translateY(0);
    }
</style>

The CSS was wrapped in <style> tag assuming you add the CSS to code injection field.

1 Like

Incredible, that works - thank you!

What theme are you using there, if you don’t mind me asking? And what code did you use to accomplish the transition effect where the cover image seems to zoom out as the webpage first loads?

Edition theme, and that zoom effect came standard :slight_smile:

1 Like

Thanks, @ashmonsi! Have you just changed your theme though? I can’t see the image anymore… or maybe I’m just looking at the wrong site :crazy_face: