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
24945 2500 9043

@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
24945 2500 9043

@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
9209 1564 1929

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

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
maxroddy
Excursionist
43 7 13

Thank you for suggestion

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

thanks in advance