How to adjust headline size in mobile view. (Page not mobile friendly)

Solved
Highlighted
New Member
5 0 0

My product page is not mobile friendly. The headline is too large for mobile viewing. Is there a way to make it smaller, for mobile view only, without effecting the desktop view?

 

Thank you. 

 

https://charcoalito.com/products/charcoalito-50-super-slim-activated-charcoal-filters

0 Likes
Highlighted
Shopify Expert
179 0 15

In order to display everything correctly on mobile, you should open product.liquid template and add "grid _item" class to these blocks:
- <div itemprop="description" class="grid__item product-single description rte">
- <div product-handle="loyalty-couple-bracelet" class="grid_item ryviu-reviews-list">
- <section class="grid_item related-products">
Web developer/Graphic Designer
christina@designsrus.us
0 Likes
Highlighted
Shopify Partner
904 194 353

@Creamer 

 

Go to the Online store > Theme > Edit code > Assets > theme.scss.liquid file add following code and the end of file:

@media screen and (max-width: 720px) {
  .product-details h1.product-title{font-size:2rem;}
}

Cheers,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
0 Likes
Highlighted
New Member
5 0 0

Thank you very much Tejas. If you could help me do this for the shopping cart page, it would be greatly appreciated. 

0 Likes
Highlighted
Shopify Partner
904 194 353

This is an accepted solution.

@Creamer 

 

Update CSS with following:

@media screen and (max-width: 720px) {
  .product-details h1.product-title{font-size:2rem;}
  h1.page-title{font-size:2rem;}
}

Cheers,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Highlighted
New Member
4 0 0

I just tried this for my page and it doesn't seem to be working. Any additional advice?

The main page header picture just wont seem to shrink on the mobile view. 

0 Likes