How to force the image size to be fixed in Image With Text section (Refresh Theme)

Snow_Wolf
Explorer
67 0 14

Hello,
Whenever I add an image and then a somewhat longer text to the "Image with text" section, the image gets badly distorted. Please see before/after pictures attached (along with store URL). How can I fix this? Ideally I would like the text to occupy half of the space, and the image to fit the other half. Right now it does that, except it zooms in the image very badly. Before.png

After.png

Replies 27 (27)

GabrielS
Shopify Partner
455 97 105

Hi,

 

Sharing your website link can be very relevant. Doing so would allow me and other community members to properly look into this.

 

Cheers!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post or empower me with a coffee.
Snow_Wolf
Explorer
67 0 14

Hey @GabrielS as mentioned in my post the URL is in the pictures I uploaded :). Thanks in advance for your help

GabrielS
Shopify Partner
455 97 105

Hi @Snow_Wolf - thanks for pointing that out!

 

I checked the website and I couldn't find the section from your screenshot, can you share its link? All the links from homepage doesn't seem to be set.

 

Cheers!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post or empower me with a coffee.
Snow_Wolf
Explorer
67 0 14

Woops @GabrielS that was pretty silly of me 😁, the page in question can be found here. Thanks!!

Snow_Wolf
Explorer
67 0 14

Hey @GabrielS, haven't been able to find a solution, if you have any ideas what causes this, I would very much appreciate it!

GabrielS
Shopify Partner
455 97 105

Hi there,

 

One solution can be to use the following CSS code:

@media (min-width:768px) {
.image-with-text__media.image-with-text__media--adapt.gradient.color-background-2.global-media-settings.media {
padding-bottom:0px !important;
}
.image-with-text__media.image-with-text__media--adapt.gradient.color-background-2.global-media-settings.media img {
  position: relative !important;
  padding-top: 140px !important;
}
}

Adding the above code at the end of your base.css file should reflect the changes as in the below screenshot:

GabrielS_0-1665425112516.png

 

Cheers!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post or empower me with a coffee.
Snow_Wolf
Explorer
67 0 14

Thanks @GabrielS that's certainly a start. I added that code in base.css but there's still some formatting issues. For example section " Real-time air quality data" you can see that the image isn't centered vertically (big white space above it, nothing beneath) 

GabrielS
Shopify Partner
455 97 105

Unless someone else from this community can provide a better option- for further adjustments, I'd suggest to hire a web developer.

 

Cheers!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post or empower me with a coffee.
Snow_Wolf
Explorer
67 0 14

Thanks GabrielS. Maybe @Dan-From-Ryviu@PageFly-Victor or @valiermedia can help as they have helped me before on other topics. Thanks in advance!!

PageFly-Victor
Shopify Partner
7865 1785 3058

Hi @Snow_Wolf

This is PageFly - Advanced Page Builder. If the below code doesn't work well, you can try another code here:

  • Go to Online Store->Theme->Edit code
  •  Asset-> base.css  paste the below code at the bottom of the file.

#shopify-section-template--16419695558890__image-with-text-0 .image-with-text__media.image-with-text__media--adapt.gradient.color-background-2.global-media-settings.media{

    display: grid !important;

}

#shopify-section-template--16419695558890__image-with-text-0 .image-with-text__media.image-with-text__media--adapt.gradient.color-background-2.global-media-settings.media img{

padding-top:0 !important

}

PageFly_0-1665476760923.png

 

 

Hope my solution works perfectly for you!

 

Best Regards;

PageFly



<script>

 

Snow_Wolf
Explorer
67 0 14

@PageFly-Victor Thanks for your reply. This did not work, it's not helping the images to be more aligned. The pictures are still uncentered

Snow_Wolf_0-1665483824178.png

 

PageFly-Victor
Shopify Partner
7865 1785 3058

you can try to replace the old code

#shopify-section-template--16419695558890__image-with-text-0 .image-with-text__media.image-with-text__media--adapt.gradient.color-background-2.global-media-settings.media,#shopify-section-template--16419695558890__16648261177425438f .image-with-text__media.image-with-text__media--adapt.gradient.color-background-2.global-media-settings.media{

    display: grid !important;

}

#shopify-section-template--16419695558890__image-with-text-0 .image-with-text__media.image-with-text__media--adapt.gradient.color-background-2.global-media-settings.media img,#shopify-section-template--16419695558890__16648261177425438f .image-with-text__media.image-with-text__media--adapt.gradient.color-background-2.global-media-settings.media img{

padding-top:0 !important

}

 

PageFly_0-1665486329168.png

 

Snow_Wolf
Explorer
67 0 14

Hey @PageFly-Victor definitely making some progress! This only affected that one picture in the screenshot though, I'd like this change to be the case for all images part of a "Image with Text" section on this page.

