# Need Help: Is it possible to make 4th column of Container have different background colour?

**URL:** <https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998>\
**Category:** Ask for Help\
**Created:** [October 11, 2024, 11:39am UTC](https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998 "2024-10-11T11:39:07Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)\
**Post date:** [October 11, 2024, 11:39am UTC](https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998/1 "2024-10-11T11:39:07Z")

</div>

Hi Guys,

I have a container which has 3 Columns. The first 3 columns can have same background colour But I want the 4th column to have a green background colour.

Like this :

 ![WhatsApp Image 2024-10-11 at 4.09.13 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/b/7b984326d1c32683cf34ba71d47d12bc18197711.jpeg)

Is it possible to do it? If yes can you please guide me?

Thank you in advance for your help

Regards,  
Dilip

---

<div class="post-metadata">

**Author:** ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)\
**Post date:** [October 11, 2024, 12:06pm UTC](https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998/2 "2024-10-11T12:06:18Z")

</div>

Hi Guys,

Chat got gave me this code.

```auto
/* Target the 4th column in the container and set its background color to green */
.changecolourofcontainer [data-testid="cc-column"]:nth-child(4) {
  background-color: green; /* Change background color to green */
}

```

But nothing seems to work.

Thank you in advance for your help.

Regards,  
Dilip

---

<div class="post-metadata">

**Author:** ![micheal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/micheal/32/80181_2.png) [@micheal](https://community.glideapps.com/u/micheal)\
**Post date:** [October 11, 2024, 1:07pm UTC](https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998/3 "2024-10-11T13:07:30Z")

</div>

Did you perform an inspection for the class of the 4th column?

Launch the app and inspect imon the chrome browser… get the class name for the 4th container

Do that then use the property chat gpt gave you. I’d try it out now if I could

---

<div class="post-metadata">

**Author:** ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)\
**Post date:** [October 12, 2024, 3:59am UTC](https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998/4 "2024-10-12T03:59:11Z")

</div>

Hi @micheal

I tried that

This is the DIV what it shows when I do inspect element

```auto
<div class="pages-component-renderer ___StyledResponsiveProvider-sc-10vdj2m-11 dnXXeR top max-size-2xl"><div data-testid="wire-container" class="wire-container___ StyledDiv2-sc-1scc3f6-1 lkBvDn section-wrap reactive style-none spacing-small none use-relative"><div class="wire-container ___StyledDiv3-sc-1scc3f6-2 ksimeT section-container multi-column justify-center"><div id="must-start-with-a-letter2aef7938b655352e684afe813ccb6961" class="select-mode-container___ StyledDiv-sc-1q98tyi-0 khMdFt component-root"><div class="select-mode-container ___StyledDiv2-sc-1q98tyi-1 eHEYeK" style="pointer-events: auto;"><h4 class="text__ TextBase-cfnh6b-0 text ___StyledTextBase-cfnh6b-1 hYHVFv eRwkkX wire-text___ StyledText-sc-17qgb83-0 dYQkSM align-start headlineMedium" data-testid="wire-text">Caption</h4></div></div></div></div><div data-testid="wire-container" class="wire-container ___StyledDiv2-sc-1scc3f6-1 lkBvDn section-wrap reactive style-none spacing-small none use-relative"><div class="wire-container___ StyledDiv3-sc-1scc3f6-2 ksimeT section-container multi-column justify-center"><div id="must-start-with-a-letter7a2ee5911f8a06d4e2b7cdc6756daaa5" class="select-mode-container ___StyledDiv-sc-1q98tyi-0 khMdFt component-root"><div class="select-mode-container___ StyledDiv2-sc-1q98tyi-1 eHEYeK" style="pointer-events: auto;"><p class="text __TextBase-cfnh6b-0 text___ StyledTextBase-cfnh6b-1 hYHVFv RzLNk wire-text ___StyledText-sc-17qgb83-0 dYQkSM align-start regular" data-testid="wire-text">Experience the perfect balance of functionality and precision with Samet’s Master Soft-Close Hinge. Elevate your home with hinges that redefine smoothness, adding a touch of innovation to everyday life. #PrecisionRedefined #SoftClosePerfection #GreenplySamet</p></div></div></div></div><div data-testid="wire-container" class="wire-container___ StyledDiv2-sc-1scc3f6-1 lkBvDn section-wrap reactive style-none spacing-small none use-relative"><div class="wire-container ___StyledDiv3-sc-1scc3f6-2 ksimeT section-container multi-column justify-center"><div id="must-start-with-a-letter384d0fcd0c48aadb11f4dbea561a7812" class="select-mode-container___ StyledDiv-sc-1q98tyi-0 khMdFt component-root"><div class="select-mode-container ___StyledDiv2-sc-1q98tyi-1 eHEYeK" style="pointer-events: auto;"><h4 class="text__ TextBase-cfnh6b-0 text ___StyledTextBase-cfnh6b-1 hYHVFv eRwkkX wire-text___ StyledText-sc-17qgb83-0 dYQkSM align-start headlineMedium" data-testid="wire-text">Content Description</h4></div></div></div></div><div data-testid="wire-container" class="wire-container ___StyledDiv2-sc-1scc3f6-1 lkBvDn section-wrap reactive style-none spacing-small none use-relative"><div class="wire-container___ StyledDiv3-sc-1scc3f6-2 ksimeT section-container multi-column justify-center"><div id="must-start-with-a-letterffde33742300cdc71e1f09aa0281ccd4" class="select-mode-container ___StyledDiv-sc-1q98tyi-0 khMdFt component-root"><div class="select-mode-container___ StyledDiv2-sc-1q98tyi-1 eHEYeK" style="pointer-events: auto;"><p class="text __TextBase-cfnh6b-0 text___ StyledTextBase-cfnh6b-1 hYHVFv RzLNk wire-text___StyledText-sc-17qgb83-0 dYQkSM align-start regular" data-testid="wire-text">Highlight Samet’s advanced hinge systems, particularly the Master Soft-Close Hinge, showing how they add functionality and precision to Indian homes.</p></div></div></div></div></div>

```

