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.
Jan 22, 2023
10
1
8
1
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
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...
Mar 5, 2018
32
15
51
And if someone knows how to force the display of the mobile version on pc, I'm interested too...
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
Mar 5, 2018
32
15
51
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! 😊
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
Jan 22, 2023
10
1
8
1
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
Jan 22, 2023
10
1
8
1
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!
 
Upvote 0
Solution
Mar 5, 2018
32
15
51
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
Jan 22, 2023
10
1
8
1
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
Mar 5, 2018
32
15
51
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 !
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
Jan 22, 2023
10
1
8
1
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
Mar 5, 2018
32
15
51
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...
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
Jan 22, 2023
10
1
8
1
pointer hovering actions: cursor: url(image-url)
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
Dec 2, 2019
8
0
46
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!
 
Upvote 0