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.
Question
dehb
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; } } }
Link to comment
Top Posters For This Question
2
4
Popular Days
May 26
2
May 10
1
May 13
1
May 20
1
Top Posters For This Question
tuanphan 2 posts
dehb 4 posts
Popular Days
May 26 2022
2 posts
May 10 2022
1 post
May 13 2022
1 post
May 20 2022
1 post
Popular Posts
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;
Posted Images
5 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment