Hi everyone,
I’m using the Atelier theme and I’m trying to customize the variant buttons layout.
Each button has a 1px border, and when they touch each other (since gap: 0), the borders stack and visually appear as 2px thick lines between buttons?
This the current css that works to close the gap and fix height and width for the grid-boxs:
.variant-option–buttons {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0 !important;
}
.variant-option {
margin: 0 !important;
padding: 0 !important;
}
.variant-option__button-label {
width: 100% !important;
height: 50px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
Here is the product page where the issue can be seen:
https://runway-official.com/products/dior-x-air-jordan-1-low-1
Would really appreciate guidance on the correct way to achieve this.
Hello there,
Hope everything is fine. The best way is to fix this issue is via removing the border from the right side of each variant item. It means removing the border from the right side for the all variant buttons except the 4th, 8th, 12th ….. and last variant item.
Let say we have 5 variants items like below.
| Variant 1 |
Variant 2 |
Variant 3 |
Variant 4 |
| Variant 5 |
|
|
|
In the above example let say the fifth one having the border. So in that case if we remove it via border-right: 0px; then the last one will show the empty border on the right side.
That say, the best solution is to target the last item to have the border not to remove it.
Here is the code that you can use to achieve 1px border constantly for each of the Variant option.
/* css Starts from here */
/* put this css in the end of styles.css file. */
.variant-option__button-label {
border-right: 0px;
border-bottom: 0px;
}
.variant-option:nth-child(4n) .variant-option__button-label {
border-right: 1px solid #ccc;
}
.variant-option:nth-last-child(-n+4) .variant-option__button-label {
border-bottom: 1px solid #ccc;
}
The above will works accordingly.
Hey,
Thanks for this suggestion, I applied it with a few adjustments, and it mostly worked:
/* 1. Reset all button borders */
.variant-option__button-label {
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 1px solid #ccc !important;
border-top: 1px solid #ccc !important;
box-sizing: border-box !important;
}
/* 2. Add right border to every 4th button */
.variant-option__button-label:nth-of-type(4n) {
border-right: 1px solid #ccc !important;
}
/* 3. Add bottom border to last row (assuming 4 columns per row) */
.variant-option__button-label:nth-last-of-type(-n+4) {
border-bottom: 1px solid #ccc !important;
}
/* 4. Add right border to the last button in the grid */
.variant-option__button-label:last-of-type {
border-right: 1px solid #ccc !important;
}
It fixed the 2 px border issue and aligns the grid nicely.
The only problem I’m still seeing is that the last box in the grid has a top border that doesn’t perfectly connect to the boxes above there’s a tiny gap. Could you advise how to fix this so the top border of the last box lines up perfectly with the row above?
Thanks so much for your help!
Link: RUNWAY
I am happy that it’s work for you. For the remaining one issue seems to be a tiny issue but as the scope of the functionality we added it’s not looking possibility to align the border from the right side. As we apply the border on the right for the end one variant item.
what should i do to fix this?
There is no other way left to fix it. As this minor issue cannot be resolved.
Whether you need to revert the double border logic again or you can leave it as now.
