I made something for my profile on CB and I for the life of me cannot figure out how to make it work!
It’s a png and I’ve used like 6 different websites to convert it into html but idk what to do now….

Please help…

Ashfulravens@gmail.com

It is absolutely horrible to try to work with the extremely limited HTML and CSS on CB, not to mention the lack of using Javascript in a normal way. It is like an alternate reality or time machine to 20 years ago. I understand why so many profiles are basically just an image loaded from an external site. This is the worst and most challenging piece of crap web dev I have ever experienced. Nothing is natural or normal. What idiot developed this piece of crap?

Does anyone have tips on how to make CB bios more responsive, i.e., for mobile devices. In-line CSS doesn’t work so well, but that’s all we have. I can’t seem to scale all content dynamically, and relative scaling (% width) doesn’t seem to work for images. At least they could provide us with some simple global classes like this:

<style> 
.responsive1 {max-width: 100%; height: auto;}
.responsive2 {max-width: auto; height: 95%;} 
</style>

but I asked and no, they won’t. Any ideas? Almost all CB profiles look like shit on mobile devices.

Also, anyone notice when using the testbed on a phone, we get redirected to m.chaturbate.com? It seems they are stuck in the 1990s in terms of tech.

I’d love to read some tips for working around the platform limitations for mobile.

BTW, I can understand why they don’t allow javascript in the bios (though it would be relatively simple to limit the scope of the jscript to the current DOM. But have no idea why they don’t permit <style> tags. It would be simple to have the parser weed out classes which were defined elsewhere.

Scratch the last post. Found a solution with vw’s . I suggest to everyone to use them for objects and images, because we all want content to scale for phones:

<img align=center src="https://i.imgur.com/uHb0lSt.png?2" style="width:52vw;height:auto; object-fit:cover" border="0">

This a sufficient way to do what I needed, if not ideal. Would be better to have real style defs and classes, but this will do.

Mobile Site Design for Chaturbate: Two months ago I finished my responsive design project for Chaturbate, and I wanted to share some info that I learned. I posted this on another forum – https://www.ambercutie.com/forums/threads/chaturbate-profile-help.23825/page-12, but I though I would repost here. I really sweated this project, so I hope others can profit from my efforts.

I recently made a CB profile for a friend in Colombia. She asked me to (1) make the page look good on mobile devices, and (2) improve SEO by using real text, and not text in pictures. Most of the methods suggested here do the latter, but it is pretty easy to have responsive CB pages that include text as text, and to make the text as scalable as the images, while maintaining the relative layout positions of both. Here is my friend’s page: https://chaturbate.com/alejadollts/

You’ll note the page is about as responsive as you can get for the html embedded in the CB platform; narrow your browser window as thin as it goes, and the page continues to look good. View it on an old low-resolution android phone and it looks fine too.

You can download the source to see how this was done. But if anyone wants to have responsive pages, let me give some guiding principles.

• Never use absolute measures like points, cm, and so on. And do not uses px either; since the advent of retina displays, pixels have lost their relevance as a measure of distance. Rather, use measure like vw and vh (and if necessary, em). A width of 90vw is 90% of the viewport width, and it refers to the width of the browser window rather than some div container inside (same for height/vh, though you will use this rarely). It is way preferable to use viewport measures rather than percentages, because no matter what chaturbate does with the container for your bio, you can be more certain that the text and images will be visible and proportionate w.r.t each other.
• In addition to relative measures like vw, you should always specify a minimum width in absolute terms, below which the object cannot be squished. Otherwise, especially on the iPhone, your content will be reduced to oblivion.
• For images, always specify both the width and the height explicity, because many phones are terrible at scaling images automatically while retaining aspect ration.

Here is an example of some of these techniques, which is not contained in her current profile, but
was previously.

<ul style="display:block;
       list-style-type:none;
       position:relative;
       margin-left:auto;
       margin-right:auto;
       align:center;
       width:60vw;
       min-width:155pt;
       height:calc(60vw*(520/629));
       min-height:calc(155pt*(520/629));
       padding-top:0;
       background-repeat:no-repeat;
       z-index:1;
       background-image:url(https://i.imgur.com/y7VSkNp.png);
       background-size:60vw calc(60vw*(520/629));>"

This is a block-level container with an image, inside of which we put some text. Most of the attributes are straightforward, but I’ll point out a few. For example, the width, min-width, height and min-height. Note that the width is specified in a relative measure, whereas the minimum width is absolute. As noted above, the height and min-height properties should be explicitly added in terms of the image’s proportions. This image is 629 x 520, so the height is always scaled by the ratio of the two.

While all this may seem like a pain, you can actually use this code above as a template for most situations like this, where you want to overlay text on an image. Here is a corresponding
element.

      <li style="z-index:3;      <!-- must be greater background img  for bio -->
         position:absolute;      <!-- absolute w.r.t. background            -->
         top:20%;                    <!-- will require experimentation - y-axis pos      -->
         right:2vw;                  <!-- likewise - x-axis pos          -->
         display:inline-block;  <! -- important, <ul> substitutes the <div>, with the exact same results ->
         font-family:Brush Script MT;  <!-- Nice browser font for cursive style  -->
         font-size: 2.2vw;
         font-style:normal;
         color: white;
         line-height: 2.3vw;
         text-align:left;">My text here More text</li>1

In inline contexts (and almost everywhere else), chaturbate converts linefeeds to <br> elements. It is a pain, but it is what it is.

As for scaling the fonts, here is an example:

<p style="display:block;margin-left:auto;margin-right:auto;width:60vw;
       min-width:100pt;height:auto;font-family: Arial, Helvetica, sans-serif; 
       font-size: calc(2.3vw + 4pt); font-style:normal; text-align:center;  color: #ffffff; 
       line-height: calc(2.7vw + 5pt);">I want to introduce myself a bit.  I'm a Latina.....</p>

Again, you’ll note that the font size and line-height are combinations of relative and absolute measure. This is to prevent the text from getting unreadable on small displays. Hence the text will scale more slowly w.r.t. the containing image, which is exactly what you want in responsive design.

Also, the formula of 2.3vw + 4pt, while a bit arbitrary, means the relative width will dominate the minimum of 4pt, until it doesn’t. This actually a nice style for text in a CB profile, so you may want to use it or something like it.

I provided the info above since it may be useful to others in designing responsive pages with text. Plug the above into a sample HTML document, and then substitute the content with your own image and your own text. You will get the hang of it. The most you will have to do is to change the proportion and height to width, and to adjust the x an y-axes of your text. Good luck!

— Rich