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
Trailblazer
248 41 73

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

@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 

If helpful, please Like and Accept Solution. if you Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/shopify-services/
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

◦ Slideshow section not looking good? Try the Slideshow (PRO) section. No apps required.
◦ Product page images slider for free themes (w/ 20+ customization options): Minimal | Debut | Brooklyn | Supply
◦ If my answer helps you please click on like and Accept as solution!
0 Likes

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

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

Thank you

If helpful, please Like and Accept Solution. if you Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/shopify-services/
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

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 - #1 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