Solved

Adjusting Height of Text with Image Block on Desktop

glorykwilliams
Tourist
11 0 1

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!

 

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2130 609 474

This is an accepted solution.

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.

ThePrimeWeb_0-1713285843259.jpeg

 

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

Replies 8 (8)

ThePrimeWeb
Shopify Partner
2130 609 474

This is an accepted solution.

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.

ThePrimeWeb_0-1713285843259.jpeg

 

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
Tourist
11 0 1

This was SO helpful and worked perfectly. THANK YOU!

glorykwilliams
Tourist
11 0 1

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
Shopify Partner
2130 609 474

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
Tourist
11 0 1

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
Shopify Partner
2130 609 474

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?

Buy me a coffee

🙂

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

SORRY!!! Thank you for your patience. This worked successfully. Thank you so much!

ThePrimeWeb
Shopify Partner
2130 609 474

No worries!

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!