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 :
Is it possible to do it? If yes can you please guide me?
Thank you in advance for your help
Regards,
Dilip
Hi Guys,
Chat got gave me this code.
/* 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
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
Hi @micheal
I tried that
This is the DIV what it shows when I do inspect element
<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
this is the CSS I applies
/* 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
Hi,
I used this css
/* 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.
Regards,
Dilip
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
Hi Dilip,
What seems to work for me is using the :last-child selector in CSS. Here is what it would look like:
.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.
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
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.
I can then do:
.test-class .idNmRo > :last-child {
background-color: green;
border-radius: 5px;
padding:8px;
}
Let me know if that doesn’t make sense!
Cheers.
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?
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
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
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).
/* 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.
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;.
It has been frequently discussed in other threads to avoid class names like this, as they are randomly generated by the machine and unstable.
Hi @Himaladin ,
Thank you for the detailed explanation. Really appreciate it.
I will try to out and let you know.
Regards,
Dilip