On pc devices, this looks normal. but when viewed from this mobile device everything looks messy and can't be scrolled, one of which is the top and bottom parts are cut off. can anyone help me? I don't really understand about web development

here is my github repo: https://github.com/beruangs/justjeje

CodePudding user response：

your issue is simple , remove position fixed for center aligned box ('.content') , and make it position absolute , if you need it only for mobile , then change it in mobile.in order to center align ('.content') box using absolute use code below

.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

CodePudding user response：

please add my css code with .content class and scroll vissible easily.

1.

  .content {
    background-color: rgb(24, 39, 74);
    border-radius: 20px;
    box-shadow: 0px 100px 80px rgb(0 0 0 / 22%), 0px 41.7776px 33.4221px rgb(0 0 0 / 16%), 0px 22.3363px 17.869px rgb(0 0 0 / 13%), 0px 12.5216px 10.0172px rgb(0 0 0 / 11%), 0px 6.6501px 5.32008px rgb(0 0 0 / 9%), 0px 2.76726px 2.21381px rgb(0 0 0 / 6%);
    box-sizing: border-box;
    left: 50%;
    padding: 2em 4em;
    position: absolute;
    text-align: center;
    top: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translate(-50%, -50%);}

2. .linktr{overflow-y: auto; overflow-x: hidden;}