I have images that are the same physical width (as photoshop files) but not the same height & I cannot get them to appear the same width on screen, no matter how much I juggle the “fit, fill, custom” buttons.
The help files say they need to be the same aspect ratio, but that cannot be possible all the time & certainly isn’t in this case. If I made them the same aspect ratio, the welcome message would have acres of white space above & below it.
My most obvious fix is to just add the ”welcome” text below the main logo & replace that image later, once the store is properly up & running but seriously, is there no way to just tell these images to be the same width? Honestly, I find web stuff quite bewildering at times. If I had hair I’d be pulling it out by now! I’m glad there are people around who know what they’re talking about.
I have a pair of images in each case (a logo & a welcome message), one pair for desktop & one pair for mobile & I’ve had help with CSS to split these so that they only appear on their respective formats. Now if I could just get them to appear the same width at all times…
Oh, and here’s your link:
Sorry, I forgot to add the screenshots (& I can seem to edit my posts, so…)
On Desktop…
On Mobile…
On full width…
Not sure what sections and blocks you’re using.
I’d, for example, start with an “Image with text” section, make it “Page” width and “Vertical” alignment, then add 2 “Image” blocks like this:
Image with text section settings:
Image block settings:
Then you can play with “Custom” width and/or Left and Right padding settings if you want to make them narrower.
Horizon family themes offer much more flexibility, just need to experiment more…
Thanks @tim_tairli
Hmm… I used a “custom” section because I wanted to use just an image but with no text & I couldn’t see an “image only” block. Wasn’t sure if that made a difference so I opted for custom.
There is a preview link in the second post if you wanted to see exactly how it was set up.
I saw the preview and I saw that it’s mostly custom, but not everything is obvious from the outside.
But yeah – most sections you can add or remove blocks as you wish so that they become kinda same 
So i’ve removed text blocks from the “Image with text” and added a second Image instead…
Okay, so the blocks are all set to page width & vertical alignment already.
When I click on the image within the block, I get a completely different set of options, none of which seem to solve my problem.
Out of interest, I’m using two logos & two welcome messages & I’ve had the CCS written to use one pair for desktop & one pair for mobile. It just seems worth asking whether the code is likely to be causing an issue because it deals with sort of “if over x pixels use this, if under, use that” kind of expressions.
Try to replicate my setup from above from scratch.
The key is to have the same set of settings on both blocks. Then the images will be stretched to be the same width.
To have different images for desktop and mobile I usually suggest to create two identical sections, one with content (and settings) for mobile, another – for desktop.
Then one section gets this “Custom CSS” to hide entire section on desktop:
@media (min-width:750px) {
{
display: none;
}
}
and another section gets this, to hide it on mobile:
@media (max-width:749px) {
{
display: none;
}
}
These CSS rules are designed to work in “custom CSS” section settings, and would not work elsewhere.
I doubt you have CSS rules which apply to one image one way, but differently to another, like:
@media (min-width:750px) {
.image-1 { width: 100%; }
.image-2 { width: 75%; }
}
The custom CSS I have looks like this:
@media screen and (min-width:750px)
{
div#shopify-section-template–27098227310941__section_LqD8Ax{display:none; visibility:hidden;}
}
@media screen and (max-width:749px)
{
div#shopify-section-template–27098227310941__section_UGwCTT{display:none; visibility:hidden;}
}
I’ll have a look at your suggestions & give it a go. Thanks, Tim.
By the way, I’ve been adding the CSS into the “base” thing I get to by going to “themes” & clicking the three dots & choosing “edit code”.
Is that not the correct place?
That’s basically the same set of rules I’ve suggested.
Only yours also change visibility which does not matter if display: none; is at the same time.
My code will ultimately be rendered very similarly for your visitors.
I prefer my way because:
- It does not changethe theme code. Editing theme code may make your future theme updates problematic – code edits may be stripped during theme updates, while theme settings, including “Custom CSS”, will persist.
- The identifier used in your code (div#shopify-section-template–27098227310941__section_UGwCTT) is auto-generated by Shopify and will be different in another theme, it may even change if you download theme zip and re-upload it.
When you use “Custom CSS” section settings, the system will automatically prepend current selector to the pasted code (behind the scenes), so you do not need to inspect your site to find this selector.
So my rule in Custom CSS:
@media (min-width:750px) {
{
display: none;
}
}
Will be become this when it reaches visitors browser:
@media (min-width:750px) {
#shopify-section-template–27098227310941__section_LqD8Ax {
display:none;
}
}
Okay, that makes sense.
Unfortunately most of this stuff is so far beyond me (until the penny drops for each part) that it takes me days & days to do what you’re doing in seconds.
Leave it with me. I’ll get back to you.
I can’t believe it, but that actually worked! 
I removed the previous code & added your code to the CSS place for each block.
Thanks so much!
Okay, so I’m left with two things…
- One little thing that’s happened is that, in removing all of the new code from the base.css area & adding yours to each block, I’ve removed the bit that moved the logo down a bit on the mobile version.
As you can see from the screenshots, in my template, Ritual, on the desktop version, the image seems quite happy to butt up to the header whereas, on the mobile, they seem happy to overlap. I’m not sure why this is.
In any case, I think I either need another bit of code to move that image block down, which I can insert into the block’s own CSS area or I need to tweak a setting so that they don’t overlap.
(I think the fact that they overlap on the mobile may be a flaw in the template itself.)
- When I preview my site, the logo & welcome text go full width & it looks frankly ridiculous.
Is there a way to limit the maximum size of these things? I mean, if someone’s going to look at this on a massive monitor or even a giant TV, “full width” just gets a bit silly.
It’s a bit too late here and can’t help with everything now.
Some things to consider:
-
Consider Narrow page width in Theme settings=> Page Layout, as “Page width” is limited, but the limit is 1200px. Narrow will make it to 900px(?). This is site-wide though.
-
You may also try playing with “Desktop width”: Custom and set width less than 100%;
and/or Left/Right padding on each Image block.
-
Since you have different sections for mobile and desktop, you can easily fix overlap with different top padding on these sections.
It can also depend on “Transparent heading” setting as it may try to overlap first section.
-
There are some CSS rules in theme code which apply differently to the first section and not to the second even though the first section is hidden – this is a side-effect of the “show this on mobile, that on desktop” trick we use here.
The second section may be the top one visually, but it’s still the second for CSS rules
Thanks. I really appreciate your time.
Just serve text and only use ONE image for GRAPHICS CONTENT.
Serving multiple images to FAKE text content is a bad move in MULTIPLE ways:
Accessibility, Performance, & Translations.
And just plain a good example of how new merchants burn time trying to “fix” design non-issues instead of moving on to actual business matters.
Cutting your own legs off by trying to avoid doing it right but still burning time fixing a self imposed problem.
From the short term to the long term your gonna end up spending 3x the time handling stuff this way trying to save time.
Then just make ONE image when they are on top of each other.
Then resize/scale the contents in the image itself.
Aspect ratio isn’t a fixed width and fixed height it’s a ratio.
If there’s two 10 gallon jugs of water and one is poured into a 10 gallon bucket
And the other into a 8 gallon bucket …or a 30 gallon bucket…
The end amount will be different in different ways.
So that will happen when you ignore the rule a theme gives you: same aspect ratio.
When designers have gone out of their way to provide rail guards, that X needs to Y, that’s the hint that ignoring the lines will burn you.
It’s how a lot of shops end up with looking like ramshackle drop-sh…ing websites because they keep ignoring the design effort that has been given; see pretty much every wish-post about “whitespace”, “square” or “centering”.
Design layout space is NOT the same as images intrinsic sizes, nor is some customers screen size the same etc etc etc.
It’s bewildering not because of just missing logic or asset mgmt, or not knowing CSS capability.
It’s because your over thinking one goal by treating it as different goal, while also ignoring warnings, while also underestimating what’s possible for ANY goal in a website.
- Wrong goals: New merchants love to saddle themselves with busy work playing web-coder as a distraction from focusing on actual business matters.
- ANY website goal: it will always be be complex to be able to show something(s) in some specific way to BILLIONS of people on BILLIONS of devices
Don’t underestimate that burden on your time it will waste it silently.
Thanks for your time, Paul.
