How to edit the hero slideshow size in brooklyn theme

Tourist
12 0 1

William can you remember how you changed the height of your hero slider I am tryinbg to d the same thing but everything I try does nto work.

 

 

0 Likes
New Member
1 0 0

To edit this file from your admin click Online storethen Themes, then click the button that looks like

[ ... ] and select Edit HTML/CSS. You will then see a file list open the assests folder and click on the assets/theme.scss.liquid

find this bloc 

.hero {
  background-color: adaptive-color($color-header, 10%); // default background color
  height: 330px;
  margin-bottom: -($gutter-site * 1.5);
  overflow: hidden;

  @include media-query($medium-up) {
    height: 400px;                 this code 
    margin-bottom: -($gutter-site * 3);
  }

 

Adjust the value 400 to be whatever height you wish to make the slide show. 

I hope this helps! 

0 Likes
Tourist
13 0 1

Hello! I can't figure out how to close the gap between my Hero image & the featured collection under it.
I must have an updated version of this Theme becuase most of the code mentioned, is either not there or moved.

Any Help on this would be appreachiated! 
 

0 Likes
New Member
1 0 0

hacing the exact same issue!

0 Likes
Tourist
4 0 2

I've tried a lot of different things suggested in the threads to make the slideshow thinner, but have not been successful in doing so without creating negative space that I can't seem to get rid of.  However...I did figure out a really easy way to separate the nav bar and logo from the slideshow like your example shows.  See my site here https://www.fortandfield.com

change line 2220 in theme.scss.liquid from absolute to center.  So, previously the line said "position:absolute;"  I changed it to "position:center;"

You'll just need to ensure your font color in your slideshow is set to dark vs light so the nav bar still shows up (or you can adjust the settings on the back end).

0 Likes
New Member
1 0 0

Hi Enrique,

It works! Thanks a lot.

0 Likes
Tourist
181 0 1

Hi There,

 

I'm using ShowTime theme I tried to change value in flexslider.css.liquid ,style.css.liquid, slideshow.liquid Theme.liquid and index.liquid I couldn't find the code in slideshow.liquid I changed the value of height but didn't work!

<img {% if section.settings.title != blank %}alt="{{ block.settings.title }}"{% endif %} src="{{ block.settings.slideshow_image | img_url: '1400x' }}" width="1600" height="800" />

 

Any help please?

0 Likes
Tourist
12 0 1

I'm trying to do the same...

Family man with 4 crazy kids. Owner, Aslan Mattress - A mattress built for athletes that works for lazy people too. 365 Night Trial, Infinite Warranty.
0 Likes
Excursionist
11 0 4

Hello ,

I tried this code but did not changed anything , is it because I'm using a different version of the theme?

Thank you so much .

1 Like
Highlighted
Tourist
3 0 0

Hi, 

 

You have to find and change this code:

 

/*============================================================================
Full screen hero styles
- Uses css background image
==============================================================================*/
.hero {
// Height is set by JS on slider init. vh is a nice default for modern browsers.
height: 100vh;
max-height: 100vh;
margin-bottom: 1.9rem;

@include at-query($max, $siteWidth) {
min-height: 50vw;
}

 

This will change also in the mobile version, cheers

0 Likes