Font Squish Problem with Custom CSS

dehb · May 10

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

tuanphan · May 13

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%;
}}

dehb · May 20

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

Edited May 20 by dehb
Added screenshot.

tuanphan · May 21

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

dehb · May 26

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

dehb · May 26

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%;
}}

Font Squish Problem with Custom CSS

Question

dehb

Link to comment

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

dehb

Posted Images

5 answers to this question

Recommended Posts

tuanphan

Link to comment

dehb

Link to comment

tuanphan

Link to comment

dehb

Link to comment

dehb

Link to comment

Create an account or sign in to comment

dehb

Support

Community

Developers

Resources