MaryAgnes Posted April 2, 2020 Share Posted April 2, 2020 Site URL: https://www.maryscholten.com/copy Hello! My text blocks on this page need some help. I got the text in the "My Experience" block to center vertically but am unable to get it to center horizontally now: Additionally when I change the resolution, the text is not wrapping and is instead being cut off: When I reach the mobile breakpoint the "My Experience" block disappears instead of stacking I would like to fix this on all the similar text blocks on this page. Thank you!! Link to comment
MaryAgnes Posted April 2, 2020 Author Share Posted April 2, 2020 I've fixed the first two issues by adding width: 20%; into the appropriate boxes. Still trying to figure out the disappearing on mobile issue. Link to comment
tuanphan Posted April 2, 2020 Share Posted April 2, 2020 To center with transform: translate & absolute You need to set position: relative for parent elements, your code will be div#page-5e79719043a2c54bbc968650>.row:nth-child(4)>.col { background: #e88e69; border-radius: 5px; position: relative; } #block-yui_3_17_2_1_1585017241461_3705 { background: #e88e69; border-radius: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MaryAgnes Posted April 2, 2020 Author Share Posted April 2, 2020 Created a pseudo-element to replace the boxes that were disappearing on mobile, in case this helps anyone. @media screen and (max-width:640px){ #block-yui_3_17_2_1_1585192574157_21878::before { content: 'My Experience'; color: #1B405A; font-size: 24px; border: solid; border-color: #E88E69; background-color: #E88E69; border-radius: 5px; padding-left: 5px; padding-right: 5px; font-family: modestolite; position: absolute; left: 0px; transform: translateY(-147%); } #block-yui_3_17_2_1_1585611604780_98655{ margin-bottom: 20px; } } So it created this tab looking thing titled "My Experience" This ticket can be closed! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.