dehb

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

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

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

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