elhanan
elhanan
PostsComments
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
mm, I tried my best to play with the clamp after checking out Kevin's tutorial, and still not satisfied with the result, it is affecting the size of the divs in an uncontrollable manner.
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
Ok thank you so much I will check it out, I saw Kevin's tutorial on that, but forgot to revist. I am using em's for padding, margins as you said.
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
@Josoo Now after I removed the font-size from the body as I said before, the font of the application on high resolution looks different and smaller
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
i am working on real project and shared from that and since it's sveltekit application I need to share you the whole source code to reproduce it
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
It's really not very good looking I have tried that 🤭
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
How can I make font-size a responsive since I am testing on different resolution it could so important for me to understand that
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
Font size is the thing that messing the UI, I didn't think it had such an impact on the UI and broke things. I started using rem units after I watched the REM/EM Kevins tutorial, but in my case, I applied the default font size on the body and again applied the same font size to elements, that is what made a problem.
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
No description
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
No description
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
@b1mind @Josoo This is what I have applied to the login page that I have shared the screenshot with you guys. 
  main {
        background-image: url("/img/bg.svg");
        background-size: cover;
        min-height: 100vh;
        background-position: center;
        display: flex;
        justify-content: center;
    }
    h3 {
        color: #6a81ed;
        font-family: var(--ff-heading);
        letter-spacing: 2px;
    }
    .login {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 25px;
        box-shadow: rgba(0, 0, 0, 0.1) 0 10px 50px;
        padding: 2em;
        height: max-content;
        margin-top: 10em;
        flex-basis: 15%;
    }

    .login_form {
        row-gap: 1.5em;
        flex-direction: column;
        margin-top: 1.5em;
    }
    .login_form label {
        text-align: right;
        font-size: var(--fs-normal);
    }
   .login_form input[type='submit']{
        width: 80%;
        align-self: center;
    }
    .login_form input::placeholder {
        font-family: var(--ff-heading);
        font-size: var(--fs-plchldr);
        line-height: 1.2;
        letter-spacing: 2px;
        color: var(--clr-white);
    }
    .login_input {
        flex-direction: column;
    }
  main {
        background-image: url("/img/bg.svg");
        background-size: cover;
        min-height: 100vh;
        background-position: center;
        display: flex;
        justify-content: center;
    }
    h3 {
        color: #6a81ed;
        font-family: var(--ff-heading);
        letter-spacing: 2px;
    }
    .login {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 25px;
        box-shadow: rgba(0, 0, 0, 0.1) 0 10px 50px;
        padding: 2em;
        height: max-content;
        margin-top: 10em;
        flex-basis: 15%;
    }

    .login_form {
        row-gap: 1.5em;
        flex-direction: column;
        margin-top: 1.5em;
    }
    .login_form label {
        text-align: right;
        font-size: var(--fs-normal);
    }
   .login_form input[type='submit']{
        width: 80%;
        align-self: center;
    }
    .login_form input::placeholder {
        font-family: var(--ff-heading);
        font-size: var(--fs-plchldr);
        line-height: 1.2;
        letter-spacing: 2px;
        color: var(--clr-white);
    }
    .login_input {
        flex-direction: column;
    }
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
ok I try my best figuring out with suggestion you have gave me, I already suggested a youtube video suggestion for kevin if he can discuss this issue on his tutorial. https://discord.com/channels/436251713830125568/1113603750540623872/1113603750540623872
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
This is the simplest css applied to it but the difference is huge
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
No description
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
No description
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
no i just opened the application on dell monitor and i was frustrated when everything scaled up 😄
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
I don't think you got me, let say I opened my web application on same screen size 15.4" but different resolution (number of pixels) , in such case I don't deal with screen size since they are equal, but since on of the laptop have dense pixel it shows can show multiple components from the web application, but the other laptop with low resolution only show some part of the web UI. So is still using media query is a way to go in such situation? I actually am using media query to deal with tab mobile phone and large screen, but that's not causing this issue
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
I am having a problem with screen resolution not screen size
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
media queries are for screen size instead of resolution right?
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
is there any other tweak like checking for screen resolution and zoom in zoom out or scaling thing to body?
56 replies
KPCKevin Powell - Community
Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
No description
56 replies