Solved

Change font size in Main Page and Collection for Mobile Brooklyn

Shafat
Excursionist
17 0 11

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/

Accepted Solutions (5)
dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@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;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@Shafat 

Please add the following code.

input#Quantity, .js-qty__adjust .icon, .ajaxcart__qty input[type=text], ajaxcart__qty icon {
height: auto !important;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 28 (28)
Shafat
Excursionist
17 0 11

Hi Marina,

my website is https://babystoresale.com/

Password: 123

Thanks,

Shafat
Excursionist
17 0 11

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

 

Someone else help please

dmwwebartisan
Shopify Partner
12282 2546 3694

@Shafat 

Please share your password. It is not working. 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Shafat
Excursionist
17 0 11

Hi,

Its 1234

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Shafat
Excursionist
17 0 11

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?

 

dmwwebartisan
Shopify Partner
12282 2546 3694

@Shafat 


@Shafat wrote:

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?

 




This for desktop or mobile?

Let me know.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Shafat
Excursionist
17 0 11

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

dmwwebartisan
Shopify Partner
12282 2546 3694

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Shafat
Excursionist
17 0 11

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

dmwwebartisan
Shopify Partner
12282 2546 3694

@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; }
}

  

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Shafat
Excursionist
17 0 11

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

dmwwebartisan
Shopify Partner
12282 2546 3694

@Shafat 

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Shafat
Excursionist
17 0 11

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

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@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;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Shafat
Excursionist
17 0 11

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..

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Shafat
Excursionist
17 0 11

Solved it: By keeping padding at 0

I just noticed the desktop one creates a white space gap on top of the announcement bar as well. Can you help me fix that ?

 

Thanks

dmwwebartisan
Shopify Partner
12282 2546 3694

@Shafat 

Can you please provide a screenshot. I couldn't see any white gap on the desktop on the top. 

Please let me know.

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Shafat
Excursionist
17 0 11

I adjusted for desktop but for mobile see below; I have a break somewhere for featured product but i cant find it where?

Shafat_0-1626813669600.png

Shafat_1-1626813691335.png

 

dmwwebartisan
Shopify Partner
12282 2546 3694

@Shafat 

Sorry, but on the mobile view, I couldn't get the gap above the announcement bar.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Shafat
Excursionist
17 0 11

I can live with that. Thank you very much.

Do you mind assisting me in having the quantity box in a perfect box? Its so crooked in product item view and in cart view for both mobile and web.. Thanks alot for your kind help

Shafat_0-1626843431261.png

Shafat_1-1626843458317.png

 

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@Shafat 

Please add the following code.

input#Quantity, .js-qty__adjust .icon, .ajaxcart__qty input[type=text], ajaxcart__qty icon {
height: auto !important;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Shafat
Excursionist
17 0 11

That worked perfect for product page but its still the same for the cart drawer? Thank you.

Can you also help me on having a regular price on left, crossed out for sale price on right on all the pages for both mobile and web. I would also like it to be on a seperate line centred to the product. I would really appreicate that.. 

dmwwebartisan
Shopify Partner
12282 2546 3694

@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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Shafat
Excursionist
17 0 11

The desktop one works perfectly.

For the mobile it creates a gap at the top margin. And when i keep it as 0, it doesn't work properly.

 

I really appreciate your help man. 

dlynaustin
Shopify Partner
20 0 0

Hi, I tried using this in Studio Theme and it didn't work.  Any suggestions? Thanks!!!

 

www.assifassefi.com  pw skawst