What's the ideal dimensions for a bio desgin?

[Vanessa98xx]

Im looking to better understand how wide I should make my bio design (and what code to display it with) in order for it to appear in a nice way on both desktop and mobile. Im creating my designs at Canva.com and then hosting that image which I then place on my bio. But I guess there is a lot of things I can improve when it comes to making it responsive for different devices etc.

Anyone who has some experience with this?

 

[cbhours]

well for just a simple bio image if you want to avoid horizontal swipe a width of about 600 pixels seems to display on the phones in this household.

 

[Vanessa98xx]

well for just a simple bio image if you want to avoid horizontal swipe a width of about 600 pixels seems to display on the phones in this household.

Thanks And do you use any additional code to make it better responsive?

 

[cbhours]

Thanks And do you use any additional code to make it better responsive?

No, just basic all image bios, @Dan202 would probably know if you can make a bio responsive using html in CB.

 

[Dan N]

@Vanessa98xx / @cbhours

My own opinion and how I work.
- images and block elements (like span, p, i, b, li, ul, ol, h1, h2....) should use % values
- for font (texts) is a bit tricky but I use a formula like so

font-size: calc(15px + 6 * ((100vw - 320px) / 680));

Unfortunately, fully responsive design/layout it's impossible because the need of @media query which is not allowed/supported on Chaturbate

@media only screen and (max-width: 768px)

 

[Dan N]

Im looking to better understand how wide I should make my bio design (and what code to display it with) in order for it to appear in a nice way on both desktop and mobile. Im creating my designs at Canva.com and then hosting that image which I then place on my bio. But I guess there is a lot of things I can improve when it comes to making it responsive for different devices etc.

Anyone who has some experience with this?

If there's only one image you can use this markup snippet

<p style="display:block;width:100%;height:auto;margin:120px auto 50px -146px;text-align:center;"><img src="YOUR-IMAGE-URL-HERE" style="display:block;width:100%;height:auto;margin:0 auto;"/></p>

if you want to make the image clickable, simply add the <a href HTML tag

<a href="YOUR=LINK=HERE"><img src="YOUR-IMAGE-URL-HERE" style="display:block;width:100%;height:auto;margin:0 auto;"/></a>

Optional tip: try to make your canva image around 1000px wide (height doesn't matter much) but keep in mind that small texts on the image will be almost unreadable when the design is viewed on smaller screens . (a downside but acceptable)

 

[Vanessa98xx]

If there's only one image you can use this markup snippet

<p style="display:block;width:100%;height:auto;margin:120px auto 50px -146px;text-align:center;"><img src="YOUR-IMAGE-URL-HERE" style="display:block;width:100%;height:auto;margin:0 auto;"/></p>

if you want to make the image clickable, simply add the <a href HTML tag

<a href="YOUR=LINK=HERE"><img src="YOUR-IMAGE-URL-HERE" style="display:block;width:100%;height:auto;margin:0 auto;"/></a>

Optional tip: try to make your canva image around 1000px wide (height doesn't matter much) but keep in mind that small texts on the image will be almost unreadable when the design is viewed on smaller screens . (a downside but acceptable)

Thank you so much for replying!

I used your code and played around a bit and it looks good on desktop, but on mobile its really difficult to read any text at all. I know you said that a fully responsive design is not possible, but cant I at least define what the width (in %) should be for desktop and then another width for mobile? That would solve a lot of problems for me.

 

[Dan N]

Thank you so much for replying!

I used your code and played around a bit and it looks good on desktop, but on mobile its really difficult to read any text at all. I know you said that a fully responsive design is not possible, but cant I at least define what the width (in %) should be for desktop and then another width for mobile? That would solve a lot of problems for me.

to add multiple css attributes to the same block and shrink/enlarge based on viewer's screen size on Chaturbate it's not possible because external css or additional stylesheet is not allowed. Here's a few things you should know https://www.w3schools.com/css/css_rwd_mediaqueries.asp

@media only screen and (max-width: 600px)

@media is not allowed <style> </style> is stripped off so there's no way to make the browser understand when and how to display elements if that information (css) is not defined.