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:

276107639_ScreenShot2020-04-02at12_35_47PM.thumb.png.d34f900e228712c72c99ae6b7142e2f3.png

 

Additionally when I change the resolution, the text is not wrapping and is instead being cut off:

733310925_ScreenShot2020-04-02at12_36_13PM.png.6195d4d490bce405f96f1837d714355e.png

When I reach the mobile breakpoint the "My Experience" block disappears instead of stacking

1156613129_ScreenShot2020-04-02at12_36_50PM.png.3e02cc54b7a4ab365ed522268ed12f92.png

I would like to fix this on all the similar text blocks on this page. 

Thank you!!

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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

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"

888689294_ScreenShot2020-04-02at9_00_38PM.png.9dda5a44922b5ac2bef0195b3d2dd506.png

 

This ticket can be closed!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.