'my site looks fine on the developing screen but zoomed in on other screens even if they are the same size of mine?

  • I am developing the front-end o a website using vue.js version 2 and bootstrap-vue (bootstrap v-4.5).
  • Its responsive and works fine on mobile but on laptops and other screens it looks like it's been zoomed in by 125% and the width of the viewport becomes about 1536px.
  • I handled it using media query and made the breakpoint is 1536 but this disabled the query for mobile devices of width 768px.
  • Also I noticed that google chrome takes the zoom value in the windows settings and I tried to open the website from a co-worker device which have the same screen size as mine but in his windows settings the zoom value is 125%, so the site looks zoomed in while the browser zoom in value is 100%. I am not sure if this is the problem but if it is is there a way I can make the browser ignore the windows settings?
  • Is there a better solution to handle this other than using media query ?
  • here is an image of the website on my developing screen
  • https://drive.google.com/file/d/1olgtPOgOlnirqdZ3WojL56taxt0tPBb7/view?usp=sharing
  • and an image of the website on other screens
  • https://drive.google.com/file/d/1il5UrggMck-KUvjT2IFCGM1mHT1w4MvX/view?usp=sharing

here is my index.html file

    <!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
    <base href="/" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <title>TAS</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  </body>
</html>

and here is the code for the login page which i provied its screenshots above

<template>
    <div class="login-page">
        <div class="row">

            <div class="col-sm-6 left px-0">
                <div v-if="smallScreen" class="bg-blue container d-flex justify-content-center align-items-center border-bottom">
                    <img class="skepLogo" src="../../../assets/dashboard-layout/tas-logo.png" alt="">
                    <h1 class="tas">TAS</h1>
                </div>

                <img v-else class="login-img" src="@/assets/login page/login-image.png" alt="">
            </div>

            <hr>

            <div class="col-sm-6 right">
                <div class="content">
                    <h4 class="text-center">Welcome Back! 👋</h4>
                    <p class="text-center">Please Login to your Account.</p>

                    <form class="loginForm" @submit.prevent="submit">
                        <div class="form-group">
                            <label class="email-label" for="exampleInputEmail1">Email</label>
                            <input 
                                type="email" 
                                v-model.trim="$v.email.$model"
                                :class="{'is-invalid': validationStatus($v.email)}"
                                class="form-control" 
                                id="exampleInputEmail1" 
                                aria-describedby="emailHelp" 
                                placeholder="Enter Your Email"
                            >
                            <div v-if="!$v.email.required" class="invalid-feedback">Email is required</div>
                            <div v-if="!$v.email.email" class="invalid-feedback">Email is invalid</div>
                        </div>
                        <div class="form-group">
                            <div class="d-flex justify-content-between">
                                <label class="password-label" for="exampleInputPassword1">Password</label>
                                <a href="" class="forgotPass">Forgot Password?</a>
                            </div>
                            <input 
                                type="password"
                                v-model.trim="$v.password.$model"
                                :class="{'is-invalid': validationStatus($v.password)}"
                                class="form-control" 
                                id="exampleInputPassword1" 
                                placeholder="Enter Password"
                            >
                            <div v-if="!$v.password.required" class="invalid-feedback">Password is required</div>
                            <div v-if="!$v.password.minLength" class="invalid-feedback">Password min length is 6 characters</div>
                            <div v-if="!$v.password.maxLength" class="invalid-feedback">Password max length is 18 characters</div>
                        </div>
                        <div class="form-group form-check">
                            <input type="checkbox" class="form-check-input" id="exampleCheck1">
                            <label class="form-check-label" for="exampleCheck1">Remember me</label>
                        </div>
                        <button type="submit" class="btn btn-primary d-block w-100 signInBtn">Sign in</button>
                    </form>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { required, email, minLength, maxLength } from 'vuelidate/lib/validators'
import { mapGetters } from 'vuex'

export default {
    name: "Login",
    data() {
        return {
            smallScreen: false,
            width: window.innerWidth, 
            height: window.innerHeight,
            email: '',
            password: '',
        }
    },

    validations: {
        email: {required, email},
        password: {required, minLength: minLength(6), maxLength: maxLength(18)}
    },

    methods: {
        onResize(e) {
            this.width = window.innerWidth;
            this.height = window.innerHeight;

            if(window.innerWidth<=760) {
                this.smallScreen = true
            }
            else {
                this.smallScreen = false
            }
        },

        validationStatus: function(validation) {
            return typeof validation != "undefined" ? validation.$error : false;
        },

        submit() {
            this.$v.$touch();
            if(this.$v.$pending || this.$v.$error) return;
            const user = {email: this.email, password: this.password}
            this.$store.dispatch('users/loginAction', {
                user
            })
        },

    },

    computed: {
        // users() {
        //     return this.$store.state.users.users
        // }
    },

    created() {
        window.addEventListener("resize", this.onResize);
    },
    destroyed() {
        window.removeEventListener("resize", this.onResize);
    },
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');

.login-page {
    height: 100vh;
    margin: 0;
    overflow: hidden;
    background-color: #f8f9fd;
    position: relative;
    font-family: 'Inter', sans-serif;
}

.row {
    height: 100%;
    margin: 0;
}

/* left section styles */
.left {
    color: #fff;
}

.login-img {
    width: 554px;
    height: 522.42px;
    margin: 6rem 5rem;
}

/* vertical separator line style */
hr {
    border: 1px solid rgba(216, 216, 216, 0.4);
    transform: rotate(90deg);
    position: absolute;
    width: 687px;
    height: 0px;
    left: 500px;
    top: 50%;
}

/* right section styles */
.content {
    margin: 25% auto;
    width: 800px;
    color: #464E5F;
}

.content p {
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
}

.content h4 {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
}

/* form styles */
.loginForm {
    margin: 2.75rem 10rem 0rem 10rem;
}

.form-control {
    background-color: #f9fafd;
}

.form-check-label {
    color: #FD6972;
    border: #FD6972;
}

.forgotPass {
    color: #FD6972;
}

::placeholder {
    color: #57696B;
    opacity: 0.4;
}

.email-label,
.password-label {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
}

.signInBtn {
    background-color: #394D9B;
    border-radius: 25px;
    height: 46px;
    border: none;
    filter: drop-shadow(0px 7px 9px rgba(0, 0, 0, 0.161));
}

/* input[type=checkbox] {
  accent-color: FD6972;
} */

.signInBtn:hover {
    background-color: #fff;
    color: #394D9B;
    border: 2px solid #394D9B;
}

.bg-blue {
    background-color: #394d9bdb;
}

@media screen and (max-width: 768px) and (max-width: 820px) and (max-width: 950px) {
    .row {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .loginForm {
        margin: 0px;
    }

    .content {
        margin: 25% auto;
        width: 400px;
        color: #464E5F;
    }

    hr {
        display: none;
    }

    .login-img {
        display: none;
    }
}

@media screen and (max-width: 1473px) and (max-width: 1728px) and (max-width: 1500px) and (max-width: 1600px) {
    .login-img {
        width: 454px;
        height: 422.42px;
        margin: 5rem 4rem;
    }

    hr {
        display: none;
    }
}

/* @media screen and (max-width: 950px){
    .login-img {
        width: 174px;
        height: 142.42px;
        margin: 6rem 5rem;
    }

    .content {
        margin: 25% auto;
        width: 508px;
        color: #464E5F;
    }
} */

</style>

please let me know if you want me to provide you with anymore code or whatever resources that will help you to guide me to solve my problem

htmlcssvue.jsbootstrap-4bootstrap-vue


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions