Shopify themes, liquid, logos, and UX
Hello,
I would like to keep the white container in the banner as shown in the desktop version, and adapt it all to fit nicely on mobile devices. Thanks!
website is flipshop.it
Solved! Go to the solution
This is an accepted solution.
@FlipShop - add this css to the very end of your base.css file and check
@media screen and (max-width:767px){
#shopify-section-template--17535372230920__696dd426-1133-4c51-9e0d-d847c858d14c .banner__box{background: #fff !important; --color-foreground: #414141 !important; --color-button: inherit !important; --color-button-text: #fff !important; width: 70%;}
#shopify-section-template--17535372230920__696dd426-1133-4c51-9e0d-d847c858d14c .button{color: #fff !important;}
}
The layout on the second image is the thing I would like. Is it possible to make the whole thing smaller? so it resizes to the mobile version. Also, I can put less texts so it's smaller
This is an accepted solution.
@FlipShop - add this css to the very end of your base.css file and check
@media screen and (max-width:767px){
#shopify-section-template--17535372230920__696dd426-1133-4c51-9e0d-d847c858d14c .banner__box{background: #fff !important; --color-foreground: #414141 !important; --color-button: inherit !important; --color-button-text: #fff !important; width: 70%;}
#shopify-section-template--17535372230920__696dd426-1133-4c51-9e0d-d847c858d14c .button{color: #fff !important;}
}
It worked! is it possible to adjust the container in the picture as in the desktop version? do that it is in the middle and center
so it's not possible to have something like the desktop version? because like this it is very long on iPhone, not what I was hoping for
How do you suggest me to do it then? because I am lost about this thing 😕
It works now, it is so much better, thanks!!
Can you help me on another thing?
If you go on your phone down on the homepage, you will see that the images for all the collections are different for on sale product and normal product. Is there a way to make all pictures even (preferably bigger like the ones for the items on sale).
Also, is there a way to make the "Shop by brand" pictures and texts for the mobile version all even?
I would like, if possible, to have all pictures the same size as the ones for the items on sale, and maybe have the "In offerta" badge a little smaller.
it is iPhone X, what are you using?
For me on desktop it is all fine, but on iPhone it looks like that
@FlipShop - I am using android, so I believe it is due to iphone only, because had the code wrong it would have affected android too.. and many times we do have such issues on iphones, you need someone who has iphone and can write code to try to solve this issue for the iphone.
Hello @FlipShop
Your store is password protected, please share the password so I can review it and provide a solution.
Hello @FlipShop
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.
.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient.slideshow__text--center.slideshow__text-mobile--center {
background: transparent !important;
}
h2.banner__heading.h1 {
color: #fff !important;
}
.banner__text {
color: #fff !important;
}
a.button.button--primary {
background: #fff !important;
color: #000 !important;
}
it doesnt change on mobile, plus on destktop now there isn't a container anymore.
Hello @FlipShop
I will provide you with the solution, Please remove the above-given code.
Thank you, very much appreciated!
Hello @FlipShop
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.
@media screen and (max-width: 767px){
#shopify-section-template--17535372230920__696dd426-1133-4c51-9e0d-d847c858d14c .banner__box {
width: 75%;
margin-top: 35px;
margin-bottom: 35px;
}
}
I can't see the code
Hello @FlipShop
Please check the code.
it looks like this
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024