AmberCutie's Forum
An adult community for cam models and members to discuss all the things!

Making a biography, problem with the mobile version... can you help me?

  • ** WARNING - ACF CONTAINS ADULT CONTENT **
    Only persons aged 18 or over may read or post to the forums, without regard to whether an adult actually owns the registration or parental/guardian permission. AmberCutie's Forum (ACF) is for use by adults only and contains adult content. By continuing to use this site you are confirming that you are at least 18 years of age.
Status
Not open for further replies.
A

a0rock_

Jan 22, 2023
25
1
12
16
Hello !
First of all, sorry if my English seems strange, I use a translator...


For the past few weeks, I've been wading through the joys of html/css to make a biography. I've managed to get a clean and responsive code based on the use of grid and flexbox.



The whole thing displays perfectly on different internet browsers but I have a problem with the mobile version of CB...

the image size is not respected at all ! With a height dimension in % (128% here) it becomes huge, with a pixel dimension (150px) the image is smaller than my flexbox of height : 90px !!! And it does this to me for all the <img> of my bio...

I don't understand it...


Here is a piece of my code:

Code: 
<div style="list-style-type:none;float: left;width: 100vw;">
    <ul style="margin-top: -350px;margin-left: -165px;text-align: center; height: auto; border: none; border-radius: 15px; box-shadow: 0 0 10px #000; background-color:grey; width:calc(100% - -130px)!important">
        <ul style="list-style-type:none;font-size: 17px;font-weight: normal;border-radius: 30px;margin: 0px 0px 0px 0px; list-style: none; box-sizing: border-box; float: none; clear: none; width: 100%; padding: 30em 0px 0px 0px; cursor: url(https://camo.mmcdn.com/0f16a5aefebd13bc7a7f2e4381ada86942c15fd6/68747470733a2f2f692e6962622e636f2f314b646a6a68372f637572736f722e706e67), auto;">
            <ul class="data">
                <!--inmpotant margin-left:-50px; -->
                <span style="margin-left:-50px;--bgcol:transparent;--bordsize : 0px; --bordcol:red; --minflex: 300px;display: flex; background-color: var(--bgcol);border: var(--bordsize) solid var(--bordcol);max-width: 88vw;min-width: var(--minflex);line-height: normal;justify-content : center;align-content:center;flex-flow:row wrap;">
                    <span style="display: flex; flex-direction: row; align-items: center; border: var(--bordsize) solid green;min-width:var(--minflex);max-width:var(--minflex);height:auto;flex-grow: 1;padding: 0 0 2em 0">
                        <li style="list-style-type:none;margin:0 -150px 0 0; padding:0; border: 0px solid ;top: 0;display: grid;row-gap:0em; column-gap: 0em; grid-template-columns:var(--minflex); grid-auto-rows: minmax(1.5em,auto);height:100%;background-color:;position:relative;z-index:1;">
                        </li>
                    </span>
                    <!--social network-->
                    <span style="display: flex; flex-direction: column; --widcolumn:45%; --widline:90px;--shad:25px; --shadcol:rgba(0, 0, 0, 0.20);--heightButton:45px; align-items: center; border: var(--bordsize) solid red; min-width:var(--minflex); max-width: 100%; height: 100%; flex-grow: 2; z-index: 0;">
                        <!--TikTok-->
                        <span style="display: flex; align-items: center; justify-content: center; flex-direction: row; border: var(--bordsize) solid purple; background: #F5C34D; min-width:var(--minflex); width: var(--widcolumn); height: var(--widline); position: relative;box-shadow: inset 0 0 var(--shad) var(--shadcol);margin:0 0 2em 0;">
                            <img src="https://i.ibb.co/nbj6ZfR/275022847-361548449211826-1940821680359614203-n-Photo-Room-png-Photo-Room.png" alt="image" style="position: absolute; z-index: 1; bottom: 0px; right: -25px; height: 150px; -webkit-filter: drop-shadow(0px 0px 5px #000000 ); filter: drop-shadow(0px 0px 5px #000000);">
                        </span>       
                    </span>
                </span>
            </ul>
        </ul>
    </ul>
</div>

And if someone knows how to force the display of the mobile version on pc, I'm interested too...
 
