Home>Support>Hedline widget – problems with font size and fittext

Hedline widget – problems with font size and fittext

Hi,

I am struggling to adjust desktop and mobile view – so that they both look good for http://ravecovery.pl/.

Desktop:
– the headline in the 1st column is very small after loading the page
– if you click the middle icon in the top-right part of the browser (between minimize and close), the text gets bigger, more-less like I want it, although I would like it even bigger
– I can make the headline bigger on the desktop if I turn off FitText, but then the headline doesn’t adjust on mobile and it’s too big

Mobile:
– it looks good, although if you scroll slowly down, the text will become bigger at some point

I’m struggling to adjust the headline so that it’s very big on desktop and resizes accordingly on mobile, I’ve tried a million padding/margin approaches but apparently I’m missing something and I would appreciate help – once you open the desktop and mobile you will understand what I’m striving for.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 4 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Hi Bartosz

    Thanks for posting.

    Are you asking about “Baw się. Kochaj. Tańcz.”? Which browser are you testing with on desktop and mobile?

  2. 4 years, 6 months ago Bartosz Hajduk

    Hi,

    Its for "Ogranicz zjazd do minimum".
    Latest chrome on desktop and mobile.

    I think that the question is how do i make the headline big on desktop,
    above 100px and resized responsively on mobile.

  3. 4 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Perhaps try reducing the left padding to allow the widget more space. The left padding is 50%. Any change if you set that to say 10% as a test?

  4. 4 years, 6 months ago Bartosz Hajduk

    Hi,

    I did that and it's just a bit bigger but still not that big as I want and if I increase the values (from 100px to 150px) it does not take effect.

    Again, when I decrease the window size the headline pops larger.

    When I disable FitText – then the test on the desktop is as the size that is set in the values (eg. 100px or 150px), but then the mobile version font is too big.

    Do you have an idea how to tackle this?

    bh

  5. 4 years, 6 months ago Bartosz Hajduk

    Hi,

    I found some help on the web and it seems there are 2 options:

    – Use vw as value

    – Use @media function

    I have set the font size of the headline to 7vw – it looks good on desktop; on mobile it is just OK, I would rather like it to be bigger but I think that is good enough.

    If will speak with my partner and if not, then I will have to use the @media function but not sure where I should put it – are you able to suggest?

    PS. Thank you for your help so far – very much appreciated, good stuff.

    bh

  6. 4 years, 6 months ago Bartosz Hajduk

    Hi,

    I can live with the font, but now I have noticed that the image doesn’t resize properly on desktop and it too big on my friends desktop – I can’t find an option that would make the image scale down (in all directions) when the page width is narrowed.

    Can you suggest something for this?

  7. 4 years, 6 months ago Bartosz Hajduk

    Hi,

    Apologies for this series of emails:)

    I have succeeded with the image resizing using padding expressed in % and some manual testing to get the proper value.

    The only thing left which I can’t get down is the Menu item “Zamawiam” color, which I do not know why but ahs different color than the rest of the items – the only difference is that the ‘Zamawiam’ redirects to another site and the rest are internal page links.

  8. 4 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Hi Bartosz, sure, no problem, thanks for keeping us updated.

    Resizing the background image in all directions requires the contents to also resize, the Layout Slider doesn’t offer that. Smart Slider is one option for a background and contents that resize as one.

  9. 4 years, 6 months ago Bartosz Hajduk

    Thanks thiw is great. I will stick for now to the padding solution i came up with but thus looks good to use next time😀

    Thanks😀

  10. 4 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Sounds good :) If any SiteOrigin questions arise in the future, please, let us know. Cheers for now.

  11. 4 years, 6 months ago Bartosz Hajduk

    Will do, thanks! 😀

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More