Shopify themes, liquid, logos, and UX
The the text with image section of my homepage, I would like to get the heading and text moved up to align with the top of the image, as well as reducing the size of the image so it is not so elongated. I have tried uploading different sizes of image but it doesn't seem to make a difference. Website is www.sweetviolet.co.
How it looks now:
How I would like it to look (maybe make the image even a bit smaller):
Solved! Go to the solution
This is an accepted solution.
Hi @SweetViolet adjust the padding-top in a custom CSS setting to be ~half
.image-with-text__content {
padding-top: 3rem;
}
Note the way the theme is design this also moves the image UP.
💣While it looks like you got an eye for design avoid the trap of removing too much whitespace, or trying to excessively align everything forgetting how eyelines work.
It's how new merchants slowly strangle themselves and create a cramped boxy feeling website.
The image itself should try to be edited for the desired aspect ratio, then adjusted with CSS or customizations.
The image sizing in my browser looks fine, like your second example image (chrome desktop windows)
Note: the theme uses a trick to auto apply an excessive padding-bottom to enforce an aspect ratio which can make it difficult to tailor a specific sizing.
To toy with it use padding-top or a negative margin:
.image-with-text__media {
padding-top: 8%;
margin-right: -13%;
}
Again careful with the whitespace, and make sure to check it in different device sizes.
Good Luck.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
This is an accepted solution.
Hi @SweetViolet adjust the padding-top in a custom CSS setting to be ~half
.image-with-text__content {
padding-top: 3rem;
}
Note the way the theme is design this also moves the image UP.
💣While it looks like you got an eye for design avoid the trap of removing too much whitespace, or trying to excessively align everything forgetting how eyelines work.
It's how new merchants slowly strangle themselves and create a cramped boxy feeling website.
The image itself should try to be edited for the desired aspect ratio, then adjusted with CSS or customizations.
The image sizing in my browser looks fine, like your second example image (chrome desktop windows)
Note: the theme uses a trick to auto apply an excessive padding-bottom to enforce an aspect ratio which can make it difficult to tailor a specific sizing.
To toy with it use padding-top or a negative margin:
.image-with-text__media {
padding-top: 8%;
margin-right: -13%;
}
Again careful with the whitespace, and make sure to check it in different device sizes.
Good Luck.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
Thanks for the info. I was wondering about whether you could make a margin negative. I will play around with it and see what I can do. Appreciate the input.
Learn what's possible with customizing Shopify Checkout beyond what's available out of...
By Shopify Feb 19, 20252m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025