How do I Change HTML Font Size for Mobile Only in My WordPress Theme?

Tagged: HTML, WordPress

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts
September 28, 2023 at 9:42 am #106994

Hilary
Guest

Hello! I’ve been scouring the internet this morning, and can’t seem to find a solution that works for my specific circumstance.

In various places on my website, I’ve used code to put in text, because it allows me more flexibility for fonts, sizes, etc., than Squarespace does.

My trouble is on mobile screens (for the record, I did see this post, but it is not the solution: https://www.boldgrid.com/support/question/change-font-size-for-mobile-screens/ )

How do I use HTML to change the font size on mobile only, within this type of coding?

My web developer gave me some code, but it is not working.

She advised ADDING the following code (in this case “#ITEM” is whatever I had named the code for that specific text)

@media only screen
and (max-device-width: 600px)
{

#ITEM {
font-size: 12px;}

}
————————

Here’s what I currently have in total (and it is not working):

<h4 id=”digestion-guide-2″>
A free download to help you get rid of<br>bloating, constipation,
excess hunger, heartburn,<br>and other digestive symptoms.
</h4>
<style>

#digestion-guide-2 {
font-family: Henderson-sans-basic;
text-transform: none; color: #F7f4ee;
font-size: 24px;
font-weight: lighter;
line-height: 1.2em;
letter-spacing: 0.0rem;
text-align: center;}

@media only screen and (max-width: 600px)
{#digestion-guide-2 {
font-size: 16px;}

</style>

September 28, 2023 at 9:54 am #107050
Brandon C
Keymaster
Hi Hillary,

Thank you for reaching out to BoldGrid Themes support! We appreciate your interest in our products.

I wanted to bring to your attention that our support forum is specifically dedicated to addressing inquiries related to BoldGrid Themes. While we’re more than happy to assist you with any questions or issues you might have regarding our themes, it’s important to note that our forum isn’t intended for general WordPress support.

I took a look at the media query in your code and it looks to be setup correctly. Maybe emphasizing the font size with an !important tag will allow your changes to display correctly. Here’s how I would set this up:
```
@media screen and (max-width: 600px) {
  #digestion-guide-2 {
    font-size: 16px !important;
  }
}
```
I really hope this helps! If you have inquiries or need assistance related to the broader aspects of WordPress or topics beyond BoldGrid Themes, you might find the official WordPress support forums or other community platforms more suitable for such discussions.

That being said, if you have any questions or concerns related to our themes or any BoldGrid-specific features, feel free to share them here, and we’ll do our best to provide you with the support you need.

We appreciate your understanding and cooperation. If you have any BoldGrid Themes-related questions, please don’t hesitate to ask!
Author

Posts