Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to adjust markdown block CSS "Read More" button after it's been triggered


ManshaF
Go to solution Solved by bangank36,

Question

Site URL: https://manshaplan.com/

Hi! 

Website: https://manshaplan.com/ 

Password: password

I've created a "read more" button using a markdown block and added an image to be revealed after button is triggered. Problem is, once the image is revealed the "read less" button is in the middle of the image. I can't figure out how to move the button placement down after its been triggered without effecting the button placement in its "read more" state as well (I want the button to be where it is in it's "read more" state and only lower the placement in the "read less" state). Any help is super appreciated! Attached screen shots of issue as well as code below: 

 

Markdown Block Code: 


<div class="show-hide">
 <input type="checkbox" class="read-more-state" id="visible22"/>
 <div class="read-more-wrap">

 <center>
 <p>
       <h3>20 Years of Planning, Experience, and Results.</h3>
   </p>
       <div class="read-more-target">
     <p>
 <img style=" margin: 30px auto; display: block;" height="Auto" width = "Auto" src="https://static1.squarespace.com/static/5e9f058c4ff1d847cfe30e06/t/5fa2d7ced7a9fd3ad600f35b/1604507598737/Home+Page+Illustrations+-+Timeline+-+Desktop-03.png">
     </p>
     </div>     
</center>
 </div>
     <label for="visible22" class="read-more-trigger"></label>
</div>
<div class="show-hide">
 <input type="checkbox" class="read-more-state" id="visible23"/>
 <div class="read-more-wrap">

 

CSS Code: 

 

/* Who We Are - dropdown - Our History - dropdown - TEXT Agjustment*/

#block-yui_3_17_2_1_1604505134181_21917
.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
        -ms-transform: translateY(0%);
  transform: translateY(0%);
}

#block-yui_3_17_2_1_1604505134181_21917
.read-more-state ~ .read-more-trigger:before {
  content: 'Read More';
}

#block-yui_3_17_2_1_1604505134181_21917
.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Read Less';
}


/* Who We Are - dropdown - Our History - BUTTON Agjustment*/

#block-yui_3_17_2_1_1604505134181_21917
.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  position: absolute;
  top: 60%;
  left: 45%;
  margin-bottom: -10px; 
  margin-top: -10px;
  margin-left: 15px; 
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2.5;
  border: 1px solid rgba(225, 187, 35, .5);
  border-radius: .25em;
      -ms-transform: translateY(20%);
  transform: translateY(20%);
}

#block-yui_3_17_2_1_1604505134181_21917
.read-more-trigger:hover {
  background:rgba(225, 187, 35, .5);
  color:black;
  opacity: .7;
}

Screen Shot 2020-11-04 at 1.59.28 PM.png

Screen Shot 2020-11-04 at 1.59.19 PM.png

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

Site URL: https://manshaplan.com/ Hi!  Website: https://manshaplan.com/  Password: password I've created a "read more" button using a markdown block and added an image to be revealed

@bangank36 Ah such an easy fix. Thank you so much it worked ! 🙂

Posted Images

2 answers to this question

Recommended Posts

  • 0

Let not use absolute position for read more button

#block-yui_3_17_2_1_1604505134181_21917 .read-more-trigger {
    cursor: pointer;
    display: inline-block;
    position: relative;
    top: -30px;
    left: 45%;
    margin-bottom: -10px;
    margin-top: -10px;
    margin-left: 15px;
    padding: 0 .5em;
    color: #666;
    font-size: .9em;
    line-height: 2.5;
    border: 1px solid rgba(225,187,35,.5);
    border-radius: .25em;
    -ms-transform: translatey(20%);
    transform: translatey(20%);
}

image.thumb.png.38db617ef9e604dfdc6ebbe7dfbde899.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...