Change font size in Main Page and Collection for Mobile Brooklyn

Store Design
1

Hi,

I would like to change the font sizes as they are too big for product title and description in my mobile. Brooklyn Theme

And also, I would like to have 2 products per row in mobile. Can someone help?

123.https://babystoresale.com/

2

Hi Marina,

my website is https://babystoresale.com/

Password: 123

Thanks,

1 Like
3

It doesn’t work and I think you can post a reply here.

Someone else help please

4

@Shafat

Please share your password. It is not working.

5

Hi,

Its 1234

1 Like
6

@Shafat

Thanks for the password. Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (max-width: 768px){
.template-index .rich-text__heading--large {
    font-size: 2.3em;
}
body.template-index, body.template-collection{ font-size: 15px !important; }
}

This will reduce the size of the mobile for the home page and collection page.

Hope this works for you.

Thanks!

1 Like
7

Thank you very much! That worked..

Can you help me with fitting 2 products in a row for home page and in collection as well?

1 Like
8

@Shafat

This for desktop or mobile?

Let me know.

1 Like
9

Its for Mobile.. And also reduce the font size for Product title in mobile!

1 Like
10

@Shafat

Please add the following code.

@media screen and (max-width: 768px){
.template-index #CollectionSection .grid__item.grid-product.medium--one-half{ 
width: 50%; 
}
.template-collection .grid__item.grid-product.medium--one-half{ 
width: 50%; 
}
.template-collection .grid-product__image-link{ width: 86% !important; }
.grid-product__title{ 1em !important; }
}

Hope this works.

Thanks!

11

@dmwwebartisan The code creates a mess in both web and mobile. I pasted the code in theme.scss.liquid.. Any reason why?

1 Like
12

@Shafat

Please remove the old code and try the following code.

@media screen and (max-width: 768px){
.template-index #CollectionSection .grid__item.grid-product.medium--one-half{ 
width: 50%; 
}
.template-collection .grid__item.grid-product.medium--one-half{ 
width: 50%; 
}
.template-collection .grid-product__image-link{ width: 72% !important; }
.grid-product__title{ 1em !important; }
}
1 Like
13

@dmwwebartisan I am still running into the same problem :disappointed_face: It didn’t work properly.. It impacts both the web and phone look!

1 Like
14

@Shafat

I checked but my side worked properly but let me check. I will get back to you.

1 Like
15

@Shafat

Please remove the old code and try the following code.

@media screen and (max-width: 768px){
.template-index #CollectionSection .grid__item.grid-product.medium--one-half{ 
width: 50%; 
}
.template-collection .grid__item.grid-product.medium--one-half{ 
width: 50%; 
}
.template-collection .grid-product__image-link{ width: 72% !important; }
.grid-product__title{font-size: 1em !important;}
}

Thanks!

1 Like
16

Ouh Man !!! That worked so nice.. Much appreciated !! The only thing I would like to change is to have the pics aligned on left and to be center aligned of the product title if just in case there is no 2 pics in a row. Are you able to help me also with deleting extra white spaces on both web and mobile?

Thanks a lot man! You’re the best

1 Like
17

@Shafat

Please remove the old code and try the following code.

@media screen and (max-width: 768px){
.template-index #CollectionSection .grid__item.grid-product.medium--one-half{ 
width: 50%; 
}
.template-collection .grid__item.grid-product.medium--one-half{ 
width: 50%; 
}
.template-collection .grid-product__image-link{ width: 100% !important; }
.template-collection .product--wrapper { margin: 0px auto !important;}
.grid-product__title{font-size: 1em !important;}
}
1 Like
18

That works so great! Thanks alot man..

I just need to remove extra white spaces in mobile and web.. Too much of white space in home page, collection and in product page as well. I would really appreciate the help..

1 Like
19

@Shafat

This is for desktop:

@media screen and (min-width: 769px){
.section-header { margin-bottom: 20px !important; }
.index-sections .shopify-section {  margin-top: 50px !important; }
body:not(.template-index) .main-content {
    padding-top: 50px !important;
}
}
1 Like
20

@Shafat

This is for mobile view.

@media screen and (max-width: 768px){
.index-sections .shopify-section {
    margin-top: 25px !important;
}
body:not(.template-index) .main-content {
    padding-top: 15px !important;
}
}
1 Like