Adjusting Height of Text with Image Block on Desktop

glorykwilliams · ‎04-16-2024

Hi there! Would someone be able to supply code to help shrink the height of our Text with Image hero block on Desktop only? It's very tall and I'd love to be able to condense it a bit. The mobile version is fine as is!

Website: https://www.woodhousespas.com/

Thank you so much in advance!

ThePrimeWeb · ‎04-16-2024

Hey @glorykwilliams,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

Change the value 94 to your liking, before you change it, try it out and see if it fits your needs.

<style>
@media only screen and (min-width: 990px) {
    .image-with-text__inner {
        height: 94vh !important;
    }
    
    a.image-with-text__image.db {
        height: 94vh !important;
    }
    
    .image-with-text__video {
        height: 100%;
        width: 100%;
    }
    
    .image-with-text__image .image {
        width: 100% !important;
        object-fit: cover !important;
    }
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎04-16-2024

Hey @glorykwilliams,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

Change the value 94 to your liking, before you change it, try it out and see if it fits your needs.

<style>
@media only screen and (min-width: 990px) {
    .image-with-text__inner {
        height: 94vh !important;
    }
    
    a.image-with-text__image.db {
        height: 94vh !important;
    }
    
    .image-with-text__video {
        height: 100%;
        width: 100%;
    }
    
    .image-with-text__image .image {
        width: 100% !important;
        object-fit: cover !important;
    }
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

glorykwilliams · ‎04-16-2024

This was SO helpful and worked perfectly. THANK YOU!

glorykwilliams · ‎04-16-2024

Oops, I just realized this bumped up the size of all of the Image with Text blocks. We have two additional ones on the home page that we'd like to keep at a decently proportionate scale! Is there a way to isolate that code so it won't affect those other blocks, only the header one?

ThePrimeWeb · ‎04-16-2024

Delete the previous one and use this instead.

<style>

@media only screen and (min-width: 990px) {
    #shopify-section-ccee2db7-8f17-4c0d-9576-f6236bec93cb .image-with-text__inner {
        height: 94vh !important;
    }
    
    #shopify-section-ccee2db7-8f17-4c0d-9576-f6236bec93cb a.image-with-text__image.db {
        height: 94vh !important;
    }
    
    #shopify-section-ccee2db7-8f17-4c0d-9576-f6236bec93cb .image-with-text__video {
        height: 100%;
        width: 100%;
    }
    
    #shopify-section-ccee2db7-8f17-4c0d-9576-f6236bec93cb .image-with-text__image .image {
        width: 100% !important;
        object-fit: cover !important;
    }
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

glorykwilliams · ‎04-16-2024

Thank you! I tried it out on our test site and I don't think it's working for the main block unfortunately!

Test site link: https://thmigpfkyo49w5me-52330070214.shopifypreview.com

ThePrimeWeb · ‎04-16-2024

Hey @glorykwilliams,

In the test site, the ID is going to be different that's why.

In your test site, the code should be

<style>
@media only screen and (min-width: 990px) {
    #shopify-section-71eaeb62-98b7-403b-9c9a-6c17f55c40f4 .image-with-text__inner {
        height: 94vh !important;
    }
    
    #shopify-section-71eaeb62-98b7-403b-9c9a-6c17f55c40f4 a.image-with-text__image.db {
        height: 94vh !important;
    }
    
    #shopify-section-71eaeb62-98b7-403b-9c9a-6c17f55c40f4 .image-with-text__video {
        height: 100%;
        width: 100%;
    }
    
    #shopify-section-71eaeb62-98b7-403b-9c9a-6c17f55c40f4 .image-with-text__image .image {
        width: 100% !important;
        object-fit: cover !important;
    }
}
</style>

Was I helpful?