When I applied this I weirdly got green colours like this

 ![Screenshot 2024-10-12 at 9.28.03 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/1/41d858f0d2603a2e1b894dadc08227995a9f18e1.jpeg)

this is the CSS I applies

```auto
/* Target the 4th wire-container and set its background color to green */
.changecolourofcontainer [data-testid="wire-container"]:nth-child(4) {
  background-color: green; /* Change background color to green */
}

```

Thank you in advance.

Regards,  
Dilip

---

<div class="post-metadata">

**Author:** ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)\
**Post date:** [October 12, 2024, 6:35am UTC](https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998/5 "2024-10-12T06:35:30Z")

</div>

Hi,

I used this css

```auto
/* Target the last column using its unique ID */
#must-start-with-a-letterffde33742300cdc71e1f09aa0281ccd4 {
  background-color: #e8f5e9 !important; /* Light green background */
  padding: 20px;
  border-radius: 8px; /* Optional rounded corners */
}

```

and got it to apply to one element in the last column. But now able to get it to entire column.

 ![Screenshot 2024-10-12 at 12.04.32 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/7/c75ba07c3a302e0cb53a0e10a080b971c093dac4.jpeg)

Regards,  
Dilip

---

<div class="post-metadata">

**Author:** ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)\
**Post date:** [October 14, 2024, 3:34am UTC](https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998/6 "2024-10-14T03:34:46Z")

</div>

Hi Guys,

Wanted to know whether something like would be possible ? If yes is CSS the only way?

Because I am stuck getting the above UI at the best altering the CSS. Not able to get it to entire last column of the container.

Regards,  
Dilip

---

<div class="post-metadata">

**Author:** ![Oliver\_Wiles](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/oliver_wiles/32/80715_2.png) [@Oliver\_Wiles](https://community.glideapps.com/u/Oliver_Wiles)\
**Post date:** [October 14, 2024, 4:33am UTC](https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998/7 "2024-10-14T04:33:16Z")

</div>

Hi Dilip,

What seems to work for me is using the :last-child selector in CSS. Here is what it would look like:

```auto
.element> :last-child {
background-color: green;
border-radius: 5px;
padding:8px;
}

```

Instead of .element, i would use the identifier for the overarching container.

See how you go.

---

<div class="post-metadata">

**Author:** ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)\
**Post date:** [October 14, 2024, 7:41am UTC](https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998/8 "2024-10-14T07:41:13Z")

</div>

Hi @Oliver_Wiles ,

Thank you for the reply. I tried applying it using the unique id.

Its applying for all columns of the container.

Regards,  
Dilip

---

<div class="post-metadata">

