Resize Font

tomm1p
Excursionist
27 0 4

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
77 5 11

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.
- if you Want to modify or Customize your theme , Please contact me directly at abhinav@profitlabs.shop
- Creator of Profit Bundles - Easily Track Inventory for Multi SKU Bundles, Gift Boxes, Packs, Bogo .
tomm1p
Excursionist
27 0 4
ProfitLabs
Shopify Partner
77 5 11

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.
- if you Want to modify or Customize your theme , Please contact me directly at abhinav@profitlabs.shop
- Creator of Profit Bundles - Easily Track Inventory for Multi SKU Bundles, Gift Boxes, Packs, Bogo .
tomm1p
Excursionist
27 0 4

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
77 5 11

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.
- if you Want to modify or Customize your theme , Please contact me directly at abhinav@profitlabs.shop
- Creator of Profit Bundles - Easily Track Inventory for Multi SKU Bundles, Gift Boxes, Packs, Bogo .
tomm1p
Excursionist
27 0 4

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

tomm1p
Excursionist
27 0 4

up!

ProfitLabs
Shopify Partner
77 5 11

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.
- if you Want to modify or Customize your theme , Please contact me directly at abhinav@profitlabs.shop
- Creator of Profit Bundles - Easily Track Inventory for Multi SKU Bundles, Gift Boxes, Packs, Bogo .
tomm1p
Excursionist
27 0 4

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