Chaturbate Bio Design

Editor Optimized

• The editor uses filters that have the function of identifying and reading markup content. For proper operation and editing efficiency, the entire design is embedded in a single HTML tag.
  We recommend <ul> HTML tag because natively it can include other HTML tags like <p>, <i>, <a href, <span>, <b>, <br>, <font>, <h1>...<h6>, <img src=
• For a design as "responsive" as possible we use values ​​expressed in % for block elements (including images) and formula font-size: calc(13px + 3 * ((100vw - 320px) / 680)); for size of the font.
  Another option for font size is vw viewport = browser window size. If the screen has a width of 50cm, 1vw = 0,5cm
• Better positioning. Only on main parent HTML tag <ul> we recommend the use of margin with specific values
  margin:120px auto 50px -146px
  Example:
  

  <ul style="display:block;width;100%;height:auto;margin:120px auto 50px -146px">

• We do not recommend minified CSS . Use background-color:... for background color and background-image:url(); for background image / full syntax

Avoid

• The editor reads each HTML element in the code and identifies what functions to display for editing. For example it makes the difference between a text element, a link or an image, which is why target="_blank" is used ONLY on links (URLs) should not exist in other HTML elements

---

HTML Elements and CSS Attributes

Most used:

display:block; - can be used with any HTML tag
width:100%;min-width:10%; - the width is expressed in % and not in pixels
height:auto; - height is usually set as auto
box-sizing:border-box; - check this useful demo
list-style:none; - no marker is shown
line-height:normal - Chaturbate is a bit silly in interpreting space and font kernel and turns empty space as br into a paragraph and the space between paragraphs or other block elements is much more awkward, which is why the css line-height attribute defined in the syntax CSS is welcome
float:... - "forces" the HTML tag to be positioned to a certain side (right or left)
clear:... - remove the float position

float:none;clear:left

A few Layout examples

• Demo 1
• Demo 2
• Demo 3
• Demo 4
• Demo 5
• Demo 6

---

Go Back to main open source documentation