User:AngelinaBelle/smfcurve.css: Difference between revisions From Online Manual

Jump to: navigation, search
No edit summary
No edit summary
 
(34 intermediate revisions by the same user not shown)
Line 1: Line 1:
div.Columnar
/* narrow-first (mobile first) design starts 1 to a row, then increases to 2 and then a max of 3 */
{
    .bol {
     background-color: fuschia;
            margin-top: 2em;
            float:left;
            width 100%;
            box-sizing: border-box;
          }
     .bol .title {font-weight: bold;}
@media all and (min-width: 28.7em){
    .bol {width: 50%}
}
}
/* Stripped list
@media all and (min-width: 40.5 em){
    this is a stripped-down list with no bullets, no image-bullets, no margins, and no padding.
    .bol {width: 33.3333333%;}
    it is ready for further styling */
 
UL.Stripped
{
list-style: none;
margin: 0px;
        padding: 0px;
}
UL.Stripped li
{
list-style: none;
margin-left: 0px;
}
/* Horizontal lists
    HorizontalBars -- a horizontal, inline list with each item separated by bars (border-left, except on first item)
    Horizontal3 -- a horizontal list, no separators, each item 33%  of the available width, 1% margin. Block, float-left is used.
*/
ul.HorizontalBars, ul.Horizontal3
{
width:100%;
margin: 0%;
text-align: left;
}
ul.HorizontalBars li, ul.Horizontal3 li
{
display: inline;
border-left: 1px solid;
padding: 0%;
margin: 0%;
margin-left: 1%
}
ul.HorizontalBars:first-child
{
border-left: none;
}
ul.Horizontal3
{
    width: 100%;
    text-align: left;
    border: 1px solid orange;
}
ul.Horizontal3 li
{
      width: 32%;
      margin-left: 1%;
      display: block;
      float: left;
}
div.Columns
{
    color: fuschia;
}
}

Latest revision as of 13:47, 11 April 2014

/* narrow-first (mobile first) design starts 1 to a row, then increases to 2 and then a max of 3 */
    .bol { 
             margin-top: 2em;
             float:left; 
             width 100%; 
             box-sizing: border-box;
           }
    .bol .title {font-weight: bold;}
@media all and (min-width: 28.7em){
    .bol {width: 50%}
}
@media all and (min-width: 40.5 em){
    .bol {width: 33.3333333%;}
}
Retrieved from "https://wiki.simplemachines.org/w/index.php?title=User:AngelinaBelle/smfcurve.css&oldid=23827"


Advertisement: