My website banner doesn’t fit in the mobile view

Technical Q&A
1

This is my website

www.human-performance-health-project.myshopify.com

password: rohlda

2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >timber.scss.css and paste this at the bottom of the file:
@media screen and (max-width:480px){
#flexslider--slider .slides__image,
#flexslider--slider .slides svg {
height: 117px;
}
}
3

Hi @Human1989 ,

Please follow the steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.

  • Step 2: Go to Asset > theme.scss.liquid and paste this at the bottom of the file:

@media screen and (max-width: 768px) {

#flexslider–slider .slides__image,

#flexslider–slider .slides svg {

height: 150px !important;

}

}

Hope it clear to you.

4

Hello Team, I have tried your code but it doesn’t help me to fit the banner into the frame in mobile view, It helped to shrink the banner from its previous size but still it is not fit in the frame, Please help me to get this banner issue fixed.

5

Hi @Human1989 ,

Go to file timber.scss.liquid and change code:

height: 150px !important => height: auto !important

Refer: https://i.imgur.com/InP8o6c.png

Hope this helps!

6

Hello Sir,

The solution which you gave me worked fine for the previous theme, I am really sorry for bothering you but previous theme was missing something and was not comfortable using that theme though I changed the theme to debut and this theme is also having the same issue that it also does not fit in the mobile view with top and bottom both the banners, I would be very glad of you if you could help me with this, I need to live my store within 1-2 days. Thank you sir in advance.

website URL: https://human-performance-health-project.myshopify.com

Password: rohlda

7

Hello sir/madam,

The solution which you gave me previously was not working, I am using Debut theme and the problem is that after inspecting Both the banners size in top and bottom my graphic designer made the banners and now when I uploaded both the banners on my current theme and I checked them in other computers it shows that top banner is does not and in some computers bottom banner is does not fit and apart from this they are does not even getting fit in the mobile view of the website.below is the website link and password please check and give a resolution as soon as possible because I need to live my website as soon as possible and from my side website is done except this banner issue.

Website: https://human-performance-health-project.myshopify.com

Password: rohlda

8

hello @Human1989

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 1440px) {
  .hero {
    background-size: contain;
}
}

@media only screen and (max-width: 1024px) {
  .hero {
    height: 500px;
}
}

@media only screen and (max-width: 768px) {
  .hero {
    height: 370px;
}
}
@media only screen and (max-width: 425px) {
  .hero {
    height: 200px;
}
}
2 Likes
9

Thank you ver much this code works fine.