How to adapt Dawn theme banner container for mobile viewing?

[FlipShop]

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

[suyash1]

@FlipShop - this will need css, can you share your website link?

[FlipShop]

Hi! Thanks for your interest. www.flipshop.it password is "lowsuy"

[suyash1]

@FlipShop - it will hide image

[suyash1]

@FlipShop - or something like this needs to be made

[FlipShop]

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

[suyash1 · 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;}

}

[FlipShop]

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

[suyash1]

@FlipShop - margin needs to be added but then it will not be in exact middle and it will increase the scroll hence not recommended

[FlipShop]

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 

[suyash1]

@FlipShop - yes that is why usually containers are not added on mobile, if you try to make it in middle then it will be more longer than this right now

[FlipShop]

How do you suggest me to do it then? because I am lost about this thing 😕 

[suyash1]

@FlipShop - did you remove the code? it can be made like the second image I sent above

[FlipShop]

It works now, it is so much better, thanks!!

Can you help me on another thing? 

[suyash1]

@FlipShop - what is it? 

[FlipShop]

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?

[suyash1]

@FlipShop - i checked it on mobile view but everything looks same size, can you share the screenshot of how exactly do you want?

if you want then you can share it on my email below

[FlipShop]

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.

[suyash1]

@FlipShop - I checked on desktop view and mobile as well and all are equal images, which device are you using? what is its resolution?

[FlipShop]

it is iPhone X, what are you using?
For me on desktop it is all fine, but on iPhone it looks like that

[suyash1]

@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. 

[oscprofessional]

Hello @FlipShop 

Your store is password protected, please share the password so I can review it and provide a solution.

[FlipShop]

Hi! Thanks for your interest. www.flipshop.it password is "lowsuy"

[oscprofessional]

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;
}

[FlipShop]

it doesnt change on mobile, plus on destktop now there isn't a container anymore.

[oscprofessional]

Hello @FlipShop 

I will provide you with the solution, Please remove the above-given code.

[FlipShop]

Thank you, very much appreciated!

[oscprofessional]

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;
}
}

[FlipShop]

I can't see the code

[oscprofessional]

Hello @FlipShop 

Please check the code.

[FlipShop]

it looks like this