Brooklyn Theme -Collections Font Size, Mobile Responsiveness, No Text for Collections Sect on Mobile

Store Design
1

Screen Shot 2022-04-27 at 8.12.56 PM.png
Screen Shot 2022-04-27 at 8.12.56 PM.png2769×927 150 KB

Hello,

I am currently running the Brooklyn theme and I recently did a code update for the color of the font for the collections page/section on the Home Screen. I went from white color to black.

Now that I have done the code update the font (wording) does not show on the mobile device but on desktop. How do I resolve this?

Second, how do I reduce the size of the font for the collections section on the home page? They are to large.

Third, how do I make the hero image mobile responsive? It doesn’t shrink for mobile devices.

Screen Shot 2022-04-27 at 8.16.28 PM.png
Screen Shot 2022-04-27 at 8.16.28 PM.png1400×1500 192 KB

I truly appreciate any and all response/help/suggestions on this.

Thanks!

2

@sunspark

Welcome to the Shopify Community!

Please share your store URL, so that I can check you issue and will back to you with proper solution.

Have a Good Day!..

3

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

4

Hi @sunspark ,

Please change code:

.collection-grid__item-title--wrapper {
    color: #000 !important;
}

=>

@media screen and (min-width: 591px) {
	.collection-grid__item-title--wrapper {
		color: #000 !important;
	}
}

Then, the code only works on desktop and tablet, not on mobile.

Hope it helps!

5

@LitCommerce thank you for responding to this. I inserted the code into the theme.scss.liquid file but nothing has changed. The font on the collections homepage is still to large, the hero image is still not responsive on mobile devices and the text/wording isn’t showing up on the mobile collections home page.

Anything else I can do?

Thanks again

6

Hi @sunspark ,

Please send your site and if your site is password protected, please send me the password. I will check it.

7

Hi @sunspark ,

Please add code:

.collection-collage__item.large--one-third {
    height: auto !important;
}
.collection-grid__item-title--wrapper {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
}
.collection-grid__item-overlay {
    height: 150px!important;
}
@media screen and (min-width: 591px) {
	.collection-grid__item-overlay {
		height: 310px!important;
	}
}

Hope it helps!

8

@sunspark ,

Share the store URL please.

9

@LitCommerce thank you for the help so far. The font now shows on the mobile page however, the size of the font is still an issue. It is still to large, on the desktop and on the mobile.

10

Hi @sunspark ,

Please add code:

.collection-grid__item-title {
    font-size: 1.2em !important;
}
@media screen and (min-width: 591px) {
	.collection-grid__item-title {
		font-size: 1.5em !important;
	}
}

Hope it helps!

11

@LitCommerce my SINCERE thanks! I truly appreciate your help and taking the time in helping with this! The issue seems to be resolved. Thank you!!! Blessings.

1 Like