CSS exhibiting variations on similar pages

Although the pages look identical, they are actually pulled from the same template file in Drupal but have different URLs.

nyc.thedelimagazine.com/snacks

In my document head, I've included a style rule that overrides a stylesheet further up the cascade:

a:link, a:visited {
font-size: 12px;
}

The font size is too large, and while the CSS override works for the first link, it doesn't apply to the second. The larger font only appears after voting in the poll and reloading the page to see "See full results | About".

Additionally, I'm unable to edit the linked CSS file via FTP because the Owner/Group is set to "apache" instead of my user name, hence why I require the override.

cssdrupal

Answer №1

It seems like the issue lies in the difference between your two pages. The working page has the text nested within a td element with a class of soups, while the non-working page does not have this nesting. As a result, the CSS rule that relies on the soups class is not being applied correctly.

UPDATE: Just to clarify, the CSS rule you mentioned in your question is not responsible for the smaller text size on the first link. The actual rule causing the text size to be 14px instead of 12px is:

.soups a, .soups font{

This rule is being applied incorrectly due to the difference in nesting between the two pages.

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

Enlarge the image to fill the entire screen

Currently, I am working on a webpage where I am displaying data fetched from a database using Laravel framework. The code snippet is shown below: Here is how the webpage looks like - image1 What I aim to achieve is to make the div go fullscreen upon clic ...

phphtmlcsslaravel

Impact of designs on the elements within components

Here's a CSS query I have: If I have the code below, does the styling apply to the contents of v-container but not v-container itself? <v-app id="inspire"> <v-container justify-center style="max-width: 1200px"> <v-layout row ...

cssvue.jsvuetify.js

What is the best way to create a layout containing a <div> split into three columns, with the middle column having rows?

I'm currently working on a <div> layout that I need to split into rows. The challenge is creating a design that is fluid and can adapt to various screen sizes, including mobile devices. While using an HTML table might be a quick fix, it's n ...

htmlcsstwitter-bootstrap

Using CSS to add color to the border of a shape

Is there a way to make only the top, shaped part of this polygon have a 2px blue outline? .graph { clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%); border:none; height:200px; width:100%; ...

htmlcss

Position a <div> element in the center of another <div> element

Link to code: https://jsfiddle.net/z4udfg3o/ My goal is to center the "caixa" divs within the "produtos" div. Initially, I achieved this by using exact values with margin-left. However, I now want it to be responsive across different screen sizes, so I ha ...

htmlcss

Position two div elements and an hr tag to create a step progress bar

Check out my progress bar design How can I center the 'created' and 'assigned' divs below the circle while ensuring the 'hr' line touches the circle, and it is responsive across different screen sizes? Any tips on how to cr ...

htmlcssfrontendline

Utilize CSS to format the output of a script embedded within

When I embed the following script in my HTML, the output doesn't have any styling. How can I style the script output to blend well with the existing HTML structure? I tried accessing the output by ID, but couldn't figure it out. <script> ...

javascripthtmlcss

Ways to animate a main element independently of its counterpart's animation

I want to create an animation for a parent element without affecting the child's animation. My HTML & CSS structure is set up as follows: .parent{ background-image: url('https://pm1.narvii.com/6195/421ddbf8c9a2fb1715ef833f869164dc1be ...

htmlcss

What is it about the phone screen that makes media content so captivating?

My phone has a resolution of 2280x1080. I noticed that when using the following code, the background color changes to blue on my phone: @media (max-width: 500px) { body { background-color: blue; } } Interestingly, this feature stops working once "compute ...

htmlcssmedia-queries

`CSS Toggle Smooth Transition Effect`

I am working on creating 2 CSS toggle buttons that currently have a fade in and out effect when clicked. I would like them to have a sliding animation from right to left instead. Below is the HTML, CSS, and a link to a fiddle containing my code. Thank yo ...

htmlcssanimationtoggleslide

A method to trigger the opening of a div tag when a button is clicked using Vue.js

<div class="input-wrapper"> <div class="mobile-icon"></div> <input class="input-section label-set" type="text" v-model.trim="$v.mobile.$model" :class="{'is-invalid': ...

javascripthtmlcssvue.js

Achieving uniform distribution of items within a flex container

I have been struggling since yesterday to make this work. I just can't seem to get these flex items to fill the container equally in width and height. No matter what I try, it's not cooperating. <html> <meta charset="utf-8"> ...

htmlcssflexbox

What is the best way to justify list items to the left?

Having trouble aligning my list content to the left. Any suggestions are welcome! Here is a snippet of the code: <div class="col-md-4 mb-1"> <i class="fas fa-hiking fa-4x"></i> <h4 class="my-4" font-weight-bold&g ...

htmlcsshtml-lists

Instructions on creating a number increment animation resembling Twitter's post engagement counter

I've been attempting to replicate the animation seen on Twitter's post like counter (the flipping numbers effect that happens when you like a post). Despite my best efforts, I can't seem to make it work. Here is what I have tried: $(fun ...

javascripthtmljquerycss

When hovering over a single list item, only the top border will be displayed without affecting the

Check out the live link provided below: I am attempting to add a border and later an arrow in the middle on hover in the menu. However, the current code places a border over the entire menu, with individual list items on top of that. #menu ul li { margin ...

cssmenuhover

Prevent parent element from triggering double click when double clicking on children element with CSS or jQuery

Check out my project demo here Whenever I double click on a child element, it also triggers the parent element at the same time. I want to prevent this behavior so that only the child element is affected by the double click event. Can anyone provide assis ...

javascriptjqueryhtmlcss

Align the text to the right within a display flex container

Below is the code snippet: <div className="listContent"> <div> <div className="titleAndCounterBox"> <div className="headerListTitle">{list.name}</div><br /> <div ...

htmlcsssassflexbox

Is there a way to access the badge hidden behind the collapsible menu in bootstrap 4?

After moving from bootstrap 3 to bootstrap 4, my items no longer align properly. I've scoured the entire Internet for a solution, but I've run out of options (and patience.. haha) This is how it currently looks: I want the badge to be positione ...

csstypescriptreact-reduxbootstrap-4

"Discover the power of D3.JS with three dazzling charts on a single page, plus a host of additional

As a student, I struggle with English and it makes me feel sorry and anxious... Despite that, I want to create three scatter plot charts on the same page using a single data file (csv). The dataset includes columns for Name, Height, Weight, and Grade (ra ...

javascripthtmlcssd3.js

Troubleshooting the fluid container problem in Bootstrap 3

I am currently working on a website using Bootstrap 3 framework. I have a specific section where I need to have two fluid containers placed side by side, each with different background colors. One of these containers should also include a background image ...

htmlcsstwitter-bootstraptwitter-bootstrap-3