On the default product page I want the image to be smaller so that more of the text is shown. I am using the Horizon theme. The pic takes up way too much room and I will include pics in the description. Here is a pic of what it looks like:
Hi cpryor,
Horizon doesn’t have a built-in setting for the image-to-text ratio, but you can control it with a small piece of CSS.
In the theme editor open your product template, select the Product information section, and scroll down to Custom CSS in the right-hand panel. Paste this in:
@media (min-width: 990px) {
.product-information__grid:not(.product-information--media-none).product-information--media-left {
grid-template-columns: 1fr 50%;
}
}
The 50% is the width of the right-hand column, so the larger you make that number the smaller the image gets. Start at 50% and adjust until it looks right, 55% or 60% will pull the image down further.
Two things worth knowing:
It’s inside a media query so it only applies on desktop. On mobile the two columns stack anyway, so the image stays full width there and nothing changes.
The selector targets the media-left layout. If you switch Media position to Right in the section settings, the class name changes and the rule stops applying, so you’d need to update it to match.
Hey @cpryor
Quick question first of all, which image are you exactly referring to? The image in the description or the main product image on the left?
Once you confirm this then share your store URL and password (if enabled) as well. Happy to point you to the right direction.
Best,
Moeed
Hi @cpryor
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Devcoder 
website is crochetwithtay.com and password is tay2994
The image to the left
Besides the code edits, there is an “equal columns” toggle in the Product Information section. And then just beneath that there is another toggle to adjust the details width.
That worked! Thanks!
Well, maybe not. It seems to work (it adjusts the width) but if I save it, it disappears and goes back to the default.
That’s odd. A couple of things to try.
First, move the same rule out of the section’s Custom CSS and into Theme settings > Custom CSS instead. It’s applied store-wide from there, but the selector is narrow enough that it’ll still only affect the product page grid.
If it still snaps back after saving, add !important to the grid line:
@media (min-width: 990px) {
.product-information__grid:not(.product-information--media-none).product-information--media-left {
grid-template-columns: 1fr 50% !important;
}
}
Horizon sets a lot of the layout on that grid through inline styles and CSS variables, and an inline style always beats a stylesheet rule. That would explain why it looks right while you’re editing and then reverts once the section re-renders on save.
Also worth trying what Maximus3 mentioned before the CSS route. If the built-in toggles get you close enough, that’s the better option, since settings survive theme updates and custom CSS can quietly break with one.
This is what I typed in:
{
.product-information__grid:not(
.product-information–media-none
).product-information–media-left {
grid-template-columns: 1fr 70%;
}
}
I had to get rid of the (min-width: 990px) because it says invalid CSS. It still give me the error of invalid CSS even though it does change the width. Just won’t let me change it. I will look at your other suggestion.
Or you could go to Product Information and check equal columns… seems silly to make the theme have this layout then try to reduce it…
The code you entered is incorrectly formatted, that’s why it wouldn’t save. The correct format is this:
@media (min-width: 990px) {
.product-information__grid:not(.product-information--media-none).product-information--media-left {
grid-template-columns: 1fr 50% !important;
}
}
Not saying this code works, but this is the correct format for doing it.
Don’t remove the @media line, that’s the part keeping this desktop-only. Without it the two columns get forced side by side on phones as well, and you’d end up with a tiny image and squashed text.
The invalid CSS error is coming from the leftover braces. @media isn’t a tag you can strip out on its own, it’s a wrapper around the rule, so if you delete the opening line you also have to delete one of the closing braces at the bottom. In what you pasted there’s a { sitting on its own at the top and two } at the end, which is why it won’t validate.
Here’s a simpler version. I dropped the :not() part since it isn’t doing much here, and put the selector on a single line so a stray line break can’t break it:
@media (min-width: 990px) {
.product-information__grid.product-information--media-left {
grid-template-columns: 1fr 70% !important;
}
}
One thing to watch when copying from the forum: the double hyphen in product-information–media-left has to be two plain hyphens. Some editors and text fields turn – into a single long dash, and then the rule quietly stops matching anything. If it doesn’t work after pasting, retype those two characters by hand.
And if it still reverts when you save, add !important before the semicolon:
grid-template-columns: 1fr 70% !important;
Horizon sets the product page split itself. On desktops wider than 1200px it applies this:
.product-information__grid:not(.product-information__grid--half,.product-information--media-none).product-information--media-left {
grid-template-columns: 2fr 1fr;
}
That is your 2-to-1 layout. The image column is exactly twice the text column.
The last snippet you were given drops the :not(...) part. That is the piece carrying the weight, so the shortened selector now loses to Horizon’s own rule and changes nothing on a desktop screen. Adding !important is what makes it stick.
Try the no-code option first
Open the theme editor and click the Product information section.
Turn on Equal columns. That takes you from 2-to-1 straight to 50/50.
Leave Limit product details width off. That one narrows the text column, which is the opposite of what you want.
If 50/50 is enough, stop there. Settings survive theme updates, custom CSS does not.
If you want the image smaller than half
Put this in Theme settings > Custom CSS, not in the section’s Custom CSS box:
@media screen and (min-width: 990px) {
.product-information__grid.product-information--media-left {
grid-template-columns: 40% 1fr !important;
}
}
40%is the image width. Lower it for a smaller image, raise it for a bigger one.- Turn Equal columns back off before using this, or the two fight each other.
- Desktop only. Phones still stack, nothing changes there.
- If you set Media position to Right, change
--media-leftto--media-right.
Tested on a Horizon store:
Two things that trip people up
- Type the double hyphens by hand after pasting.
product-information--media-leftneeds two plain hyphens. Mac text substitution turns them into one long dash and the rule silently stops matching. - Do not delete the
@medialine on its own. It is a wrapper, so removing it leaves an extra}at the bottom, and that is your invalid CSS error.@mediais allowed in both CSS boxes.
Your image is also too tall, not just too wide
Click the Product media block under Product information.
- Aspect ratio is on Auto, so tall photos stay tall. Set it to Square or Portrait.
- Turn on Constrain to screen height so no single image is taller than the screen.
- Switch Type from Grid to Carousel and all your photos share one frame instead of stacking down the page.
Those three shorten the page far more than the width change does, and they need no code.
Regards,
Ploqo
It finally worked. When I copied and pasted what you have it gave me an error for some reason. So I put it into ChatGPT and it gave me the same thing, but this time it worked. Unsure why, but thanks for your help! This is what worked:
@media (min-width: 990px) {
.product-information__grid.product-information–media-left {
grid-template-columns: 1fr 70% !important;
}
}