Alternating colors in grid and drop down

Good morning Knacksters,

I have been trying to get our company colors into the grid view (Alternating Colors)and also in the drop down menus. I Googled and used Grok and both came up with this CSS. I placed this CSS into the API & Code / CSS section and it does not appear to do anything. I am using Classic, for reference.

.grid-container {

display: grid;

grid-template-columns: repeat(3, 1fr); /* Adjust columns as needed */

gap: 10px;

}

.grid-item:nth-child(odd) {

background-color: #ffcb05; /* Buckingham Yollow for odd rows */

}

.grid-item:nth-child(even) {

background-color: #ffffff; /* White for even rows */

}

/* Target the dropdown menu items */

.menu-links select option:nth-child(odd) {

background-color: #f0f0f0; /* Light gray for odd items */

color: #000; /* Black text */

}

.menu-links select option:nth-child(even) {

background-color: #ffcb05; /* Buckingham Yellow for even items */

color: #000; /* Black text */

}

/* Optional: Add hover effect for better user experience */

.menu-links select option:hover {

background-color: #ffcb05; /* Buckingham Yellow on hover */

color: #000; /* Black text */

}

Am I doing something wrong. I thought I just had to copy and paste it.

Kyle McAfee

Hard to tell what’s happening without setting up a test lab for your code, or sharing your page for professional help.

I strongly recommend using the web inspector tools to make sure the CSS is targeting the right elements, and following Knack’s dev docs on how to get your CSS right here: docs.knack.com/reference/identifying-elements-to-change