Also, any way to add padding on top, right and bottom rather than full blown picture? 

It already looks much, much better, thank you for your help!

Snow_Wolf
Explorer
67 0 14

Hi @PageFly-Victor just trying my luck and see if you have ideas to get me over the finish line on this :), thanks!

PageFly-Victor
Shopify Partner
7865 1785 3058

Do you want all the sections on this page to be aligned the same?

Snow_Wolf
Explorer
67 0 14

Hi @PageFly-Victor ,
Yes exactly, I need to:

  1. Have the same alignment for all "Image with text" sections"
  2. Adjust your code to add padding on top, right and bottom rather than have full blown picture

Thank you!!

PageFly-Victor
Shopify Partner
7865 1785 3058

sorry reply late. you can add my code

.image-with-text .image-with-text__media{
display: grid !important;
}
@media(min-width:1024px) {
.image-with-text .image-with-text__media.image-with-text__media--adapt.gradient.color-background-2.global-media-settings.media img{
padding:73px 73px 73px 0 !important
}
}
@media(max-width:1024px) {
.image-with-text .image-with-text__media.image-with-text__media--adapt.gradient.color-background-2.global-media-settings.media img{
padding:0px !important
}
}
@media(max-width:767px) {
.image-with-text .image-with-text__media.image-with-text__media--adapt.gradient.color-background-2.global-media-settings.media img{
padding:40px !important
}
}

Snow_Wolf
Explorer
67 0 14

Hey @PageFly-Victor thanks for your reply, much appreciated!

It's certainly a start, many images look better already, but some don't. Take this page: the images in the sections "Real-time air quality data" and "Quiet as a leaf in the wind" look perfect, as I would expect. But the images in the sections "Medical-grade air filtration" (very zoomed in), "Powerful air circulation" (no padding to the left), "Designed to make your life easier" (no padding to the left), and "Smart & connected" (zoomed in).

Appreciate your continued help on this!



 

PageFly-Victor
Shopify Partner
7865 1785 3058

you can relace 

old code

@media(min-width:1024px) {
.image-with-text .image-with-text__media.image-with-text__media--adapt.gradient.color-background-2.global-media-settings.media img{
padding:73px 73px 73px 0 !important
}
}

new code

@media(min-width:1024px) {
.image-with-text .image-with-text__media.image-with-text__media--adapt.gradient.color-background-2.global-media-settings.media img{
padding:73px 0 73px 0 !important
}
}

Snow_Wolf
Explorer
67 0 14

A bit better thanks @PageFly-Victor but still some issues (see Smart & Connected" or "Medical-grade air filtration" sections for example) here 

PageFly-Victor
Shopify Partner
7865 1785 3058

you can add new code 

.image-with-text__media img{object-fit: contain !important}

Snow_Wolf
Explorer
67 0 14

Thank you once again @PageFly-Victor, this is quite helpful. There's still a couple hiccups, if you could take a look at the site and the attached 🙏

Snow_Wolf
Explorer
67 0 14

Sorry @PageFly-Victor looks like my attachment didn't go through, please see attached.

PageFly-Victor
Shopify Partner
7865 1785 3058

Hi @Snow_Wolf ,

 

This is PageFly - Free Landing Page Builder.

 

To do it, you can go to Online store => themes => actions => edit code and add this code on file base.css

 

@media (min-width:768px) {
.image-with-text__media.image-with-text__media--adapt.gradient.color-background-2.global-media-settings.media {
padding-bottom:0px !important;
}
.image-with-text__media.image-with-text__media--adapt.gradient.color-background-2.global-media-settings.media img {
position: relative !important;
padding-top: 180px !important;
}
}

 

Or you can change "180px" to other numbers that you want to increase on your own. 

 

Hope it helps! 

PageFly 

Zheilman
Visitor
1 0 2

I've only used shopify for 2 days and just came across this same problem putting my profile photo + blurb on my About Page.

 

Here's my fix:  I put it into the "Custom CSS" box in the page editor. 

 

@media (max-width: 768px) {
  .image-with-text__media--small {
    height: fit-content;
  }
  img {
    overflow: visible;
    height: fit-content;
    padding-top: 0;
    width: 100%;
    position: relative;
  }
}
@media (min-width: 768px) {
  img {
    overflow: visible;
    height: inherit;
    padding-top: 200px;
    width: 100%;
    position: relative;
  }
}

LiefdeApparel
Excursionist
18 3 1

This was so helpful and worked perfectly for me. For some reason there is a faint outline for the frame (pic below). Any idea how to remove that? Screenshot 2024-03-12 at 3.58.12 PM.png

DJR23
Visitor
1 0 0

Spent like an hour looking for this exactly - thanks for posting!