Solution
A
I solved my problem! And a second one hidden behind...

For some obscure reason, the mobile version systematically reduced my images dimensioned in absolute by 50% and refused to take into account the relative dimension. It still does it, but I was able to force it like this:

Code: 
<img src="https://i.ibb.co/nbj6ZfR/275022847-361548449211826-1940821680359614203-n-Photo-Room-png-Photo-Room.png" 
alt="image" style="position: absolute; z-index: 1; bottom: 0px; right: -25px; -webkit-filter: drop-shadow(0px 0px 5px #000000 ); filter: drop-shadow(0px 0px 5px #000000); 
height: 400%; max-height: 115px; max-width:148px; min-height: 115px; min-width:148px;">

It's absurd how overkill it is, but at least it works.

Then I realized that my...
Sort by date Sort by votes
a0rock_ said:
And if someone knows how to force the display of the mobile version on pc, I'm interested too...
Click to expand...
Use Device Simulation in Chrome DevTools for Mobile View

1. Open DevTools by pressing F12.

2. Click on the “Device Toggle Toolbar” (icon turns blue when the device mode is turned on).

3. Choose a device you want to simulate from the iOS and Android devices list (once the desired device is chosen, it displays the mobile view of the website).
 
  • Like
Reactions: a0rock_
Upvote 0
a0rock_ said:
indeed! Thank you! :cool:



I'll see if it helps me to find the solution to my problem. 🤔

but if anyone has an idea it will be welcome! 😊
Click to expand...
CB uses the Viewport meta-tag, so I would suggest that you investigate it as well as CSS Viewport Relative Units:
  • vh (viewport height)
  • vw (viewport width)
  • vmin (viewport minimum)
  • vmax (viewport maximum)
You might also consider posting your question on StackOverflow and tagging it CSS.
 
  • Like
Reactions: a0rock_
Upvote 0
viewport related units, yes, I use them to size the width of the flexbox.

But in this case, the image must have a size relative to the height of the flexbox.

As there is no relative unit of height of a parent element, I use absolute values.

But I don't understand why when rendering on the mobile display, two identical absolute values are different in their displays... :-/
 
Upvote 0
I solved my problem! And a second one hidden behind...

For some obscure reason, the mobile version systematically reduced my images dimensioned in absolute by 50% and refused to take into account the relative dimension. It still does it, but I was able to force it like this:

Code: 
<img src="https://i.ibb.co/nbj6ZfR/275022847-361548449211826-1940821680359614203-n-Photo-Room-png-Photo-Room.png" 
alt="image" style="position: absolute; z-index: 1; bottom: 0px; right: -25px; -webkit-filter: drop-shadow(0px 0px 5px #000000 ); filter: drop-shadow(0px 0px 5px #000000); 
height: 400%; max-height: 115px; max-width:148px; min-height: 115px; min-width:148px;">

It's absurd how overkill it is, but at least it works.

Then I realized that my overflowing images aligned to the left of my flexbox were at "left : 0" ! I had to realign them from the right side...

Thanks for the thinking pointers!

When the biography is officially used by the model, I will come back here to indicate its room so you can see the result!
 
  • Like
Reactions: Yep_Nope_Maybe and Smoothie
Upvote 0
Solution
Nice job. I was rooting for you.

In my opinion, your hands-on experience in tackling the issue will have a greater impact on you, will stick with you longer, and is also more self-satisfying (versus being spoon-fed an answer).
 
Upvote 0
That's exactly right!

Seeing the nonsense generated by cb in the mobile app thanks to the DevTools on pc, was what I needed to understand.

When you see the result I got by myself without asking for help, you'll understand that if I got here, it's because I was really stuck.
the app mobile was the last problem, it left me with a feeling of incompleteness.
now it's really good ! you'll see that soon !
 
Last edited:
  • Like
Reactions: Yep_Nope_Maybe
Upvote 0
a0rock_ said:
That's exactly right!

Seeing the nonsense generated by cb in the mobile app thanks to the DevTools on pc, was what I needed to understand.

When you see the result I got by myself without asking for help, you'll understand that if I got here, it's because I was really stuck.
the app mobile was the last problem, it left me with a feeling of incompleteness.
now it's really good ! you'll see that soon !
Click to expand...
CB auto-redirects devices with a small screen to their mobile-site...

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.chaturbate.com/">

