Reducing font size on one page

0
votes

I have a block on my website (I use Drupal) which is shown on both the homepage and the testimonials page.

Since I increased the font size of the block it now looks great on the homepage but not so great on the testimonial page!

Homepage: http://www.workbooks.com Testimonials page: http://workbooks.com/testimonials

The text in question is the following:

See how Workbooks #1 rated web based CRM software can help your organisation to increase revenue, streamline businesses processes and reduce costs.
Workbooks extends beyond traditional CRM to include sales order processing, contract management and invoicing, so you can manage all your customer

Now I can easily change the font size but since it's ideal on the homepage I'd like to only reduce the font size only when the content type is shown on the testimonials page (/testimonials) is this possible?

3
htmlcssdrupaldrupal-7
Yes, is possible. Just give a class wrap around the testimonials and then you can have like: .testimonials .yourclass[ /*your rules*/] - Luís P. A.

3 Answers

2
votes

Just add this CSS

.section-testimonials .field-content p{
font-size: 11px;
line-height: 14px !important;
margin-top: 4px;
}

Note: Beware you have a css inline on that p - font-size: 15px; It´s better you delete.

0
votes

Since you have a body tag that has a page specific class (.page-testimonials), 

<body class="html not-front not-logged-in no-sidebars page-testimonials section-testimonials page-views container" >

you may be able to put this in the main css for the website:

.page-testimonials .row-first .col-first .field-content p {
font-size: 12px !important;}

Another solution is to edit the content of the box, so in stead if writing <p style="font-size: 15px;"> you write <p class="testimonials-box">

Then you can add this to your main css, to only target the font size of the front page, and just let the other places be with default font size.

.front p.testimonials-box {font-size:15px;}

You use .front to target the front page (that is a css class in your code as it is now).

0
votes

In drupal every displayed content type is adding some CSS class to body element. Also every block on page has some class (and/or id). So by combining those 2 you can aim any block at any page.