Solved

How to adapt Dawn theme banner container for mobile viewing?

FlipShop
Tourist
31 0 1

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

FlipShop_0-1690466508652.pngFlipShop_1-1690466522047.png

 

Accepted Solution (1)
suyash1
Shopify Partner
9237 1148 1493

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

}

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI

View solution in original post

Replies 30 (30)

suyash1
Shopify Partner
9237 1148 1493

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
FlipShop
Tourist
31 0 1

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

suyash1
Shopify Partner
9237 1148 1493

@FlipShop - it will hide image

 

suyash1_0-1690467238352.png

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
suyash1
Shopify Partner
9237 1148 1493

@FlipShop - or something like this needs to be made

 

suyash1_1-1690467306468.png

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
FlipShop
Tourist
31 0 1

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
Shopify Partner
9237 1148 1493

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

}

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
FlipShop
Tourist
31 0 1

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
Shopify Partner
9237 1148 1493

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
FlipShop
Tourist
31 0 1

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
Shopify Partner
9237 1148 1493

@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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
FlipShop
Tourist
31 0 1

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

suyash1
Shopify Partner
9237 1148 1493

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
FlipShop
Tourist
31 0 1

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

Can you help me on another thing? 

suyash1
Shopify Partner
9237 1148 1493

@FlipShop - what is it? 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
FlipShop
Tourist
31 0 1

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
Shopify Partner
9237 1148 1493

@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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
FlipShop
Tourist
31 0 1

image_123986672 (2).JPGimage_123986672 (1).JPG

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
Shopify Partner
9237 1148 1493

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
FlipShop
Tourist
31 0 1

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

suyash1
Shopify Partner
9237 1148 1493

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI

oscprofessional
Shopify Partner
15897 2378 3084

Hello @FlipShop 

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
FlipShop
Tourist
31 0 1

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

oscprofessional
Shopify Partner
15897 2378 3084

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

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
FlipShop
Tourist
31 0 1

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

FlipShop_0-1690467526649.pngFlipShop_1-1690467535658.png

 

oscprofessional
Shopify Partner
15897 2378 3084

Hello @FlipShop 

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
FlipShop
Tourist
31 0 1

Thank you, very much appreciated!

oscprofessional
Shopify Partner
15897 2378 3084

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

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
FlipShop
Tourist
31 0 1

I can't see the code

oscprofessional
Shopify Partner
15897 2378 3084

Hello @FlipShop 

Please check the code.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
FlipShop
Tourist
31 0 1

it looks like this 

FlipShop_0-1690469548918.png