Minimal Theme: Issues with "Image with Text" and padding between navigation, body

Store Design
1

Been driving myself crazy all night trying to figure this out. Felt like I achieved some results, but I’m afraid even if I’m getting the look I want, I may be causing more harm than good, so I reset everything. You can view the site here, but I also posted a screenshot below. The only changes I kept were adjustments made in the header and 0px padding in the index section.

How the page looks by default
How the page looks by default1507×1435 155 KB

I’m trying to resize the picture in the “Image with Text” section, and have the padding between the picture and text be as small as possible.

If I go into feature-row.liquid, I can change the width value from 700 to 300 and get the desired size of the image. However, it doesn’t change the margins or padding of the image with text section, so it makes the spaces between the image + text and section + navigation look larger (pictured below).

{% include 'image-style' with image: section.settings.image, width: 700, height: 640, wrapper_id: img_wrapper_id, img_id: img_id %}

How the page looks with image resized to 300px
How the page looks with image resized to 300px1795×1450 144 KB

I’d really like to resize the image, get rid of the extraneous padding it creates, and keep everything centered. Any help would be greatly appreciated!

2

@Sailormean
Welcome to shopify community
how may I help you?
Which space do you want to remove?

3

hii, @Sailormean
Can you mark which padding/margin you want to remove.
Thank You.

4

Hi, thanks!
Thinking about it, the padding issue may be manufactured by me trying to crudely resize the image. Regardless, I’m trying to close these two gaps marked below.

E29AF884-CC5D-41B2-87D8-D9B242084AF4.jpeg
E29AF884-CC5D-41B2-87D8-D9B242084AF4.jpeg400×323 16.2 KB

This is the resized image though, done using the code in the original post. Basically, I just want to be able to resize the image to what I’d like but also prevent these gaps from forming, or be able to make them smaller at least.

sorry if this isn’t making much sense — I’m not running on much sleep haha. please me know if I’m not explaining things well!

5 
.feature-row__item.feature-row__text.feature-row__text--left {
    margin-left: -38px !important;
}
div#FeatureRowImageWrapper--1630520112ab423743 {
    margin-top: -30px !important;
}

Add this code in theme.scss

6

Thanks! Ill give this a try first thing tomorrow morning. Will this also close the gap between the image and text section and navigation/header?

7

Hey Zworthkey! Thanks so much – the latter half of the code worked in shifting the image up! However, unfortunately the text part of the “image with text” section won’t budge.

8

hii, @Sailormean
If it is helpful then like and accept my solution.
Thank You.

9

Hey Zworthkey – will do! Do you happen to know how to get the text to shift to the left, though? The code won’t affect it. I can shift the image to the right by adding to the bit you gave me, however, it causes everything to be uncentered since the image is the only thing being moved. Thanks!

div#FeatureRowImageWrapper--1630520112ab423743 {
    margin-top: -45px !important;
    margin-right: -10px !important;
}