kaninchen
𝓫𝓲𝓻𝓭𝓲𝓮
Hey, me again (I know, goodness gracious trust me) but I need some guidance on an issue I'm facing.
When looking into this issue on the CSS side to translate over to BBcode, I only find solutions for the text at the very bottom being cut and not on the right. My issue is this: everything looks fine (if a little janky) on a computer, but when on mobile the text ends up clipped on the right side, sometimes totally unreadable. This happens on 100% width as well, as I see a lot of people doing scrolls like I've done below. I've used a lot of different widths and it just makes it look really bad on PC and just legible enough on mobile. Padding out the right helps, but then on PC it makes the text uncentered.
So, what can I do to make a foolproof, mobile friendly hidden scroll? I don't know what I'm missing here. I also wonder if the flex has anything to do with it (though I messed with that too and not much happened) but I'm not sure. Code is below.
When looking into this issue on the CSS side to translate over to BBcode, I only find solutions for the text at the very bottom being cut and not on the right. My issue is this: everything looks fine (if a little janky) on a computer, but when on mobile the text ends up clipped on the right side, sometimes totally unreadable. This happens on 100% width as well, as I see a lot of people doing scrolls like I've done below. I've used a lot of different widths and it just makes it look really bad on PC and just legible enough on mobile. Padding out the right helps, but then on PC it makes the text uncentered.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa massa ultricies mi quis hendrerit dolor magna. Gravida neque convallis a cras semper auctor neque vitae tempus. Enim blandit volutpat maecenas volutpat blandit aliquam etiam. Ac tincidunt vitae semper quis lectus nulla. Et leo duis ut diam. Nulla facilisi etiam dignissim diam. Metus aliquam eleifend mi in nulla posuere sollicitudin. Iaculis at erat pellentesque adipiscing. Risus ultricies tristique nulla aliquet enim tortor at auctor urna.
Pellentesque elit eget gravida cum sociis natoque penatibus. A arcu cursus vitae congue mauris. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Egestas maecenas pharetra convallis posuere morbi leo urna. Tempus iaculis urna id volutpat lacus. Id donec ultrices tincidunt arcu non sodales neque sodales. Non enim praesent elementum facilisis leo. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Feugiat sed lectus vestibulum mattis ullamcorper. Amet facilisis magna etiam tempor orci eu lobortis. Amet mauris commodo quis imperdiet massa. Consectetur adipiscing elit pellentesque habitant morbi tristique. Imperdiet massa tincidunt nunc pulvinar. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Lorem donec massa sapien faucibus..
Pellentesque elit eget gravida cum sociis natoque penatibus. A arcu cursus vitae congue mauris. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Egestas maecenas pharetra convallis posuere morbi leo urna. Tempus iaculis urna id volutpat lacus. Id donec ultrices tincidunt arcu non sodales neque sodales. Non enim praesent elementum facilisis leo. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Feugiat sed lectus vestibulum mattis ullamcorper. Amet facilisis magna etiam tempor orci eu lobortis. Amet mauris commodo quis imperdiet massa. Consectetur adipiscing elit pellentesque habitant morbi tristique. Imperdiet massa tincidunt nunc pulvinar. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Lorem donec massa sapien faucibus..
So, what can I do to make a foolproof, mobile friendly hidden scroll? I don't know what I'm missing here. I also wonder if the flex has anything to do with it (though I messed with that too and not much happened) but I'm not sure. Code is below.
[border=0px; padding-top:10px; border-radius:20px; margin:auto; margin-bottom:10px; display:flex; flex-flow:column nowrap; background:aliceblue; -webkit-box-shadow: 10px 14px 0px -2px #BDBDBD; box-shadow: 10px 14px 0px -2px #BDBDBD; max-width:20%; min-width:200px; height:200px;][comment]
*text goes below here
[/comment][border=0px; margin:auto; height:fit-content; width:95%; box-sizing:border-box; flex:1;color:black; line-height:15px; overflow:hidden;][border=0; padding:0; width:120%; height:98%;overflow-y:scroll; overflow-x:hidden; padding-right:35px;][justify][font=Rubik]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa massa ultricies mi quis hendrerit dolor magna. Gravida neque convallis a cras semper auctor neque vitae tempus. Enim blandit volutpat maecenas volutpat blandit aliquam etiam. Ac tincidunt vitae semper quis lectus nulla. Et leo duis ut diam. Nulla facilisi etiam dignissim diam. Metus aliquam eleifend mi in nulla posuere sollicitudin. Iaculis at erat pellentesque adipiscing. Risus ultricies tristique nulla aliquet enim tortor at auctor urna.
Pellentesque elit eget gravida cum sociis natoque penatibus. A arcu cursus vitae congue mauris. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Egestas maecenas pharetra convallis posuere morbi leo urna. Tempus iaculis urna id volutpat lacus. Id donec ultrices tincidunt arcu non sodales neque sodales. Non enim praesent elementum facilisis leo. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Pretium quam vulputate dignissim suspendisse in est ante in nibh. Feugiat sed lectus vestibulum mattis ullamcorper. Amet facilisis magna etiam tempor orci eu lobortis. Amet mauris commodo quis imperdiet massa. Consectetur adipiscing elit pellentesque habitant morbi tristique. Imperdiet massa tincidunt nunc pulvinar. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Lorem donec massa sapien faucibus..[/font][/justify]
[/border][/border][/border]