How to edit "images w text" section of Minimal theme to make the height smaller

I’m not sure how to modify the code to include the desired height for the “Images With Text” section of the Minimal Theme. I made the image smaller, hoping that would change the section height, but that didn’t work. I wanted to create a little welcome introduction at the top of my page with my products showing immediately below, but didn’t want it to take up much space. Assuming it would be a matter of putting the pixels for the height of the section. My site is StainedGlassStitcher.com and the section I want to add is currently hidden, until I work this out. Thanks for any insights - I’m an old timer IS person and know Assembler, Basic, Cobol and a bunch of languages that are no longer relevant, but haven’t really had time to delve into web design.

Hi @ATH79 , welcome to Shopify Community.

Haha, I also started with low-level programming in Assembler and C 20 years ago.

Regarding your problem, the Image with Text block of Minimal Theme is designed so that each of the 2 blocks (image and text) use 50% of the width available in the row.
For this reason uploading a small image will not produce the desired effect.

But if you are able to find the specific ID of your section element (using Chrome Inspector for example) you can override the behavior, by adding to the end of file theme.scss a code similar to this.

#shopify-section-16286337735fb233b2 .feature-row__item:nth-of-type(1) {
    flex-basis: 25%;
}
#shopify-section-16286337735fb233b2 .feature-row__item:nth-of-type(2) {
    flex-basis: 75%;
}

You need to replace #shopify-section-16286337735fb233b2 with your section specific ID.

The logic is to shrink the 1st block from 50% to 25% and enlarge the 2nd block from 50% to 75%.

You’ll see that the height of the block will shrink and you can tune this parameters as you prefer for the best results.

@ATH79

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

Thanks for the info - I learned Assembler in 1980 and worked in IT for over 35 years - wish I’d had more exposure to the web based stuff - although it didn’t exist then (not many folks use Basic, Fortran, AS or Pascal now). Now I’ve totally changed directions and am pursuing my creative side with Stained Glass, so while I’m fine with doing basic HTML/CSS edits that folks give me examples for I must admit, I really don’t want to learn another language (guess I’m just getting lazy or in reality just want to focus my energy elsewhere). Appreciate your insights and will look into this more.

That would be great - my url is “StainedGlassStitcher.com

This section that I’m referring too isn’t live - I hid it, so do you want me to make it viewable. I can do that and leave it at the bottom of the page and not move it to the top until I’ve fixed it.

Hi, if you make the section viewable it could be easier to suggest you a fix and give you the code

It’s viewable

Try to add the following code at the end of your template file theme.scss

#shopify-section-16286046598272b38c .feature-row__item:nth-of-type(1) {
    flex-basis: 15%;
}
#shopify-section-16286046598272b38c .feature-row__item:nth-of-type(2) {
    flex-basis: 85%;
}

Also remember to remove the additional carriage return you added to the text block.

You should get something similar to this:

Woot! Thanks a ton, that worked great. Really appreciate the help. Enjoy life