**Author:** ![Oliver\_Wiles](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/oliver_wiles/32/80715_2.png) [@Oliver\_Wiles](https://community.glideapps.com/u/Oliver_Wiles)\
**Post date:** [October 14, 2024, 11:12am UTC](https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998/9 "2024-10-14T11:12:34Z")

</div>

Ah of course! The container CSS class applies at a higher level so my first response wouldn’t work.

What I would suggest is assigning the container a class in the custom css field (ive called mine test-class for now), then inspect the page to find out the lowest level component that has all the containers components, which for me looks like .idNmRo. In other words, the html element that has the separate container columns as its children, I’ve attached a screenshot which hopefully makes that make more sense.

 ![Screenshot 2024-10-14 at 10.08.20 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/d/0d3f51e3f4f8763f5aa8e7a7cbd6425c7995547e.png)

I can then do:

```auto
.test-class .idNmRo > :last-child {
background-color: green;
border-radius: 5px;
padding:8px;
}

```

Let me know if that doesn’t make sense!

Cheers.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 14, 2024, 12:00pm UTC](https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998/10 "2024-10-14T12:00:44Z")

</div>

The behavior of this container will switch between a 4x1 column, 2x2 columns, and 1x4 columns depending on the screen size. I’d like to know what you expect when dealing with a smaller screen—would you prefer to maintain the 4-column layout or not?

---

<div class="post-metadata">

**Author:** ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)\
**Post date:** [October 15, 2024, 4:45am UTC](https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998/11 "2024-10-15T04:45:00Z")

</div>

Hi @Oliver_Wiles ,

Thank you for showing me how to find the DIV id and letting me know how to do it.

It worked.

Regards,  
Dilip

---

<div class="post-metadata">

**Author:** ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)\
**Post date:** [October 15, 2024, 4:46am UTC](https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998/12 "2024-10-15T04:46:26Z")

</div>

Hi @Himaladin ,

Thank you for responding.

Is there a way I can change how it looks for mobile view? Using CSS?

No for mobile I would want it to be single column layout itself.

Just for my knowledge how can I still retain 4 column layout for mobile?

Regards,  
Dilip

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 15, 2024, 5:02am UTC](https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998/13 "2024-10-15T05:02:27Z")

</div>

> [@Dilip\_Adiga](#):
>
> Just for my knowledge how can I still retain 4 column layout for mobile?

This code applies in all situations, except since the addition of `:not(:has(.mobile-layer))`, the block of this code no longer applies on mobile. You can remove it, which will result in having 4 columns on mobile as well (not recommended for smaller screen widths).

 ![Screenshot 2024-10-15 at 10.53.45](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/9/f9abb6867f7201267c8780497da37ce9acc23a60.jpeg)

```auto
/* 4th Column Background of the container */
.className .container-padding-md > div:last-child {
    background-color: #bfe3c2;
    border-radius: 8px;
}
.className .container-padding-md > div {
    padding:16px;
}
/* Column size */
#page-root:not(:has(.mobile-layer)) .className .container-padding-md {
    grid-template-columns: repeat(3, 1fr) 2fr;
    gap: 0px;
}

```

The class name here is **className**. You can change it according to your needs.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 15, 2024, 5:05am UTC](https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998/14 "2024-10-15T05:05:36Z")

</div>

> [@Himaladin](#):
>
> ```auto
> /* Column size */
> #page-root:not(:has(.mobile-layer)) .className .container-padding-md {
> grid-template-columns: repeat(3, 1fr) 2fr;
> gap: 0px;
> }
> 
> ```

Here, I am only applying a container layout of 4 x 1 and 1 x 4 (for mobile).  
If you want to use the container layout according to the default CSS from Glide, then just remove this property: `grid-template-columns: repeat(3, 1fr) 2fr;`.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 15, 2024, 5:39am UTC](https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998/15 "2024-10-15T05:39:23Z")

</div>

> [@Dilip\_Adiga](#):
>
> `#must-start-with-a-letterffde33742300cdc71e1f09aa0281ccd4 `

> [@Oliver\_Wiles](#):
>
> `.idNmRo`

It has been frequently discussed in other threads to avoid class names like this, as they are randomly generated by the machine and unstable.

---

<div class="post-metadata">

**Author:** ![Dilip\_Adiga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilip_adiga/32/60330_2.png) [@Dilip\_Adiga](https://community.glideapps.com/u/Dilip_Adiga)\
**Post date:** [October 16, 2024, 3:34pm UTC](https://community.glideapps.com/t/need-help-is-it-possible-to-make-4th-column-of-container-have-different-background-colour/76998/16 "2024-10-16T15:34:48Z")

</div>

Hi @Himaladin ,

Thank you for the detailed explanation. Really appreciate it.

I will try to out and let you know.

Regards,  
Dilip