My Shopify page: https://thefreshjuicefactory.com/
Can someone please help me. I love how my website looks on computer but on the phone it dosn´t look so good. Me announcement bar is covering my header and the store name. Can someone help me lower the banner somehow or if there is some better solution I don´t know about? (Picture att bottom)
I also have a second problem. When I enter the store on mobile I can´t see the four pictures beacuse of smaller screen, Instead see 2 whole pictures and 2 half pictures. Is it possible to make the mobile-version only showing the two middle-pictures?
I´m hoping someone would be som kind and help me!
Thanks!
Hi @Anders97
For the first problem, you can go to the Edit code section in the Online store. Navigate to full base.css and add the following code (you can do it at the end of the file
@media screen and (max-width: 750px){
.announcement-bar__message{
line-height: 10px;
font-size: 10px;
}
}
In the 2nd problem, since the part you want to display is only a video, not 4 separate images, it is not possible to display only 2 images in the middle. You can go to it showing all 4 photos as follows (mobile mode)
You can follow this way and add the following code in base.css
@media screen and (max-width: 750px){
.announcement-bar__message{
line-height: 10px;
font-size: 10px;
}
.videoBackground .fullscreen-video-wrap .video-js{
object-fit: contain;
}
}
(If you don’t want to solve method 2 according to my way, copy the code in problem 1.
If you want to solve both, copy the code in part 2)
Hope this helps you.
1 Like
Hello again thank you so much! The first problem was solved by your code. I like your solution for for my second problem but i´ve put the code in and it still looks the same. I cant see all four pictures in my video banner when I use my mobile. I show picture of my code down below.
Did I copy something wrong?
Hi @Anders97
We’re happy to see that our suggestion helped you solve the issue. Can you kindly give us a like and mark it as a solution? This can be a reference for other merchants if they have an issue like you.
Regarding another problem, we’re checking it and will let you know soon.
Thanks in advance.
You can replace the code from line 3155 to 3157 with:
.videoBackground .fullscreen-video-wrap .video-js{
object-fit:
With the option, you have 2 choices
If you replace < option> with fill, it will display the video with the entire block surrounding it, but the aspect ratio of the video may be changed. If you replace < option> with contain, it will maintain the aspect ratio of the video but not display the entire block surrounding it.
You can try both options to find the suitable one for you. If you want to keep the original settings, you can simply delete the code from line 3155 to 3157.
Hello again thanks for answering! I have tried both “fill” and “contain” but it changes nothing i´m afraid. It still looks the same (see picture)
This is the how it looks with the code “contain”. I would love for the whole video banner too be visible on mobile, I don´t like that you see a little bit of the photo to the most left and right, I want to see whole pictures. Hope you understand!
See picture of current code:
Thanks!
Hi @Anders97
Perhaps you have replaced by mistake, replace all with your choice.
In the case of fill:
.videoBackground .fullscreen-video-wrap .video-js{
object-fit: fill !important;
}
You can do the same with contain. If it still doesn’t work you can continue response to us!
Hope this helps you.
BSS Commerce - Shopify Apps & Development Services Provider
Level up your Shopify store with our B2B & B2C apps
1 Like
