Text resizing on Mobile

Is there a way to get the header fonts to resize on mobile devices, when the device is in portrait mode?

I have an issue that any instance of a word with over 8 characters results in some of the letters being transferred to the line below. It only happens for instances when the mobile is in portrait mode.

I have tested it on iPhone and HTC - happens on both phones.

You can see an example on this page: www.siblingstogether.co.uk/arnov-2014

I tried adding to the custom css from a previous string - but this did not work.

@media screen and (max-width: 320px) {
.panel-grid-cell .widget-title {
font-size: 24px;
}
}

sorry - made a mistake with the link

Hello,

Do it like this please:


@media screen and (max-width: 320px) {
  section .widget-title,
  .panel.widget .widget-title {
      font-size: 24px !important;
  }
}

Hi Vlad:

This does not appear to be working. I have included all the custom CSS I have in place - just wondered if there might be an error in there?

.site-logo {
max-width: 150px;
position: relative;
}
.site-branding {
padding: 5px 15px;
}
.main-navigation li {
padding: 35px 10px;
}
@media screen and (min-width: 992px) {
.is-sticky .main-navigation li {
padding: 35px 10px;
}
.is-sticky .site-branding {
padding: 5px 15px;
}
.widget-title:after {
border: 0 !important;
}
.main-navigation ul ul a {
color: #000000;
}
@media screen and (max-width: 320px) {
section .widget-title,
.panel.widget .widget-title {
font-size: 24px !important;
}
}
.employee-photo {
display: block;
margin: 0 auto;
}

Hello,

Yeap, you’re missing the closing } for @media screen and (min-width: 992px) {. Not really sure after which piece of code you want to close it, but you would need to add it.

Hi Vlad:

I have tried a few different combinations of closing the }, but each time it is returning an error when I check the W3C validator.

Can you let me know what I should be doing here? I’ve simply been copying and adding code from the forum, so clearly I have made an error along the way - but don;t have the experience (yet) to solve this.

11 Value Error : min-width Property min-width doesn’t exist for media screen : 992px 992px
29 Parse Error @media screen and (max-width: 320px) { section .widget-title, .panel.widget .widget-title { font-size: 24px !important; } }

Are you sure you’re checking for CSS3? Those media queries are perfectly fine. Anyway, you need to close it, it should fix the employees centering issue too.

And you don’t need to try different combinations, you just need to close it where you need it to be closed. I’m guessing after this:


.is-sticky .site-branding {
padding: 5px 15px;
}

Yes, I believe so as I used http://www.css-validator.org. however, when I run the same CSS on CSS Lint I do not get the same message - only a warning about the use of !important

anyway:

I’ve made the change, but still the problem exists. It did solve another issue I had with the centre placement of the employee photos (I have replied to that on another thread).

I tried changing the font size from 24px to 14px to see if it created a change - and it did not. I also checked on iPhone and HTC. Still no change.

I’ve included the code once again below. Sorry to be a pain here.

@media screen and (max-width: 320px) {
section .widget-title,
.panel.widget .widget-title {
font-size: 24px !important;

.site-logo {
max-width: 150px;
position: relative;
}
.site-branding {
padding: 5px 15px;
}
.main-navigation li {
padding: 35px 10px;
}
@media screen and (min-width: 992px) {
.is-sticky .main-navigation li {
padding: 35px 10px;
}
.is-sticky .site-branding {
padding: 5px 15px;
}
}
.widget-title:after {
border: 0 !important;
}
.main-navigation ul ul a {
color: #000000;
}
@media screen and (max-width: 320px) {
section .widget-title,
.panel.widget .widget-title {
font-size: 24px !important;
}
}
.employee-photo {
display: block;
margin: 0 auto;
}

css-validator.org checks by default CSS2, not 3.

See your first lines, you’re missing two closing braces:


@media screen and (max-width: 320px) {
section .widget-title,
.panel.widget .widget-title {
font-size: 24px !important;

Not to mention the fact that you’re just duplicating code that is properly written below :slight_smile:

Hi Vlad:

I’ve added the following (which is from this thread, reply #12789)

@media screen and (max-width: 320px) {
section .widget-title,
.panel.widget .widget-title {
font-size: 24px !important;
}
}

I still cannot get this to work. I also tried stripping out all the other custom CSS code and simply leaving the code below in to see if that made any difference - but it did not.

But it is working, just checked your website now. Though that code is only supposed to be applied at screen widths below 320px. I assumed that’s how you wanted it since you first posted your code with this: @media screen and (max-width: 320px) {. If you want to apply at larger widths too, simply change 320px to the value you want.

Hi Vlad. I have issue with the same topic but didn’t want to start new thread. Hopefully you will find it here.
So I tried to resize the titles on phones, without success. Then I tried to make them small also for desktop viewing, so I set the size to 10px. What happened is, that on desktop, the titles are really small, but on phone they are still very big.

Do you know what could be wrong?
Thank you
www.brainripper.com

Vlad I was having the same issue with the text being cut into multiple lines in my titles but the code you supplied fixed it perfectly. Thank you!

My other problem though is that the fact numbers when longer than 4 characters split onto two lines on my iphone 5s. Is there a way to fix this also?

www.southeaststudentpainters.com

Decreasing the facts font size on small screens should do it (change 30px if it’s needed):


@media only screen and (max-width: 320px) {
   .fact {
        font-size: 30px;
   }
}

That worked perfectly, thank you!

Can you please tell me how to change the font paragraph size for mobile only? I am changing CSS using a CSS custom plugin by Theme Junkie.

Thanks!

Kind regards,

Juliana

Hi,

You can change the paragraph font-size on mobiles only with this Custom CSS:

@media only screen and (max-width: 768px) {
    p {
        font-size: 12px !important;
    }
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Thank you so much Csaba!

Can you also tell me please how to fix something on the mobile versión?
When the menu is displayed, only the first two pages are shown in a black background, the other menu items have a transparent background and are mixed up with the page´s background.

the website is www.diglobal-ltd.com

Can you please help me with this?

Kind regards,

Juliana

Hi,

There is no height set to mobile nav that’s caused the issue, but you can fix that with this Custom CSS:

#mainnav-mobi {
    height: auto !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Amazing! It worked!! :slight_smile:
Thank you so much!

Kind regards,

Juliana