Decrease Font Sizes on Mobile

Get Help
,
1

CB3FC78F-ED38-46D1-85ED-F6C1F89193F2
CB3FC78F-ED38-46D1-85ED-F6C1F89193F21242×2688 138 KB

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

#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;
	}
}
2

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:


@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.

3

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?

4

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

#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:

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

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