Hello,
I am trying to reduce the height of my main section. Wondering how I would go about doing so.
1 Like
Please follow the instructions below.
- From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
- Go to Asset folder and open the theme.css file
- At very end of the code, add the code below
NOTE: Adjust the 80 to the height you want. The said code will have a maximum height 80% of the screen height.
#tt-pageContent img.lazyload {
max-height: 80vh;
}
@GildedSocial , do this tofix it in 20 seconds:
- In your Shopify Admin go to: online store > themes > actions > edit code
- Find Asset > theme.css and paste this at the bottom of the file:
.tt-promo-fullwidth{
max-height: 300px !important;
}
@media (max-width: 749px){
.tt-promo-fullwidth{
max-height: 250px !important;
}
}
300px = desktop
250px = mobile
I must note that forcing a banner height is not a good idea - the concept of responsive web design is coding with adaptive heights and widths so they can adapt to any device. Sometimes a specific section will look good on your device but bad on your client’s devices, which may end up hurting one’s conversion rates and take a long time for you to figure out what is wrong. Your theme’s banner doesn’t allow a fluid height.
I strongly advise testing it in multiple devices to ensure it’s looking as you wish before going live.
With that being said, there are responsive copy/paste thoroughly tested banners like this as well if you want to save time and potential future headaches. It will adapt to any image’s height and stay responsive in any device, so it may be up your alley. You can simply edit the image to the perfect size, create one for mobile and one for desktop, and the banner will adapt.
I hope it helps.
Kind regards,
Diego