Site title wrapping improperly on mobile


#1

I posted this issue as part of a different topic, but a moderator told me to create a new thread.

I have CSS code in place that attempts to vary the appearance of my site (moviemanifesto.com) based on screen size. But for the iPhone 5 and other narrow devices, the site title (“MovieManifesto”) gets wrapped onto two lines, like this:

MovieManife
sto

Also, even though Chrome’s developer tools indicate that everything looks fine for users with iPhone 6/7/8, a friend with an iPhone 7 told me that similar text wrapping is occurring on his phone. Is there any way I can fix this?

For reference, here is the code that I currently have in place re: screen sizes:

@media only screen and (min-width: 1025px) {
   .header-image {
      padding-top: 86px !important;
   }
}

@media only screen and (max-width: 1024px) {
   .header-image {
      margin-top: -2px;
   }
}

On the other thread, a moderator told me to try adding the following code:

@media (max-width: 380px) {
    .site-title a {
        font-size: 9.5vw;
    }
}

This did not work, at least according to Chrome’s developer tools. (I can’t test it on my own phone, as I don’t have an iPhone, so I’m relying on what Chrome tells me.) I even tried reducing the font to something very small, just for testing purposes, but per the developer tools, it didn’t have any effect.

Any ideas? Thanks very much for any help you can provide.

– Jeremy


#2

Hello Jeremy,

Also, even though Chrome’s developer tools indicate that everything looks fine for users with iPhone 6/7/8, a friend with an iPhone 7 told me that similar text wrapping is occurring on his phone.

I thought that this is the third issue regarding some text in content area, but it looks like you mean the same issue with site title. If it’s correct, then please let’s continue in previous topic. I’ve already answered there.

Kind Regards, Roman.


closed #3