Docs

[nedalpert]

Hello:

I am trying to reduce the font-size on my iPhone settings, as the site title extends past the device borders.

I was able (a separate matter) to make some child theme CSS adjustments to this tag (.x-brand), changing the color and referring to a custom font like so:

.x-brand {
font-family: ‘Herculanum’, sans-serif;
color: #999999;
}

/* Media Queries */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait) {
.x-brand {font-size: 24px !important;}
}

The Media Query above is just not working, and I have tweaked the dimensions and also the tag (tried .x-brand text with no success) — can you see what I am doing wrong?

Thanks, Ned

[Rahul]

Hi There,

Greetings!
Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[nedalpert]

http://ambrosianijewelry.com

Thanks, Ned

[Joao]

Hi There,

Please try :

@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait) {
.x-brand.text	{font-size: 24px !important;}
}

Hope it helps

Joao

[nedalpert]

Hi Joao:

Tried both .x-brand text and .x-brand.text but neither were successful. Thanks for your suggestion!

Regards, Ned

[nedalpert]

I thought this might work, but did not…

I deleted the font-size setting under Logo Text in the Customizer “Header”, and added it in via CSS. Again in desktop mode it looked OK, but I still could not change for the iPhone in the @Media setting. 🙁

Rgds, Ned

[Nico]

Hi There,

In this case, to further check your setup why it is not working. Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[nedalpert]

This reply has been marked as private.

[Christopher]

Hi there,

Please update your code to :

/* Media Queries */
@media only screen and (max-width: 767px) and (orientation: portrait) {
  
a.x-brand.text	{
  font-size: 30px !important;
    } 
}

Hope it helps.

[nedalpert]

Thank you — works beautifully.

Great support!!

[Joao]

Glad to hear it 🙂

[Author]

Posts