Hi,
I changed the columns padding from the default 10px. In order to align the content with the container’s left and right sides I need to edit the Columns Row’s negative margin accordingly.
The new negative margins are saved (I can see it with the web inspector) but do not overwrite the default values give by the selector .w-container .w-row
Am I the only one having this issue? How can I fix it?
Thank you,
Eliott.
Hi @eliott
The columns and it’s grid system is built out based on Bootstrap 3.0. so this is expected.
What you can do instead is use CSS Grid to achieve the column layout you are looking for.
Let me know if that works!
Why not? It really seems obvious to me it should be working. It has nothing to do with Bootstrap 3.0 as you do it by default. It is only an override issue because if I simply remove the default styles it works as expected. Please see the two screenshots. The only difference is that I unselected the default margins on .w-container .w-row
On the second screenshot, the text on the left is align with the one above and the pictures on the right are aligned with the (gold) container.
This is due to constraints of the container.
It has nothing to do with Bootstrap 3.0 as you do it by default
This is based off bootstrap 3.0 which is why it behaves as it does. See this comment: Row has negative margins
As another workaround, you can use a div block with a width of 940px (or anything you’d like) instead of the container to get around this.
I know, I understand how it works and I keep the negative margin. But it need to adjust it width the padding to align.
By default Columns (Row) have an horizontal margin of -10px BECAUSE the columns inside have a padding of 10px.
If the padding is set to 24px, the parent should have the horizontal margin of -24px.
IT IS WORKING. Please fix the overwrite issue. It is as simple as that
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
