Font Size For Mobile Specific Block ID

I wanted to know how to resize a specific text block ID.

The situation at hand that I used the following code to make the text size on the mobile version looks good...but I have a counter of employees on my main homepage with a '+' sign next to the counter code block (separate) which makes the '+' sign fade in the counter on the mobile version.

What I want is a code that I can write in the CSS with the '+' sign block ID for the mobile version only.

Notice: Check the attached images for comparison before & after applying the mobile text size code.

Used Code:

 

@media only screen and (min-width: 1025px) {

 

 #main-navigation {

 background: rgba(101, 89, 60, 0.9);

 width:15%;

 }

 

} 

 

#main-navigation {

 background: rgba(101, 89, 60, 0.9) 

     }

 

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

  body {

      font-size: 16px;

  }

 

  h1 {

      font-size: 35px;

  }

 

  h2 {

      font-size: 22px;

  }

 

  h3 {

      font-size: 20px;

  }

 

  blockquote {

      font-size: 16px !important;

  }

 

}

You should share link to your site. Difficult to give the exactly code without site url.

Oh, totally forgot 😅here you go: https://www.ebguae.com/

1 hour ago, BonCiel said:

Oh, totally forgot 😅here you go: https://www.ebguae.com/

@media screen and (max-width:640px) {
/* Number */
div#block-yui_3_17_2_1_1563260560424_13412 .counter-value {
    font-size: 70px;
}
/* Employees */
div#block-yui_3_17_2_1_1563260560424_13412 .counter-value:after {
    font-size: 33px;
}
/* + */
div#block-yui_3_17_2_1_1563260560424_13412 h1 {
    font-size: 30px;
}
}