Shopify themes, liquid, logos, and UX
When I switch to mobile view on the home page, the header that says "TOTALLYVAPOR" gets cut off and ruins the aesthetic. I would like to add some custom code to resize for mobile but cant find it anywhere else on the internet so I'm coming to the forums.
Also if anyone has any suggestions on how I can make the background images look better when they stack on mobile I'd appreciate that too 🙂
https://totallyvapormerch.myshopify.com/
password: deolyi
Solved! Go to the solution
This is an accepted solution.
Hi @vincenzomeschi,
Try this code below.
1. In your Admin page, go to Online store > Themes
2. Choose the theme you want to edit then click Actions > Edit code.
3. Open the base.css under the Asset folder.
4. Add the code below.
@media only screen and (max-width: 750px) {
.banner__content.banner__content--middle-left.page-width {
width: 60%;
}
h2.banner__heading.h0 > span {
font-size: clamp(20px, 4vw, 40px);
}
#Banner-template--14937396281480__image_banner > div:nth-child(2) {
position: absolute;
width: 65%;
}
}
This is what it looks like with the code above.
This is an accepted solution.
Hi @vincenzomeschi,
Try this code below.
1. In your Admin page, go to Online store > Themes
2. Choose the theme you want to edit then click Actions > Edit code.
3. Open the base.css under the Asset folder.
4. Add the code below.
@media only screen and (max-width: 750px) {
.banner__content.banner__content--middle-left.page-width {
width: 60%;
}
h2.banner__heading.h0 > span {
font-size: clamp(20px, 4vw, 40px);
}
#Banner-template--14937396281480__image_banner > div:nth-child(2) {
position: absolute;
width: 65%;
}
}
This is what it looks like with the code above.
That looks amazing! Thank you! Is there a way you can make the content left-aligned as well?
Hi @vincenzomeschi,
Here you go
@media only screen and (max-width:750px) {
.banner__box.content-container.content-container--full-width-mobile.color-background-2.gradient {
text-align: left;
}
}
Awesome. The heading still has the "R" in Vapor cut off as shown in the screenshot above.
@media only screen and (max-width: 750px) {
.banner__content.banner__content--middle-left.page-width {
width: 70%;
}
Changed width to 70% and works just fine.
Hello Made40. I am having the same issue where the banner looks good on desktop but gets cut off on mobile. I tried copying and pasting the code as instructed but it still did not work. Please help.
Hi @Wanderlvst,
What is your website?
Hello, I tried this code below and nothing happened, can you please help me?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024