Minimizing the font size of a single page

I have a section on my Drupal website that appears on both the homepage and the testimonials page.

After increasing the font size of this section, I noticed it looks good on the homepage but not on the testimonials page!

Homepage: Testimonials page:

The specific text is as follows:

See how Workbooks #1 rated web based CRM software can help your organization 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

I am able to adjust the font size easily, but since it appears better on the homepage, I would like to decrease the font size only when displayed on the testimonials page (/testimonials). Is this possible?

htmlcssdrupaldrupal-7

Answer №1

To implement this style, simply insert the following CSS code:

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

Important Note: Please be cautious as there is an inline CSS rule for font-size: 15px; in the paragraph. It is advisable to remove this conflicting styling.

Answer №2

Given that your body tag includes a specific class for the page (.page-testimonials), 

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

You could potentially add the following to the main css of your website:

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

Alternatively, you could update the content within the box. Rather than using 

<p style="font-size: 15px;">
, switch to 
<p class="testimonials-box">

This way, you can adjust the font size specifically for the front page in your main css, while leaving other areas with the default font size.

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

The use of .front targets the front page (which is already a css class in your current code).

Answer №3

Within the Drupal platform, each content type that is displayed contributes specific CSS classes to the body element. Additionally, every block present on a page is assigned unique classes and/or ids. By leveraging these combinations, users can precisely target any block on any given page.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

difficulty encountered when passing parameters in functions such as setInterval

Hi everyone, I need some help with my code. Feel free to check it out here Currently, I'm working on implementing multiple circular progress bars that can function dynamically. The goal is to be able to add additional progressCircle_# objects with di ...

javascripthtmlcss

What is the method for modifying the appearance of the background property on an input element?

I am currently working on customizing an HTML5 video player's track bar using CSS. My goal is to utilize jQuery to modify the style of the track bar. One way I have attempted to change the background of the track bar with jQuery is by employing the f ...

jquerycsshtml

Dragging a div element within a table

I am working on an HTML code where I need to make the colored divs draggable and fit them into specific table cells. The green div should occupy 2 cell spaces, light blue 3 cell spaces, yellow 4 cell spaces, and dark blue 5 cell spaces. While I have the d ...

javascriptjqueryhtmlcssjquery-ui

center the radio button with CSS3

I am experiencing difficulty focusing the pointer inside this customized radio button. <div class="radio"> <input id="left" type="radio" name="gender" value="left"> <label for="left">Left</label> <input id="right" ty ...

cssradio-button

What is the process of making a div element in AngularJs?

Is there a way to dynamically create a div element in AngularJS? For instance: <table ng-controller="tableController"> <tr ng-repeat="totaldivs in parameters"> <td ng-repeat="divId in totaldivs"> <!-- looking to replace ...

htmlangularjs

Tips for toggling the visibility of a <div> element using PHP code inside

I'm having trouble with a dropdown list that is supposed to show/hide some divs containing PHP files. However, when I try to toggle the visibility of the divs using the dropdown list, it doesn't seem to work as expected. Can anyone help me figure ...

javascriptphpjqueryhtmlcss

"Efficiently trimming off any text past the final character using

I have a variable in Smarty named {$url} which contains the following URL: $url = https://www.example.com/?parameter=hello:world:itsme I need to remove everything after the last ":" in the URL. The desired output is: $result = https://www.example.com/? ...

phphtmlurlsmarty

Ways to shift placeholder text slightly to the right within a select dropdown?

Struggling with this issue for hours, I can't seem to figure out how to: Adjust the position of the placeholder text (Search) by 10 pixels to the right in my select component Reduce the height of the field (maybe by 5px) without success. Could someo ...

javascriptcssangularsassangular-material

I would like to split the window into four columns and populate each one with images

I've been struggling to create 4 columns in my design, but I just can't seem to make it work. I've tried setting the height to 100% in each div, but it didn't produce the desired result. I was able to achieve it with colors, but not wit ...

htmlcssbootstrap-5

The radio button functionality is not functioning properly as intended

Having trouble with the current code that utilizes HTML and JavaScript. There is an HTML table on the page with a radio button and 4 other fields. The table is generated dynamically when values are set through the controller. It is also possible to add new ...

javascriptjqueryhtml

Having trouble with ng-select focus in Angular 5?

I've been attempting to implement focus on ng-select within Angular 5, but unfortunately, it doesn't seem to be working as expected. Currently, I am utilizing ng2-select for my project. Is there a specific method for implementing focus on ng-se ...

htmlangulartypescriptfocus

An effective way to prevent right-clicking on iframes across all websites

I am facing an issue with disabling right click for the iframe. I've successfully disabled it for the default URL of the IFrame, but when displaying any other webpage, the right click remains usable. Below are the sample codes I have used: document.o ...

javascriptjqueryhtmlcssasp.net

Position a div to float in the top right corner without overlapping its sibling header

Is there a way to position a div in the top right corner of a section without overlapping the text of a h1? This is the HTML code: <section> <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1> < ...

csshtml

CSS changes on child elements cause conflicts with parent hover effects

I've come across the following html code : .logo { display: inline-block; width: 30px; position: absolute; top: 50%; opacity: 0; transition: 0.6s; } .container:hover .logo { opacity: 1; transition: 0.6s; } .container:hover .pictur ...

htmlcss

Using Testcafe to extract the value attribute of a hidden input element

Is there a way to retrieve the value of an <input>, especially what is contained within its value attribute even if the input is not visible? I am using testcafé, but it seems like this could be a challenge. Does anyone have any suggestions or opti ...

javascripthtmlnode.jstestingtestcafe

How to perfectly position various height <a> elements in a WordPress mega menu

I'm currently working on a WordPress mega menu with four columns, each with a heading or top menu item. The headings should have a gradient border at the bottom and differ in length. However, I'm facing an issue where some headings span two lines ...

htmlcsswordpress

What are the steps to converting one grid to another solely with the use of Bootstrap utilities?

https://i.sstatic.net/SuGiM.png I am looking to convert the grid layout shown above into the grid layout displayed below. To achieve the above layout, I have used the following grid structure: <div className="row"> <div className=&q ...

htmlcsstwitter-bootstrapbootstrap-4

Extending the href value using jQuery at the end

Can someone help me with this link: <a id="Link" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2745425453424b4b524940674e0a4355464e4909494253">[email protected]</a>?subject=I-Drain Bestellung& ...

javascriptjqueryhtmlforms

A unique Javascript feature that switches the text on various buttons

As someone who is relatively new to Javascript and web development, I am currently working on a project that involves creating multiple text areas for users to input and save text. Each text area is accompanied by a button with a unique ID that functions a ...

javascripthtml

Tips for honing in on a particular card within a list of cards using React

I am currently working with React 17.0.2 and Material UI, and I have a specific requirement to focus on a particular card from a list of cards by clicking on it. (Please refer to the attached picture for clarification). I hope this explanation helps you un ...

htmlcssreactjsmaterial-uigrid