Member Avatar for ryanwhite17

Hi,
I am using a responsive website to make a site which is here -
What I want to do is have the last column ONLY, which lists the locations the Dr. performs exams at, to have a different background color. I have tried a bunch of different things but nothing unless it changes all the column backgrounds. Any help?

Edited by Dani because: Fixed broken link
  • 4 Contributors
  • 5 Replies
  • 314 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by gabrielcastillo

Dani AI

Generated

A reliable, future-proof approach is to mark the final column explicitly and style that class instead of relying on table-only selectors or fragile structural pseudo-classes. was right for table markup, and correctly noticed there was already a container-class in the markup — editing that class fixes the immediate issue, but adding a clear semantic class (for example col--locations) makes the intent obvious and avoids breakage if columns are reordered or wrappers are added.

Example (add a class to the last column and style it):

<div class="row">
  <div class="col">Info A</div>
  <div class="col">Info B</div>
  <div class="col col--locations">Locations list</div>
</div>
.col--locations {
  background: #f2f2f2;
  padding: 12px;
  box-sizing: border-box;
}

For equal-height colored columns in modern layouts, make the row a flex container so the background fills the column height:

.row { display: flex; flex-wrap: wrap; align-items: stretch; }
.col { flex: 1 1 33%; }

If the layout stacks on small screens and the different background shouldn’t persist, use a media query to change or remove it at narrow widths:

@media (max-width: 600px) {
  .col--locations { background: transparent; padding: 8px 0; }
}

Troubleshooting notes: check CSS specificity and browser inspector if the rule does not apply (another selector may be overriding it or an !important may be in place). If the project must keep the existing floated grid, avoid rewriting everything to flexbox at once — apply the semantic class and use a small helper like display: table/height: 100% on the column inner element, or accept the existing container-class change as suggested for a quick fix.

Recommended Answers

All 5 Replies

Member Avatar for AndrisP

use td:last-child in css

Member Avatar for ryanwhite17

How exactly do I do that?

Member Avatar for ryanwhite17

I'm using columns and not tables so that wouldn't work would it?

Member Avatar for JorgeM

I noticed that the div that contains the list of locations has a class assigned called "lightcontainer".

Why dont you just modify the CSS file (css/responsivegridsystem.css), line 488 and update the background color there...

.lightcontainer 
{
    background: #f90105;
    padding-left:5px;
    padding-top:5px;
}
Member Avatar for gabrielcastillo

Looks like you figured it out on the site.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.