Accessible Styles

/* This first section basically 'resets' rows. It tells the browser that any floating divs have no business floating to either side of the rows, and they should be cleared on all sides. */ .row { clear: both; margin-bottom: 2rem; } .row_end { clear:both; } /* This simply adds margins to the .rows div, which is the layer that wraps around ALL of the content on the profile. If you have margin or padding issues with the rest of your style, setting the .rows margin to margin:0; can potentially fix things. */ .rows { margin: 0 40px; } /* This resets the padding and margins on the .widgets divs, which are the individual widgets you place inside columns. It also ensures that the list-style-type is not going to show any circles or discs! */ ul.widgets { list-style-type: none; padding: 0; margin: 0; } /* Now here's part of the juicy columns code we all want! This code sets the float for every column and adds some padding. It's what allows columns to be displayed side-by-side instead of stacked. col-12 is missing because col-12 is a full width column, meaning it never gets put side by side with any other columns. */ .col-11,.col-10,.col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3,.col-2,.col-1 { float: left; padding-right: 15px; padding-left: 15px; box-sizing: border-box; } /* This section formats the first and last divs found inside the .row-interior class to help avoid padding issues on the left and right side of a row. Nothing too fancy. :) */ .row-interior > div:first-child { padding-left: 0; } .row-interior > div:last-child { padding-right: 0; } /* THIS IS THE COLUMN MAGIC! As mentioned before, .col-12 is the full wdith column. It needs no flex and just be full width. When we go one step smaller (so one click smaller on the profile editor) the column will be .col-11. One step smaller is .col-10 and so forth. With each step smaller the flex and width are adjusted to make the columns shrink in width and fit next to other columns. }) */ .col-1 { flex: 0 0 8.3333333333%; width: 8.3333333333%; } .col-2 { flex: 0 0 16.6666666666%; width: 16.6666666666%; } .col-3 { flex: 0 0 24.9999999999%; width: 24.9999999999%; } .col-4 { flex: 0 0 33.3333333332%; width: 33.3333333332%; } .col-5 { flex: 0 0 41.6666666665%; width: 41.6666666665%; } .col-6 { flex: 0 0 49.9999999998%; width: 49.9999999998%; } .col-7 { flex: 0 0 58.3333333331%; width: 58.3333333331%; } .col-8 { flex: 0 0 66.6666666664%; width: 66.6666666664%; } .col-9 { flex: 0 0 74.9999999997%; width: 74.9999999997%; } .col-10 { flex: 0 0 83.333333333%; width: 83.333333333%; } .col-11 { flex: 0 0 91.6666666663%; width: 91.6666666663%; } .col-12 { width: 100%; }