Fixed image size - image with text

vvouu
Excursionist
24 2 4

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

0 Likes
r8r
Shopify Expert
1478 162 488

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

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
0 Likes
vvouu
Excursionist
24 2 4

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

0 Likes
r8r
Shopify Expert
1478 162 488

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

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

 

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
vvouu
Excursionist
24 2 4

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

0 Likes
r8r
Shopify Expert
1478 162 488

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 */

 

 

 

 

 

 

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
vvouu
Excursionist
24 2 4

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

0 Likes
r8r
Shopify Expert
1478 162 488

max-height … of course 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

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
r8r
Shopify Expert
1478 162 488

… 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 */
Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
vvouu
Excursionist
24 2 4

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

0 Likes