dehb
-
Posts
4 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by dehb
-
-
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; } } }
Font Squish Problem with Custom CSS
in Customize with code
Posted
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%; }}