How can I adjust the size of images beside text on my homepage?

Technical Q&A
1

Dear all,

My homeopage has 3 “image with text” sections.

My opinion is that the pictures on the side are way too big. Is it possible to add a line of code to give the pictures beside the text a fixed width and height?

if i upload a smaller picture, the page will stretch the picture. If i put white borders beside the picture to make it smaller (works) BUT the mobile display is not aligned anymore.

https://de-e-specialist.myshopify.com

pw: retuow

this is an example how i would like to have the size of the pictures with text:

https://www.mijnelektrischestep.nl

Thanks in advance!
Regards Wouter

2

Hi Wouter,

what viewport (browser width) are you in, when the images seem to wide? With responsive themes there are many different states a site layout can be in. (On a 1920px-desktop screen it “feels” perfectly fine to me.) That being said, with responsive themes that are not custom made and don’t provide customization options to modify such settings – while making your requested change is definitely not a hard thing to do – one has to test thoroughly to avoid missing side effects created by this custom change.

Mario

3

Thank you for your reply. I use indeed 1920px.

if you see the example i gave below my own url, these pictures are smaller than my pictures right? It is also the image with text section. Isn’t possible to have the same size as that site?

Or would that interrupt with other sections? It is purely focused on the image with text sections. It is not bad indeed, but the pictures are too present on the front page in my opinion. Like all pictures from image with text are 300x300 px eg.

if this won’t work from your perspective I will leave it like this

4

You could try adding this to your theme.scss.liquid, and see if this makes you happier :wink:

@media screen and (min-width: 769px) {
  .feature-row__image-wrapper > img {
    max-width: 300px;
  }
}
1 Like
5

Thank you sir, i really appreciate. Is there also a command for the height? So that it is basically a square image.

i can copy that code at the end of the mentioned theme right?

I’m sorry man, im not a star in coding.

ill try it out when im home.

thanks in advance

Wouter

6

Thank you sir, i really appreciate. Is there also a command for the height? So that it is basically a square image.

Well … the safest way would be to make sure the image is square before it get’s loaded. You can add max-height: 300px; right after the max-width-line also, but really, the behavior with non-square images will not necessarily be what you expect or want. There are ways around this, but for that someone with a better coding background should have a look at the actual code.

i can copy that code at the end of the mentioned theme right?

Correct – i recommend adding it to the end, adding a comment that explains why this block made it in the code. Such as …

/* Fixed image size START: https://community.shopify.com/c/forums/replypage/board-id/technical-qa/message-id/41121 */
@media screen and (min-width: 769px) {
  .feature-row__image-wrapper > img {
    max-width: 300px;
  }
}
/* Fixed image size END */
1 Like
7

Alright thank you very much, I will use square images for my page.

So if i implement the given code in theme.liquid the max width is now 300 px. If i use a image eg 480x480 the width is capped at 300 px right? Does it cut off at 300 or shrink the image to 300px?

”You can add max-width: 300px; right after the max-width-line also”

  • do you mean width or height here?

if I use a square image you recommend the image before uploading 300px300px?

the height will stay also 300px or will it stretch like before?

regards Wouter

8

max-height … of course :wink: I’ll fix it in the post above in a second.

If you want to prevent stretching, you can add the line

height: auto;

next to the max-width (and possibly max-height) instructions.

Mario

1 Like
9

… like so

/* Fixed image size START: https://community.shopify.com/c/forums/replypage/board-id/technical-qa/message-id/41121 */
@media screen and (min-width: 769px) {
  .feature-row__image-wrapper > img {
    height: auto;
    max-width: 300px;
    max-height: 300px;
  }
}
/* Fixed image size END */
1 Like
10

Thanks man! Your really helpful. When im at home im going to implement! Appreciated for your time.

11

You’re welcome! :wink:

If it works, it would be great if you mark it as the solution!

Mario

12

Ill do that when im home!

1 Like
13

I add the piecie of code in: theme.liquid.

/* Fixed image size START: https://community.shopify.com/c/forums/replypage/board-id/technical-qa/message-id/41121 /
@media screen and (min-width: 769px) {
.feature-row__image-wrapper > img {
height: auto;
max-width: 300px;
max-height: 300px;
}
}
/ Fixed image size END */

Nothing happened. When I add it to timber.sccss.liquid, the pictures resize, but the footer is above the header.

I don’t see theme.scss.liquid, only got theme.liquid.

Am I missing something?