Header-text much smaller on phone than on PC

“header-text” is very small on phone compared to PC or tablet. I’ve set the font to 110px and it looks fine on PC and tablet but on my phone it is smaller than H1 in the page body. This looks a bit odd.

Can I change this?

Hi,

Can you share your site URL here? and let me know which part that you mentioned above.

Regards,

url is the same as ever - www.houserocket.co.uk

the header-text I am referring to is “Tanglefoot Appalachian Cloggers” in “a little pot” font, text colour cyan with a blue shadow. It is set to 110px . It appears quite large, and as I would like, on my PC and tablet displays. On my iPhone, however, the very same text appears smaller than the h1 header in the text body below which is also “Tanglefoot Appalachian Cloggers” but as h1 is set to 40px on the fonts customise section.

i.e 110px appears smaller than 40px on phone display. Clearly the theme is doing some scaling, but why is it not proportional?

Hi,

I do some checks and got this CSS code to make it better. You can use this code instead, but you may need to remove your custom CSS code for the .header-text first.

.home .site-content {
    margin-top: 0;
}
h4.header-subtext {
    display: none;
}

@media only screen and (max-width: 500px) {
   .header-text {
      font-size: 40px !important;
   }  
 }
 @media only screen and (max-width: 900px) {
   .header-text {
      font-size: 75px !important;
   }  
 }
  @media only screen and (min-width: 901px) {
   .header-text {
      font-size: 110px !important;
   }  
 }
@media only screen and (max-width: 1200px) {
    .header-info {
        top: 0;
    }
}

Regards,

This is what I ended up with:

.entry-header .entry-meta .cat-links {
display: none;
}

.entry-header .entry-meta .cat-links + .meta-dash {
display: none;
}

.entry-date {
display: none;
}
.fa-calendar {
display: none;
}

.main-navigation li {
font-size: 100px;

}

@font-face {
font-family: a_little_pot;
src: url("/wp-content/themes/astrid/fonts/alittlepot-webfont.woff") format(“woff”),
url("/wp-content/themes/astrid/fonts/alittlepot-webfont.woff2") format(“woff2”);
font-weight: normal;
font-style: normal;

}
.header-text {
font-family: a_little_pot;
text-align: center;
}

.header-text {
margin: 0 auto;
color: cyan;
display: table;
text-transform: uppercase;
letter-spacing: 5px;
}

Now the header-text on my iphone is too big. PC and tablet still ok.

I will do some more trial and error

I presume this section:

@media only screen and (max-width: 900px) {
.header-text {
font-size: 75px !important;
}
}

pertains to phone screens.

Have just tried
@media only screen and (max-width: 900px) {
.header-text {
font-size: 43px !important;
}
}
and that seems to be OK on my iPhone 6

Thanks for all the support.

1 Like

The above css sort of works - but in jumps. I found some css here https://css-tricks.com/books/volume-i/scale-typography-screen-size/ , which works more smoothly and continuously.

My version here below…
.header-text {
font-size: calc(40px + (100 - 40) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
… works very well on my PC as I drag the browser window size up and down. However, I can’t seem to increase the minimum text size on my iPhone (6). It remains a bit too small for my liking whatever value I use for [minimum size] . Is there some other css code in this theme which is overriding my instruction?

Hi @ececconi

Let’s continue fix your issue here…

Firstly, please remove the custom code related to the header-text which set the font-size.
Then Add this code below. The code below should work on any screen size (changing the @media query to use min-width instead):

h3.header-text {
    font-size: 32px !important;
}

@media (min-width: 768px){
    h3.header-text {
        font-size: 66px !important;
    }   
}
@media (min-width: 1024px){
    h3.header-text {
        font-size: 92px !important;
    }   
} 

That almost works. On a PC as I change the browser window size the text goes up too far at one stage, overwriting the menu line. If I change the max text to 110px then the text goes down too far at certain browser window sizes.

On a tablet and mobile phone the text is too low, spilling into the main body of black and white text.

It would seem to be necessary to control the vertical position as the text size is changing.

Having tried various css methods to change text size with changes in screen size I think that this:

.header-text {
font-size: calc(40px + (100 - 40) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}

works the best.

However there is still some unexpected vertical movement which can spill over into unwanted areas. Also I have not figured out why I cannot increase the minimum size for phone display.

One other thing that is complicating matters is that the menu area is changing from one line across the screen to two lines and then to a 3 line hamburger as the screen size changes. This affects the relative vertical positions of the different areas.

This page shows the problem exactly: https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/

The scaling behaviour of the astronaut picture is what I want. The behaviour of the skull/crossbones/tripleX is what the header-text is doing

Hi,

What changes you do to the code? I think it breaks your header area

Can you revert it back?

Regards,

Have sent you an email explaining that you were looking at a trial on our test temporary site (www.houserocket.co.uk) The real permanent site is at www.tanglefootcloggers.co.uk.

Anyway, in the meanwhile, we have decided that a jpg in the header media customize section, consisting of the photo of feet with text superimposed will scale up and down smoothly without getting involved with any font-scaling, screen-size dependant css.

Much much simpler.

Oh I see… So, do you still need to figuring out the previous issue? If yes, maybe you can create a new page that duplicated from your previous frontpage. Then, I will try to fixing the issue from that page.