Reduce Size of Image and Align Text in Text with Image Section - Studio Theme

Solved

Reduce Size of Image and Align Text in Text with Image Section - Studio Theme

SweetViolet
Explorer
60 0 22

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:

image with text.jpg

How I would like it to look (maybe make the image even a bit smaller):

image with text aligned.jpg

Accepted Solution (1)

PaulNewton
Shopify Partner
7721 678 1620

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


View solution in original post

Replies 2 (2)

PaulNewton
Shopify Partner
7721 678 1620

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


SweetViolet
Explorer
60 0 22

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.