Editing list items margins
Hey there,
A few questions regarding list items on our website homepage https://socialrunner.net, about half way down the page, with orange ticks next to them.
1. On desktop there's so much space on the left and right of each row, is there any way to make them sit closer to each other?
2. On tablet they go to 2 lines of text, is there a way to fix that? Maybe making it wider on tablet?
3. On mobile there is too much space to the left and right, and in between each section (of 4 list items) there is a gap, how can I remove that?
This is the CSS I'm using for the items:
.one-col-special li {
display: inline-block;
width: 95%;
padding: 0;
vertical-align: top;
}
.one-col-special li:before {
content: '✔';
margin: auto;
padding: 5px;
margin-left:5px;
margin-right:auto;
color: orange;
display: inline-block;
}
Thanks in advance!
Comments
1. you can set FULL WIDTH style section if you want them to be closer to the edges.
2. There is not enough space on smaller screens and that's why list goes to a new line. This is a proper behave of course and the only thing you can do is just make this font smaller on smaller screens but it won't look good in our opinion. 3. This is how listing supposed to look like on mobile. But if you want to remove all those margin, you need to use:
.column_column ul, .column_column ol, .column_helper ul, .column_helper ol, .column_visual ul, .column_visual ol, .mfn-acc ul, .mfn-acc ol, .ui-tabs-panel ul, .ui-tabs-panel ol, .the_content_wrapper ul, .the_content_wrapper ol { margin: 0 !important; }