my CSS styles not working properly in Mozilla Firefox

Question

my CSS styles are working perfectly in Chrome but i don't know why some of them not working properly in other browsers like Mozilla Firefox. here is my code:

<div id="M-Pic" class="container-fluid">
    <div class="M-Picture">
        <div class="cover-photo">
            <div class="non-profile">
                <img src="Content/images/logo.png">
            </div>
            <a data-toggle="modal" data-target="#MyModal"><img src="Content/images/MPic.jpg"
                                                                                  class="profile"></a>
        </div>
        <div class="profile-name">my name</div>
        <p class="about">some text here<br>some other text here</p>
        <button class="msg-btn" onclick="location.href='#Comment'">comments</button>
        <button onclick="location.href='somewhere'" class="follow-btn">button 2
        </button>
        <div>
            <a href="#"><i class="fab fa-linkedin"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-github"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
        </div>
    </div>
</div>

styles:

#M-Pic {
    background: #28223f;
    min-height: 63vh;
}

.M-Picture {
    user-select: none;
    margin: 15px auto;
    color: #b3b8cd;
    width: 380px;
    background: #231e39;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.75);
}

.cover-photo {
    background: #a8c6de;
    height: 130px;
    width: 100%;
    border-radius: 5px 5px 0 0;
}

.non-profile {
    height: 130px;
    width: 100%;
}

.non-profile img {
    height: 160px;
    width: 175px;
    margin: auto 50px;
    display: flex;
}

.profile {
    height: 140px;
    width: 105px;
    border-radius: 50%;
    border: 1px solid #1f1a32;
    padding: 7px;
    background: #292343;
    margin: -70px 0 0 -203px;
    transition: .4s ease-in-out;
}

.profile-name {
    font-size: 25px;
    font-weight: bold;
    margin: 25px 0 0 100px;
}

.about {
    margin-top: 35px;
    line-height: 25px;
    font-size: 1.7rem;
}

#M-Pic button {
    margin: 15px 10px 30px;
}

.msg-btn, .follow-btn {
    border-radius: 3px;
    cursor: pointer;
    background: #a8c6de;
    color: #231e39;
    border: 1px solid var(--our-blue-color);
    padding: 10px 25px;
}

.follow-btn {
    transition: .5s;
    background: transparent;
    color: #a8c6de;
}

#Matin-Pic i {
    font-size: 20px;
    padding-left: 20px;
    margin-bottom: 20px;
    transition: .5s;
    cursor: pointer;
    color: #a8c6de;
}

the problem is in showing MPic.jpg or the element which has class="profile". is there a way to give different margin values to this element in Mozilla Firefox cos the position of this element is not where i want and totally it's not where it has to be in this browser. everything is ok in Google Chrome. does anybody know how to fix this?

my CSS styles not working properly in Mozilla Firefox

0 Answers0