Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi there,
I am having some trouble with making changes to my website on the debut theme. I have my background image at a perfect size on the desktop view, however once I click the mobile view, the image is enlarged and cuts 75% of the original. I would like to make it so that image/background fits perfectly on the mobile view, without adjusting the settings on the desktop view.
Any help would be great! Thanks!
Solved! Go to the solution
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:
@media screen and (max-width: 749px){
div#Hero-hero-1 {
height: 71vw;
}
div#Hero-hero-2 {
height: 72vw;
}
.image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item {
height: 66vw;
}
}
This is an accepted solution.
Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.
Hello @VertaL1fe ,
Please share your store URL and Password.
So that I will check and let you know the exact solution here.
Hi,
website: vertalife.com
password: Shadowkob1
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:
@media screen and (max-width: 749px){
div#Hero-hero-1 {
height: 71vw;
}
div#Hero-hero-2 {
height: 72vw;
}
.image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item {
height: 66vw;
}
}
This is an accepted solution.
Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.
Hello I am facing same issue, can you please please help me ?? I need it urgently my website is published pleaseeeee
Helllooooo !! Can you please help me ? pleaseeeeeeeee
Hi @shilpa_etsy
Ok, please tell me what help you need.
THIS IS URGENT. I'm having the same problem. I'm using two gif images for media width above 1290px and below. One's oriented landscape and the other portrait. When I view the site on my phone, the image extends vertically taking the height of the entire page and it extends horizontally to the right, beyond the page. But when I view it on the Shopify editor (mobile view) or the chrome's inspect (mobile view), the image fits perfectly on the page. For the portrait gif I'm using the recommended ratio for the background image from Shopify. I've tried the above code that you have mentioned, it didn't work. Here's my website and the screenshots. Also I'm attaching the snippet of my background image.
<style>
html, body {
background-image: url("https://cdn.shopify.com/s/files/1/0868/8251/7314/files/Background.gif?v=1719004431") !important;
background-size: cover !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-position: center center !important;
}
@media (max-width: 1290px) {
html, body {
background-image: url("https://cdn.shopify.com/s/files/1/0868/8251/7314/files/Mobile_Background.gif?v=1719247721") !important;
background-size: cover !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-position: center center !important;
}
}
</style>
Hi @ZestardTech,
This solution works great regarding your original solution posted for the mobile view.
Do you perhaps have code for ensuring that the background (banner image) changes for fullscreen view and fits correctly without changing the desktop view, similar to your solution above for mobile view.
Thanks!