weikelbob
asked on
CSS: Making Pure CSS read more boxes thinner
Hello,
How do I make these pure CSS read more boxes thinner vertically.
Only CSS is allowed on my site, no javascript
On this page
http://www.ouradultdiapers.com/tranquility-premium-overnight-pull-ons-p/2113.htm
there are 2 of them.
The first one says
Product Description Menu...
The second one says
Who is OurAdultDiapers? Also Security and Privacy...
Here's the code:
and
How do I make these pure CSS read more boxes thinner vertically.
Only CSS is allowed on my site, no javascript
On this page
http://www.ouradultdiapers.com/tranquility-premium-overnight-pull-ons-p/2113.htm
there are 2 of them.
The first one says
Product Description Menu...
The second one says
Who is OurAdultDiapers? Also Security and Privacy...
Here's the code:
<div class="readmore">
<input class="read-more-state" id="post-1" type="checkbox"/>
<strong class="level2bigwhite">Product Description Menu...</strong><label for="post-1" class="read-more-trigger"></label>
<div class="read-more-target">
<br/>
<a href="#wha">What You Should Know</a><br/>
<a href="#mea">Measurements Table</a><br/>
<a href="#how">How Absorbent is it?</a><br/>
<a href="#wil">Will This Fit Well?</a><br/>
<a href="#odo">Will This Control Odor?</a><br/>
<a href="#mor">More Key Features You Should Know</a><br/>
<a href="#bar">Will this Work for Bariatric? Youth? Bowel?</a><br/>
<a href="#alt">Alternative Products - Style, Bariatric, Youth, Bowel</a><br/>
<a href="#faq">5 Question FAQ - Tranquility Premium Overnight Pull-Ons</a><br/>
<a href="#dis">Discreteness</a><br/>
<a href="#abo">About Tranquility</a><br/>
<a href="#shi">Shipping Speed & Returns</a><br/>
<a href="#our">Who is OurAdultDiapers? Also Security and Privacy</a><br/>
<!--<a href="#ple">Please Share This Page</a>
<a href="#pro">Product You May Also Need</a> -->
</div>
</div>
and
.read-more-state {
display: none;
}
.read-more-target {
max-height: 1px;
overflow: hidden;
-webkit-transition: max-height 0.7s; /* Safari */
transition: max-height 0.7s;
}
.read-more-state:checked ~ .read-more-target {
max-height: 50em;
}
.read-more-state ~ .read-more-trigger:before {
content: 'Read more';
}
.read-more-state:checked ~ .read-more-trigger:before {
content: 'Show less';
}
.read-more-trigger {
cursor: pointer;
display: inline-block;
padding: 0px 0px 0px -1.5em;
color: #666;
font-size: 1.1em;
line-height: 2;
font-weight:bold;
color:#45bfff;
margin-top:-11px;
}
.readmore h2
{
color: #a7925e;
font-size:150%;
}
ASKER
Actually what I meant was thinner up and down. I want them to be wide but not tall. On both desktop and mobile. Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Got this. Sorry, my code was a mess. Once I straightened it up, you're right. It's that easy. Thanks.
You are welcome.
Open in new window
If you only want this on desktop then add to style on line 2346 otherwise line 2161 of template.css