# Decrease Font Sizes on Mobile

**URL:** <https://community.gravityforms.com/t/decrease-font-sizes-on-mobile/13545>\
**Category:** Get Help\
**Tags:** media-queries, css\
**Created:** [October 3, 2022, 11:36am UTC](https://community.gravityforms.com/t/decrease-font-sizes-on-mobile/13545 "2022-10-03T11:36:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![user605ba0bc28408920](https://avatars.discourse-cdn.com/v4/letter/u/bb73d2/32.png) [@user605ba0bc28408920](https://community.gravityforms.com/u/user605ba0bc28408920)\
**Post date:** [October 3, 2022, 11:36am UTC](https://community.gravityforms.com/t/decrease-font-sizes-on-mobile/13545/1 "2022-10-03T11:36:05Z")

</div>

![CB3FC78F-ED38-46D1-85ED-F6C1F89193F2](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/2X/2/2ba4360584b8fb169d8476d49d82fbb49632db9c.jpeg)

I have created some fields which display nicely on desktop but on mobile cannot be viewed. Any ideas on what I am doing wrong?

[https://deposyt.co.uk](https://deposyt.co.uk)

```auto
#field_1_7.gfield input {
    font-size: 26px;
}
#field_1_7.gfield input {
    font-weight: bold 
}
#field_1_7.gfield input {
    color: #ff8363;
}
#field_1_7.gfield input {
    background-color: #000000;
}

#field_1_1.gfield input {
    font-size: 26px;
}
#field_1_1.gfield input {
    font-weight: bold 
}
#field_1_1.gfield input {
    color: #ffffff;
}
#field_1_1.gfield input {
    background-color: #000000;
}
body .gform_wrapper .gform_body .gform_fields #field_1_1.gfield input[type=text] {border-bottom: 3px solid white}

#field_1_4.gfield input {
  	color: #ff8363;
}
#field_1_4.gfield input {
  	background-color: #000000;
}
#field_1_4.gfield input {
    font-size: 26px;
}

#field_1_6.gfield input {
  	color: #ffffff;
}
#field_1_6.gfield input {
  	background-color: #000000;
}
#field_1_6.gfield input {
    font-size: 26px;
}

body #gform_wrapper_1 { 
  max-width: 75%;
  margin: 0 auto;
 }
  
 body #gform_wrapper_1 .gfield .ginput_container,
 body #gform_wrapper_1 .gfield .gfield_description,
 body #gform_wrapper_1 div.ginput_complex label,
 body #gform_wrapper_1 input:not([type='radio']):not([type='checkbox']):not([type='submit']), 
 body #gform_wrapper_1 select, 
 body #gform_wrapper_1 textarea { 
  text-align:center;
 }
  
 body #gform_wrapper_1 .top_label .gfield .gfield_label {
  text-align: center;
  display: block;
 }
    
  body #gform_wrapper_1 .gform_footer,
  body #gform_wrapper_1 .gform_page_footer{
    text-align: center;
 }
  

@media only screen (max-width: 767px) {
	body .gform_wrapper select option {
		font-size: 12px;
		line-height: 1.0;
	}
}

```

---

<div class="post-metadata">

**Author:** ![chrishajer](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/chrishajer/32/88_2.png) [@chrishajer](https://community.gravityforms.com/u/chrishajer)\
**Post date:** [October 3, 2022, 12:42pm UTC](https://community.gravityforms.com/t/decrease-font-sizes-on-mobile/13545/2 "2022-10-03T12:42:39Z")

</div>

> [@user605ba0bc28408920](#):
>
> `#field_1_6.gfield input`

You have made your desktop styles very specific, with the field IDs, but your mobile styles are very generic, targeting the whole form. Try adding `!important` to your mobile styles, like this:

```auto

@media only screen (max-width: 767px) {
	body .gform_wrapper select option {
		font-size: 12px!important;
		line-height: 1.0!important;
	}
}

```

If that does not work, you will need to duplicate your more specific styles (that target the field IDs) for mobile, in a media query, in order to override them. Let us know how it turns out.

---

<div class="post-metadata">

**Author:** ![user605ba0bc28408920](https://avatars.discourse-cdn.com/v4/letter/u/bb73d2/32.png) [@user605ba0bc28408920](https://community.gravityforms.com/u/user605ba0bc28408920)\
**Post date:** [October 3, 2022, 2:39pm UTC](https://community.gravityforms.com/t/decrease-font-sizes-on-mobile/13545/3 "2022-10-03T14:39:25Z")

</div>

Hi,

Thanks Chris.

That didn’t work. Is there some example CSS you can share with me that will show me how to target the specific fields on mobile in CSS as I have not done this before?

---

<div class="post-metadata">

**Author:** ![chrishajer](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/chrishajer/32/88_2.png) [@chrishajer](https://community.gravityforms.com/u/chrishajer)\
**Post date:** [October 4, 2022, 4:13am UTC](https://community.gravityforms.com/t/decrease-font-sizes-on-mobile/13545/4 "2022-10-04T04:13:40Z")

</div>

Hi Jason. Basically, you will need to take all of these specific rules (the ones related to font size and line size):

```auto
#field_1_7.gfield input {
    font-size: 26px;
}
#field_1_7.gfield input {
    font-weight: bold 
}
#field_1_7.gfield input {
    color: #ff8363;
}
#field_1_7.gfield input {
    background-color: #000000;
}

#field_1_1.gfield input {
    font-size: 26px;
}
#field_1_1.gfield input {
    font-weight: bold 
}
#field_1_1.gfield input {
    color: #ffffff;
}
#field_1_1.gfield input {
    background-color: #000000;
}
body .gform_wrapper .gform_body .gform_fields #field_1_1.gfield input[type=text] {border-bottom: 3px solid white}

#field_1_4.gfield input {
  	color: #ff8363;
}
#field_1_4.gfield input {
  	background-color: #000000;
}
#field_1_4.gfield input {
    font-size: 26px;
}

#field_1_6.gfield input {
  	color: #ffffff;
}
#field_1_6.gfield input {
  	background-color: #000000;
}
#field_1_6.gfield input {
    font-size: 26px;
}

body #gform_wrapper_1 { 
  max-width: 75%;
  margin: 0 auto;
 }
  
 body #gform_wrapper_1 .gfield .ginput_container,
 body #gform_wrapper_1 .gfield .gfield_description,
 body #gform_wrapper_1 div.ginput_complex label,
 body #gform_wrapper_1 input:not([type='radio']):not([type='checkbox']):not([type='submit']), 
 body #gform_wrapper_1 select, 
 body #gform_wrapper_1 textarea { 
  text-align:center;
 }
  
 body #gform_wrapper_1 .top_label .gfield .gfield_label {
  text-align: center;
  display: block;
 }
    
  body #gform_wrapper_1 .gform_footer,
  body #gform_wrapper_1 .gform_page_footer{
    text-align: center;
 }

```

And wrap them all in a media query. So all those rules will be inside a media query section like this:

```auto
@media only screen (max-width: 767px) {
    /* all that CSS but with smaller font sizes and line sizes */
}

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/2X/f/fef63f0599c45e0218c30d9f5d7ca8bff9b00189.png) [@system](https://community.gravityforms.com/u/system)\
**Post date:** [November 3, 2022, 4:14am UTC](https://community.gravityforms.com/t/decrease-font-sizes-on-mobile/13545/5 "2022-11-03T04:14:25Z")

</div>

Closed on November 3, 2022, 4:14am UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.