Shopify themes, liquid, logos, and UX
Hello, I hope everyone is doing well! Currently, I love how the main image banner on my homepage looks on the mobile screen. Sadly on the desktop it is too big and I would like to make it smaller ( so you can see the whole character ) and add some padding around it if possible. Im not sure if the image size is the problem but please let me know!
The URL is: https://a54738-4.myshopify.com/
The password is: image
Solved! Go to the solution
This is an accepted solution.
Hi @HarlowJ
This is Noah from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the </head>
<style>
@media screen and (min-width: 767px){
.banner__media.media img {
object-fit: contain;
}
}
</style>
Here's how its look on my end :
Hope this can help you solve the issue
Best regards,
Noah | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
This is an accepted solution.
Hi @HarlowJ
This is Noah from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the </head>
<style>
@media screen and (min-width: 767px){
.banner__media.media img {
object-fit: contain;
}
}
</style>
Here's how its look on my end :
Hope this can help you solve the issue
Best regards,
Noah | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Hey Noah,
I hope you are doing well.
This worked perfectly! Thank you so much and have a great rest of your day.
Best regards,
Harlow
Hey Noah,
could you help me too :D? URL: motormemories.de Password: 123
On the product-page "Erschaffe dein Kunstwerk!", the payment-method banner should be below the "add to cart" and not over the whole screen
Thanks a lot!
Greetings from germany
- Fabian
Hi @HarlowJ
You can solve it by adding this CSS code at the bottom of your base.css file
@media screen and (min-width: 990px) {
.banner__media.media > img { object-fit: contain !important; }
}
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025