Mobile layout slideshow streched out

maxroddy
Excursionist
43 7 13

Hello guys,

Little problem with my first page. Desktop layout looks fine, however mobile version looks stretched out. Is there any way I could change this and lift the slideshow images up a bit? Any help greatly appreciated! 🙂 🙂

my website: www.aurorabe.com

 

Replies 6 (6)

KetanKumar
Shopify Partner
36839 3635 11972

@maxroddy 

sorry for any issue can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 768px) {
.hero[data-adapt=false], .hero[data-adapt=false] .slideshow__overlay:before {
    height: 50vh;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
maxroddy
Excursionist
43 7 13

Hello,

thanks for helping out. But this option is already available on brooklyn theme. I was looking for this solution:

This website has normal first page when I enter from phone: galaxylamps.co

and when you enter my website, the first page is streched: aurorabe.com

any other solution maybe? Thanks in advance

KetanKumar
Shopify Partner
36839 3635 11972

@maxroddy 

yes please share your all issue images

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
maxroddy
Excursionist
43 7 13

thank you for getting back to me 🙂 

This is my websites stretched look: 

image0.jpg

And this is what I would like to achieve: 

more compact banner that fits the mobile phone screen.

image1.jpg

 

oscprofessional
Shopify Partner
15834 2369 3072

@maxroddy,  Streching the same Desktop image till the mobile view is not an good option, this will breakdown or image stretched issue may occurs in different screens.

I will recommend you to create new schema for Mobile view. With this you can apply two different images.
1. for Desktop full size banner
2. for Mobile different banner with the size of 480px in width.

Your reference site might also using the same concept.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
maxroddy
Excursionist
43 7 13

Thank you for suggestion 🙂

Can you suggest how can I do that on Brooklyn theme?

thanks in advance