Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Soredadux

Safari IOS Font not Responsive?

Question

Site URL: https://www.libeluladesol.cl/matrimonio-camila-y-matias-2021

Hi everyone!

First of all, sorry for my English!

Now, the question... I'm making one page, I thougth it look ok on mobile devices, and it is, except on Iphones...

This is how it should look:

Android.thumb.jpeg.c6d9d616a83566e5f80e924f5221a24d.jpeg

 

And this is how it looks from an Iphone:

Iphone.thumb.jpeg.937f8d0152abedc1be9698766a4b8cfc.jpeg

 

The word "Matías" is continuing down with a hyphen . I'm guessing it has to do with Safari? How can I solve it? I've tried with some something called viewport and others things I saw on internet, nothing really working...

https://www.libeluladesol.cl/matrimonio-camila-y-matias-2021

Pass: Gabriel2020

Thanks!!!

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 0

Try adding this to design -> custom css

@media only screen and (max-width: 400px) {
  #camila-y-matias h1 span{
    font-size: 20vw !important;
  }
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
28 minutes ago, rwp said:

Try adding this to design -> custom css


@media only screen and (max-width: 400px) {
  #camila-y-matias h1 span{
    font-size: 20vw !important;
  }
}

 

OMG this works amazing!!!! Thanks a lot!!!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...