Jump to content

Issues with text wrap, alignment and disappearing text blocks

Recommended Posts

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
  • Replies 3
  • Views 905
  • Created
  • Last Reply

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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%);
    	margin-bottom: 20px;

So it created this tab looking thing titled "My Experience"



This ticket can be closed!

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.