I’m having trouble with
creating consistent line-weights around containers, lines and shapes.
Working in
Wix studio
(https://digitalmadriver.wixstudio.com/my-site-5?rc=test-site)
What we are doing
We are creating a site that is heavily grid-based, with a lot of line-work.
Unfortuantely Wix Studio seems to create lines that vary in weight, dispite all being set to 1px in the editor.
We’ve tried some CSS code, but this has no effect – or we aren’t doing it correctly.
Can anyone suggest a fix? Or some bulletproof CSS that might help us?
V-Blog
2
It might be possible that the borders of the boxes are overlapping, causing this issue. Try excluding borders by surgically adding them in CSS.
Like, define the borders in the CSS root first
:root {
/* 1-side borders */
--border-top: 1px solid #000;
--border-right: 1px solid #000;
--border-bottom: 1px solid #000;
--border-left: 1px solid #000;
/* 2-side borders (adjacent) */
--border-top-right: 1px solid #000;
--border-bottom-right: 1px solid #000;
--border-bottom-left: 1px solid #000;
--border-top-left: 1px solid #000;
/* 2-side borders (opposite) */
--border-top-bottom: 1px solid #000;
--border-left-right: 1px solid #000;
/* 3-side borders */
--border-top-right-bottom: 1px solid #000;
--border-right-bottom-left: 1px solid #000;
--border-bottom-left-top: 1px solid #000;
--border-left-top-right: 1px solid #000;
/* 4-side border */
--border-all: 1px solid #000;
}
Then reuse them in Boxes, excluding the side that is already covered in another box. Like
.box-top {
border-top: var(--border-top);
}
.box-top-right {
border-top: var(--border-top-right);
border-right: var(--border-top-right);
}
.box-all {
border: var(--border-all);
}
It’s just an idea, I do not know if it will work.
1 Like
yes, the double border. basically the outer border is 1px and then the cells/containers also have a 1px border, so this becomes 2px. A way to work around this is to set a margin of 1px to the main outer container and set the background color to suit border colour. So basically borders will all look like 2px.
havnt tried with CSS, but should be possible with custom classes to restrict a container to not show specific borders
