Brooklyn Theme Collection Text Overlays to Images

Solved
Alessioferrara
Tourist
9 0 1

Hi there, I apologize in advance for my poor english. I'm using the Brooklyn theme and I need your help in order to "fix" the appearance of the text in the "Collections" section: specifically, I don't really like how it overlays with the images in that section; instead, I'd like to have the text BELOW the image. I know I'll have to edit the code in order to do that, and I'm ready ;)

Accepted Solution (1)

Accepted Solutions
dmwwebartisan
Shopify Partner
9765 2228 3065

This is an accepted solution.

Hi

Remove old css class and add this css class

add code assets/theme.scss.liquid bottom of the file

 

@media screen and (max-width: 590px){
.collection-collage__item.one-half { height: 210px !important;}
.collection-grid__item-title--wrapper {position: absolute !important;}
.collection-grid__item-title {font-size: 1.3em !important;}
}


Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 13 (13)
dmwwebartisan
Shopify Partner
9765 2228 3065

hi

 

please share your web shop url & password .

 

 

Thanks!

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Alessioferrara
Tourist
9 0 1

I  managed to fix it by editing the code a little bit, but it only seems to work on the desktop version, not on mobile :(

The section I'm referring to is the one called "T-Shirts Unisex", below the rich text.

 

https://artee-wear.myshopify.com/

Password: giadao

 

 

dmwwebartisan
Shopify Partner
9765 2228 3065

hey 

 

i am not understand your thing please send screenshot for me 

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Alessioferrara
Tourist
9 0 1

As you can see, on the desktop version the title of every collection is displayed below the corresponding imagesAs you can see, on the desktop version the title of every collection is displayed below the corresponding imageswhereas this doesn't happen on mobilewhereas this doesn't happen on mobile

dmwwebartisan
Shopify Partner
9765 2228 3065

Hi

add code assets/theme.scss.liquid bottom of the file

 

@media screen and (max-width: 590px){
.collection-collage__item.one-half { height: 210px !important;}
.collection-grid__item-title--wrapper {position: absolute !important;}
}


Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Alessioferrara
Tourist
9 0 1

YES!YES!

It's definitely working! Although the font size is too big now :(

 

Can you help me fix that too? I feel we're getting so close to the final goal!! Ahahah

dmwwebartisan
Shopify Partner
9765 2228 3065

This is an accepted solution.

Hi

Remove old css class and add this css class

add code assets/theme.scss.liquid bottom of the file

 

@media screen and (max-width: 590px){
.collection-collage__item.one-half { height: 210px !important;}
.collection-grid__item-title--wrapper {position: absolute !important;}
.collection-grid__item-title {font-size: 1.3em !important;}
}


Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Alessioferrara
Tourist
9 0 1

Oh my god I love you

AROV
New Member
3 0 0

Hey, how did you edit the code to solve it? I'm having the same problem.

Thank you!