How can I adjust the size of an image in my 'About Us' section?

URL:flamingdickshotsauce.com

I used some code to change the look of my “About Us” section recently. I wanted the image below the text, which it is, but the size is a little off. I’d like it to fill out the page a little more.

Here’s the code I used:

@media only screen and (max-width: 749px){
.image-with-text__media–small {
height: 100rem;
}
.image-with-text__media–small img {
object-fit: contain;
}
.image-with-text__media-item.image-with-text__media-item–small.image-with-text__media-item–top.grid__item {
order: 2;
}
.section-template–21702787072304__c85981c8-2daa-41c1-b6c1-7cc77bc59fc7-padding {
padding-top: 0px !important;
}
}

And the result:

As you can see, the photo is weirdly small and off center. Any ideas on a fix would be appreciated. Thanks!

@FlamingDick , replace above code with the below one.

@media only screen and (max-width: 749px){
	.section-template--21702787072304__c85981c8-2daa-41c1-b6c1-7cc77bc59fc7-padding .image-with-text__media--small {
	    height: 460px !important;
	    margin-top: -50px;
	    margin-bottom: 25px;
	}
	.image-with-text__media--small img {
		object-fit: contain;
	}
	.image-with-text__media-item.image-with-text__media-item--small.image-with-text__media-item--top.grid__item {
		order: 2;
	}
	.section-template--21702787072304__c85981c8-2daa-41c1-b6c1-7cc77bc59fc7-padding {
		padding-top: 0px !important;
	}
}

Hi @FlamingDick

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

div#shopify-section-template–21702787072304__c85981c8-2daa-41c1-b6c1-7cc77bc59fc7 img {

padding-right: 50px !important;

}

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

Exactly what I needed. Thanks!