Mobile styling of Brooklyn theme

Highlighted
Tourist
5 0 2

Hi all 

I want to adjust the position of the image in the hero slide show  when viewed on a tablet or phone. essentially the problem is that the image  im using has a lot of empty space that looks good on a wide display but not on a tall one. so I want to change how the image is aligned when viewed on a mobile device,  

2 Likes
Shopify Staff
Shopify Staff
60 0 13

Hey Chris,

Trey here from Shopify!

With a bit of tweaking to the theme's coding, it's possible to disable that effect from happening on the Brooklyn theme.

Just head into the Snippets/hero.liquid file of your theme, and update: 

{% assign hero_full_height = true %}

to false, like so:

{% assign hero_full_height = false %}

(this is normally towards the top of the file, line 21 specifically on a clean version of the file)

Hope that helps :)

 

Trey S
support@shopify.com

2 Likes
Excursionist
45 0 4

.

0 Likes
New Member
1 0 0

Similar question that when the model is on the left/right and I would like the model to be on the center when it is in mobile size. 

How do I set up that the photography is aligned left or right in mobile as keeping full-width in the regular/laptop screen? 

 

Thanks, 

 

 

0 Likes
Tourist
4 0 1

Hi Trey,

Your solutions works for showing the whole image on mobile by shinking the height (to not fit the whole screen).

I was wondering if it's possible to keep the effect of the image taking the whole screen height, but choosing (left or right) where the image is cropped, rather than just the center, so that it shows the main content when the subject of the image is aligned to one side of the image.

Alternatively, could the code be changed so that we can upload a completely separate image for the mobile site from the desktop one.

0 Likes
New Member
2 0 1

Hi Trey,

This solution doesn't work on the latest version of Brooklyn unfortunately - there is no hero.liquid file in the Snippets section any more...

Do you have a solution for the latest version?

1 Like
New Member
13 0 0

Not sure if it is just me but in my code I don't seem to have it let me know if I am just doing something wrong. It is a bad pic but thats all I see... seem to be lacking the folder you are talking about and is there any way to do this with text. My brand name is a header and the last part is being cut off from the screen on mobile

0 Likes
New Member
13 0 0

how about the new update for brooklyn playful?

www.xandrea.ph
0 Likes
New Member
1 0 1

{% assign hero_full_height = true %} appears in two places in the new Brooklyn theme:

  • slideshow.liquid
  • header.liquid

You'll need to modify both files to have the same value in order for the update to work. 

1 Like
New Member
2 0 0

Hi. I have the same problem, but it seems the code of Brooklyn theme was changed recently (the "true-to-false-solution" worked for my other shop with the same theme just about 4 weeks ago). Now I can't find the code to update it. How can I solve this problem?

Best regards, Lara

0 Likes