I have two graphics-related issues I was hoping someone could help me out with.
- The logo in my banner has randomly lost its transparency on one of my product pages (which has its own template due to the external link). It’s fine everywhere else on the site.
Why does this happen and how can I make it transparent again? (and prevent it from happening again)
Edit: Just realized that only on this page, the burger menu doesn’t work on mobile either. I also lost the Recommendations and back button on the bottom of the page. And the product images open up directly to the images…wow, that one line of code change to make the Add to Cart button go to an external link instead really messed things up!
- The banner/splash image on my home page looks mostly fine on desktop unless you make your window too big. But on mobile, it gets cut off on both sides.
How can I fix it so it shows the whole image on mobile?
Desktop:
Mobile:
Hii @optostar ,
Welcome to Shopify Community
You can go to the assets folder open the file theme.css
and paste this code on the top.
.hero__inner{
padding: 0px;
}
Thank You.
Thanks for your help, I added the code to the top of theme.css and it doesn’t seem to have made a difference in the mobile view - the sides of the image are still cut off. Maybe I should make the graphic a different size? It is currently 1200x600.
To resolve this issue, I’m trying to follow the instructions here to make a different/longer 9:16 image for mobile: https://community.shopify.com/c/Shopify-Design/optimise-the-customized-image-for-mobile/td-p/763847/highlight/false
However, I am stuck on the step “Add a **desktop-only** class as per the screenshot.” because the screenshots are broken, so I can’t see what they’re adding it to. Furthermore, the author was using a theme.scss.liquid whereas I only have theme.css and theme.liquid.
Any help is appreciated, thank you!
hello @optostar
I help to make different images for desktop and mobile view can you please share your shop URL and password
Hi @Kinjaldavra , thanks for your response. Shop URL is https://clearhorizonsoptometry.com/ it is already launched so no password.
These are the instructions I was trying to follow but could only do the first 3 steps: https://github.com/lixonic/Shopify/wiki/Mobile-specific-hero-section-image-on-Debut-theme
#1: Go to Assets > theme.css and paste this at the bottom of the file: .site-header__logo-image{ background-color: transparent !important; } #2: Go to Assets > theme.css and paste this at the bottom of the file: @media only screen and (max-width: 749px){ .hero__inner{ padding: 15px 0 !important; } .hero__inner .mega-title–large{ font-size: 30px !important; } .hero__inner .mega-subtitle–large{ font-size: 18px !important; } .hero__inner .hero__btn{ margin-top: 5px !important; font-size: 15px !important; } } Hope it helps!
