Brookyln mobile theme hero cuts off

lcbrewerco
Tourist
5 0 2

Hello all! I am trying to make my mobile hero slide look just like my webpage hero slide. Can anyone please help? Its brooklyn theme 

www.lcbrewerco.com

0 Likes
Akibhusen
Excursionist
199 37 68

Hi,

It will be looks like the below screenshot if will manage to display the full banner same as the desktop.

 

Akibhusen_0-1626236772181.png

If you like then it's required some changes in your CSS file.

if you don't want to like this then an alternative option provides the options in the theme to add a separate images for the mobile layout.

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
0 Likes
Zworthkey
Shopify Partner
578 38 88

@lcbrewerco hey, Just remove the extra white Space on the mobile view of the hero slider.
and I hope It is relevant answer to meet your Criteria.
Thank you 

Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
If helpful then please Like and Accept the Solution.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/
0 Likes

@lcbrewerco, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

@media (max-width: 767px){
	.hero .hero__image{
		object-fit: contain !important;
	}
	.hero .slick-list, .hero .slick-track{
		min-height: unset !important;
	}
	
	.slick-track *{
		min-height: unset !important;
	}
	
	.hero[data-adapt=false], .hero[data-adapt=false] .slideshow__overlay:before{
		height: auto !important;
	}
	
	[data-section-id="slideshow"]{
		padding-top: 45px;
		
	}
}


Please let me know whether it works.

Kind regards,
Diego

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
Zworthkey
Shopify Partner
578 38 88

@lcbrewerco Hi, paste this code in the theme.scss

.hero[data-adapt=false], .hero[data-adapt=false] .slideshow__overlay:before {
    height: 135vh;
}

Thank you

Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
If helpful then please Like and Accept the Solution.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/
0 Likes
lcbrewerco
Tourist
5 0 2

Screenshot 2021-07-14 7.37.03 AM.png

@diego_ezfy 

 

so it looks much better! could you help me make it a little bigger so my store name isnt on top of "new looks you'll love"? im not a great coder, i really appreciate your help in this!

0 Likes
lcbrewerco
Tourist
5 0 2

@Zworthkey  this looks much better!! thanks so much! here is what it looks now. is there any way to make it to where you can see my photos in my hero as well? or is this as close as i can get? thanks so much in advance, i appreciate you!Screenshot 2021-07-14 7.44.11 AM.png

0 Likes
LitExtension
Shopify Partner
1236 158 217

Please follow the steps:
- Step 1: Go to Customize > Image with text overlay > Section height.
- Step 2: Select Adapt to image. https://i.imgur.com/BmhZ3lr.png

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes