Link to home
Start Free TrialLog in
Avatar of weikelbob
weikelbobFlag for United States of America

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:

<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>

Open in new window


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%;
}

Open in new window

Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

You can give them a margin

.readmore {
  margin-right: 50px;
}

Open in new window


If you only want this on desktop then add to style on line 2346 otherwise line 2161 of template.css
Avatar of weikelbob

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
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Got this. Sorry, my code was a mess. Once I straightened it up, you're right. It's that easy. Thanks.
You are welcome.