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!