Keep in mind that for an image to be responsive, you should use relative units for the width property (like percentage) rather than absolute units (like pixels).

And, if you want to force your image to have different sizes from one device screen width size to another, then you will need to use media queries with explicit screen width size breakpoints.
 
Upvote 0
except that the media queries are not usable in the bio CB because everything must be coded inline with constraints in the html tags...

this is a shame because I would have liked to integrate small "hoover" actions with the hovering of the pointer...

I would have really preferred to keep the adaptive values for the images, but it is purely and simply incompatible with the mobile version. unless it is possible to make a flexbox overflow with a background... but I did not find that... searched a lot...
 
  • Like
Reactions: Yep_Nope_Maybe
Upvote 0
a0rock_ said:
except that the media queries are not usable in the bio CB because everything must be coded inline with constraints in the html tags...

this is a shame because I would have liked to integrate small "hoover" actions with the hovering of the pointer...

I would have really preferred to keep the adaptive values for the images, but it is purely and simply incompatible with the mobile version. unless it is possible to make a flexbox overflow with a background... but I did not find that... searched a lot...
Click to expand...
Yeah, CB's HTML for bios is rather limited (especially compared with other cam sites with customizable bios, like MFC).

On CB, you can use inline-CSS to achieve some pointer hovering actions: cursor: url(image-url)
 
Last edited:
Upvote 0
Yep_Nope_Maybe said:
pointer hovering actions: cursor: url(image-url)
Click to expand...
cursor (url), it is interesting to modify the cursor itself... 🤓

the idea in my use would have been to modify an "object" when I pass over it.😉

but I don't think I'll go any further for the time being, I like it the way it is. elegance is also about simplicity.😌

But I'm planning to refine my code to make it as practical as possible.😊
 
Upvote 0
You can implement the image as a background image:

HTML: 
<span style="background-image: url(https://i.ibb.co/nbj6ZfR/275022847-361548449211826-1940821680359614203-n-Photo-Room-png-Photo-Room.png); background-repeat: no-repeat; background-position: center; background-size: contain; display: block; position: absolute; z-index: 1; bottom: 0px; right: 0px; -webkit-filter: drop-shadow(0px 0px 5px #000000 ); filter: drop-shadow(0px 0px 5px #000000); width:150px; height: 117px"></span>

Maybe this will help you!
 
  • Like
Reactions: a0rock_
Upvote 0
Hi ! how are you ?

I am trying out another project.

In this scenario, at the center of a large main flexbox (with a minimum width of 300px), there is a small round flexbox (with a fixed size of 300px). Using the transform rotate function, I would like to rotate a third round flexbox (with a fixed size of 50px) around the 300px flexbox.

The trick is that I would like the angle of rotation to be calculated based on the actual width of the main flexbox, to make it responsive. The two flexboxes should be vertical to each other when the main flexbox is at its minimum width, and then the angle should vary with the enlargement of the main flexbox.

I am talking about flexbox for the example, but there may be other ways to achieve this effect. Any ideas? Also, what are the limitations of CB?

(I hope my request is understandable, Chatgpt is helping me with the translation, which is its main function^^')
 
Upvote 0
Status
Not open for further replies.

Similar threads

Sequential
    • Helpful!
  • Locked
  • Question
Easy method for placing a Background Image in your Chaturbate BIO
Replies
4
Views
643
Chaturbate
RainForest
RainForest
angminx
  • Locked
  • Question
BIO coding help??
Replies
0
Views
687
Chaturbate
angminx
angminx
V
  • Locked
  • Question
Three icons next to each other in a row in bio
Replies
1
Views
993
Chaturbate
Dan N
Dan N
Dan N
    • Helpful!
  • Locked
Chaturbate Codes for Bio
Replies
145
Views
66K
General Cam/Creator Chat
Dan N
Dan N
djex_x
    • Like
  • Locked
TUTORIAL EASY STEP FOR "BASIC STRUCTURE" profiles
Replies
19
Views
4K
General Cam/Creator Chat
djex_x
djex_x
Top Bottom
Back