Font Squish Problem with Custom CSS

Site URL: https://www.cedarcrest.ab.ca/services

Hoping a CSS Wizard will know exactly what I'm doing wrong here.  It seems fine until you have a weird window resolution and then each letter for one of the sections will go 1 letter each line.

Problem: Experiencing some font squish when the window is resized.

Screenshot(s): Attached - one with squish, one without.

Template Version: 7.1

Browser: Seems to be most, you just have to resize the window slightly differently to achieve the result.

Custom CSS:

/*and (min-width:641px)*/

@media only screen {
  #collection-6261ea5a26d68f3b783cdc89{
    #page .page-section:nth-of-type(2) {
      width: 50%;
      /*min-height: 80vh;*/
      align-items: center;
      float: left;
    }
    #page .page-section:nth-of-type(3) {
      width: 50%;
      /*min-height: 80vh;*/
      align-items: center;
      float: left;
    }
       #page .page-section:nth-of-type(4) {
      width: 50%;
     /* min-height: 80vh;*/
      align-items: center;
      float: right;
    }
  #page .page-section:nth-of-type(5) {
      width: 50%;
     /* min-height: 80vh;*/
      align-items: center;
      float: right;
    }
      #page .page-section:nth-of-type(6) {
      width: 50%;
      /*min-height: 80vh;*/
      align-items: center;
      float: left;
    }
#page .page-section:nth-of-type(7) {
      width: 50%;
      /*min-height: 80vh;*/
      align-items: center;
      float: left;
    }
      #page .page-section:nth-of-type(8) {
      width: 50%;
      /*min-height: 80vh;*/
      align-items: center;
      float: right;
    }
  }
}

Add this to Design > Custom CSS

/* Fix services tablet problem */
@media screen and (max-width:991px) and (min-width:768px) {
[data-section-id="6261ec3f4816a4467ae6eb1f"] {
    width: 50%;
}}

Hi @tuanphan

I appreciate the response.  Does this replace the current code?  Pasted below for convenience.

I tried both (adding in addition to and replacing the code with yours and neither worked.

Any other suggestions?

@media only screen {
  #collection-6261ea5a26d68f3b783cdc89{
    #page .page-section:nth-of-type(2) {
      width: 50%;
      align-items: center;
      float: left;
    }
    #page .page-section:nth-of-type(3) {
      width: 50%;
      align-items: center;
      float: left;
    }
       #page .page-section:nth-of-type(4) {
      width: 50%;
      align-items: center;
      float: right;
    }
  #page .page-section:nth-of-type(5) {
      width: 50%;
      align-items: center;
      float: right;
    }
      #page .page-section:nth-of-type(6) {
      width: 50%;
      align-items: center;
      float: left;
    }
#page .page-section:nth-of-type(7) {
      width: 50%;
      align-items: center;
      float: left;
    }
      #page .page-section:nth-of-type(8) {
      width: 50%;
      align-items: center;
      float: right;
    }
  }
}

Don't remove any code in your current code

Add my code to bottom of Custom CSS box

And the code is for Tablet problem

Oh, I see.  This problem is currently showing on both Desktop and Mobile sites.  Any further recommendations?

I think I might have got it.. added section (9).

@media only screen {
  #collection-6261ea5a26d68f3b783cdc89{
    #page .page-section:nth-of-type(2) {
      width: 50%;
      align-items: center;
      float: left;
    }
    #page .page-section:nth-of-type(3) {
      width: 50%;
      align-items: center;
      float: left;
    }
       #page .page-section:nth-of-type(4) {
      width: 50%;
      align-items: center;
      float: right;
    }
  #page .page-section:nth-of-type(5) {
      width: 50%;
      align-items: center;
      float: right;
    }
      #page .page-section:nth-of-type(6) {
      width: 50%;
      align-items: center;
      float: left;
    }
#page .page-section:nth-of-type(7) {
      width: 50%;
      align-items: center;
      float: left;
    }
#page .page-section:nth-of-type(8) {
      width: 50%;
      align-items: center;
      float: right;
    }
#page .page-section:nth-of-type(9)
{
      width: 50%;
      align-items: center;
    }
  }
}

/* Fix services tablet problem */
@media screen and (max-width:991px) and (min-width:768px) {
[data-section-id="6261ec3f4816a4467ae6eb1f"] {
    width: 50%;
}}