Search   
zStudio CMS Help

Expand a div to take the remaining width

Example:

SMALL IS THE NEW BIG  

 right block

 

 

Code:

<div style="width:100%; overflow:hidden;">
<div style="float:left;">
<p>SMALL IS THE NEW BIG  </p>
</div>
<div style="overflow:hidden; border-bottom:3px solid #FF8C50;">
<p>right block</p>
</div>
<div class="Clear"> </div>
</div>

 

 

Position: sticky

 

.sticky{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}


Sources:

http://wd.dizaina.net/scripts/stickyfill/
http://html5-demos.appspot.com/static/css/sticky.html

 

 

 

Underline Header

Example:

 

This is a Page Title

 

CSS:

.UnderlineHeader{

   position:relative;

}

 

.UnderlineHeader::after{

   content:'';

   height:3px;

   width:90px;

   background:#FF0000;

   position:absolute;

   left:calc(50% - 45px);

   bottom:-20px;

 }

 

 

 

Custom bullet points

Examle:

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

 

CSS:

.MainText ul {
  list-style: none;
  margin: 0;
  padding:0;
}

.MainText ul li::before{
  content: "• ";
  color:#CA3383;
  font-size:22px;
  font-weight:bold;
  padding-right:10px;
}

 

 

 

 

 

 

 

 

 

 

 

           

 

 

 

           

 

 

 

| © WebAdelaide Studio |