Can font size be adjusted for different screen sizes on Shopify?

tomm1p
Excursionist
34 0 8

Hi!

 

The thing is that by reducing the screen, the font does not change. And I would love to. At one point, it jumps to mobile display, but the font is too small in the beginning. That is, I would like to do the same with a mobile device - to always fit a certain frame. How can I achieve this?

 

Screenshot_10.pngScreenshot_9.pngScreenshot_11.png

Replies 11 (11)

ProfitLabs
Shopify Partner
118 5 15

could you shre the url of your store so that i can have better look into this.

Abhinav | Shopify Partner
- If helpful, please Like and Accept Solution.
- Creator of Sync Inventory - GoGo - Sync Inventory Across Multiple or Single Shopify Store .
- Creator of Profit Bundles - Sell Omni Sales Channel Bundles that you can fulfill yourself or even by a 3PL or Dropshipper.
tomm1p
Excursionist
34 0 8
ProfitLabs
Shopify Partner
118 5 15

Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

@media only screen and (min-width: 1200px) {
    .hero__title{
        font-size:4.2vw !important;
    }
}

@media only screen and (min-width: 768px) {
    .hero__title{
        font-size:3.5vw !important;
    }
}

@media only screen and (max-width: 768px) {
    .hero__title{
        font-size:5vw !important;
    }
}
Abhinav | Shopify Partner
- If helpful, please Like and Accept Solution.
- Creator of Sync Inventory - GoGo - Sync Inventory Across Multiple or Single Shopify Store .
- Creator of Profit Bundles - Sell Omni Sales Channel Bundles that you can fulfill yourself or even by a 3PL or Dropshipper.
tomm1p
Excursionist
34 0 8

The first part is great, now the text is not always the same size. The only thing that bothers me about the desktop device is that I have to move the bottle to the left so that the text doesn’t cover it. By how many px do I have to move the bottle to the left in the original image? But how else to arrange it?

With a mobile device, the text is too small for me at 768px, a large gap appears. How do you fix that?

Thanks!

 

Screenshot_13.pngScreenshot_14.png

ProfitLabs
Shopify Partner
118 5 15

Add this further

 

@media only screen and (min-width: 768px) and (max-width: 1200px){
    .hero__image{
        object-position: 43% 50% !important;
    }

}

@media only screen and (max-width: 768px) {
    .hero__text-content {
        padding: 100px 0 15px !important;
    }
}

, but remember to update these value if you update the image in the future

Abhinav | Shopify Partner
- If helpful, please Like and Accept Solution.
- Creator of Sync Inventory - GoGo - Sync Inventory Across Multiple or Single Shopify Store .
- Creator of Profit Bundles - Sell Omni Sales Channel Bundles that you can fulfill yourself or even by a 3PL or Dropshipper.
tomm1p
Excursionist
34 0 8

Great! Only on a mobile device is the text still too small at the beginning and too large at the end. Is that how to fix it?

But I didn't understand exactly what you meant by that: " but remember to update these value if you update the image in the future"

 

Screenshot_16.pngScreenshot_15.png

ProfitLabs
Shopify Partner
118 5 15

Hi @tomm1p 

In order to check for responsiveness, its usually done clicking on specific device screen sizes (just click on the reponsive dropdown), which are available with every browser as well, it's very complicated to do responsiveness for every pixel change.

 

For second part I said that as we have moved the image to the left on desktop, this correlates to this particular image and its text, if you change the image (of a new dimension) and text, we would again need to adjust the above values.

Abhinav | Shopify Partner
- If helpful, please Like and Accept Solution.
- Creator of Sync Inventory - GoGo - Sync Inventory Across Multiple or Single Shopify Store .
- Creator of Profit Bundles - Sell Omni Sales Channel Bundles that you can fulfill yourself or even by a 3PL or Dropshipper.
tomm1p
Excursionist
34 0 8

I went to look at the page on the iPhone 13 Pro and it showed me, just like in the picture. I would like the text to be a little higher so it doesn’t overlap the product. Is this possible? Where can I see how the page is displayed on tablet?

 

Thank You!IMG_0842.PNG

 

 

tomm1p
Excursionist
34 0 8

@ProfitLabs I also looked at what it looks like on other devices. And with some devices, the text is either too big or too small. Is it possible to fix it? Not good with my Iphone 13 Pro either.

 

Screenshot 2021-11-16 at 10.39.05.pngScreenshot 2021-11-16 at 10.37.40.pngScreenshot 2021-11-16 at 10.37.53.pngScreenshot 2021-11-16 at 10.38.09.pngScreenshot 2021-11-16 at 10.38.35.pngScreenshot 2021-11-16 at 10.38.56.png

 

ProfitLabs
Shopify Partner
118 5 15

Hi @tomm1p 

 

in firefox I could see your text looks fine on all the major devices,(if it works on major apple and latest android  ones then its fine)  only thing is we moved the text bit lower as you asked , this should be removed. as the case you mentioned was a random responsive screen aspect ratio not a proper device. Please remove the following code

@media only screen and (max-width: 768px) {
    .hero__text-content {
        padding: 100px 0 15px !important;
    }
}

 

for any further assistance please contact me directly here at abhinav@profitlabs.shop

Abhinav | Shopify Partner
- If helpful, please Like and Accept Solution.
- Creator of Sync Inventory - GoGo - Sync Inventory Across Multiple or Single Shopify Store .
- Creator of Profit Bundles - Sell Omni Sales Channel Bundles that you can fulfill yourself or even by a 3PL or Dropshipper.
tomm1p
Excursionist
34 0 8

up!