Jump to content

How to prevent responsive text in body of one page?

Recommended Posts

Site URL: https://fbcamherst.squarespace.com/staff

Hello!

We want our "Read More" buttons to line up (see below). They do line up at a certain width (fully expanded on desktop) but when you shrink it, the are out of alignment (see second image)

We want the body of this page to NOT be responsive to changing of window size so that we can have more control over what it looks like. How do we make it so the text does not wrap and move around as you change the window size? We want it to be fixed, unless on mobile where it would just use the mobile form of the website (single column).

Site URL: https://fbcamherst.squarespace.com/staff

Password on site is: fbcfbc

Thank you!

 

 

What we want it to always look like, unless it detects mobile-- then it should go to mobile design:

FBC 1.png

When the window shrinks, so do all of the elements. How do we make it so that this doesn't happen on one page?

FBC2.png

Edited by Tiger_Thomas
Clarification
Link to comment
  • Tiger_Thomas changed the title to How to prevent responsive text in body of one page?
  • Replies 4
  • Views 669
  • Created
  • Last Reply

Top Posters In This Topic

@tuanphan

<div class="post">
<H4>
  Lily Soh
</H4>
<H5>
  Chinese Ministry Pastor
</H5>
      Lily serves as the Pastor for FBC’s Chinese Ministry. She has been in ministry for more than 30 years. She earned her Master of Divinity from 
      <span class="dots">...</span>
      <span class="more">
 Fuller Theological Seminary and her Doctorate of Ministry at Assemblies of God Theological Seminary. Lily serves as a unique bridge connecting the Chinese Ministry with the English-speaking congregation. Lily works among the pastors and volunteer teams to lead our ministries for Chinese students and local Chinese residents to build relationships and foster a culture where everyone feels welcomed and safe to explore their faith and invite friends. Lily enjoys reading thoughtful books and exploring the beautiful scenery of New England.
      </span>
      <button1 class="read">read more</button1>
   </div>

 

Link to comment

First, edit Lily Shoh to this code

<div class="post">
<h4>
  Lily Soh
</h4>
<h5>
  Chinese Ministry Pastor
</h5>
      <p>Lily serves as the Pastor for FBC’s Chinese Ministry. She has been in ministry for more than 30 years. She earned her Master of Divinity from 
      <span class="dots">...</span>
      <span class="more">
 Fuller Theological Seminary and her Doctorate of Ministry at Assemblies of God Theological Seminary. Lily serves as a unique bridge connecting the Chinese Ministry with the English-speaking congregation. Lily works among the pastors and volunteer teams to lead our ministries for Chinese students and local Chinese residents to build relationships and foster a culture where everyone feels welcomed and safe to explore their faith and invite friends. Lily enjoys reading thoughtful books and exploring the beautiful scenery of New England.
      </span>
      <button1 class="read">read more</button1>
          </p>
   </div>

(I added p tag wrap around paragraph

Quote

<p>Lily serves as the Pastor for FBC’s Chinese Ministry. She has been in ministry for more than 30 years. She earned her Master of Divinity from 
      <span class="dots">...</span>
      <span class="more">
 Fuller Theological Seminary and her Doctorate of Ministry at Assemblies of God Theological Seminary. Lily serves as a unique bridge connecting the Chinese Ministry with the English-speaking congregation. Lily works among the pastors and volunteer teams to lead our ministries for Chinese students and local Chinese residents to build relationships and foster a culture where everyone feels welcomed and safe to explore their faith and invite friends. Lily enjoys reading thoughtful books and exploring the beautiful scenery of New England.
      </span>
      <button1 class="read">read more</button1>
          </p>

Do similar for other people.

Next, add this to Design > Custom CSS

/* Align read more */
@media screen and (min-width:768px) {
div#block-6cb77ca95cfd0fd875ee+.row .span-4 {
    position: relative;
    flex: 1;
}
div#block-6cb77ca95cfd0fd875ee+.row .span-4 .read {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
div#block-6cb77ca95cfd0fd875ee+.row {
    display: flex;
}
div#block-6cb77ca95cfd0fd875ee+.row .span-4 .code-block {
    position: static;
}
}

image.thumb.png.997c8374686987def6cc43e652e6e1d4.png

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

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.