Jump to content

Font Size For Mobile Specific Block ID

Recommended Posts

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);





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




Before inserting the codeAfter inserting the code

Link to comment
  • Replies 3
  • Created
  • Last Reply
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;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.