Блог

Главная - Вопросы по программированию - Мобильная версия продолжает поворачиваться с помощью img в горизонтальное положение?

Мобильная версия продолжает поворачиваться с помощью img в горизонтальное положение?

#html #css #angular #angular9

#HTML #css #angular #angular9

Вопрос:

У меня есть веб-сайт со шрифтовым завершением, работающий на Angular 9. Существует вертикальное изображение, которое в некоторых мобильных браузерах (FireFox, Edge) может измениться в горизонтальное положение. Почему это происходит и как я могу это исправить? Я уже пытался подключить свой компьютер к мобильному браузеру, но для этого мне приходится использовать другой браузер (FireFox Nightly). Веб-сайт: anthonyrodriguez.me . —Нажмите о веб-сайте. Вот css и html

 .aboutCom{
    height: 100%;
    width: 100%;
    background-color: #1b242f;
    display: block;
    padding-top: 20px;
}

.portPic {
    width: 45%;
    height: auto;
    display: inline-block;
    vertical-align: top;
    padding-bottom: 10px;
    background-position: initial;

}

img{
    margin-top: 20px;
    max-height: 500px;
    max-width: 500px;
    border-radius: 3%;
    box-shadow: 5px 6px black;
}

.aboutDesc{
     padding-top: 10px;
     padding-left: 3%;
     text-align: left;
     width: 500px;
     height: auto;
     background-color: #0bc4cd;
     display: inline-block;
     padding-bottom: 20px;
     box-shadow: 0px 0px 62px 2px aqua;

}

.aboutDesc p{
    margin-top: 21px;
    font-family: 'Share Tech';
    font-size: 26px

}

.aboutDesc h2{
    margin-left: 5px;
    font-family: 'Share Tech';
    font-size: 28px;
}


@media screen and (min-width: 870px) and (max-width: 950px){
    .portPic{
        width: 40%;
    }
}
@media screen and (min-width: 825px) and (max-width: 869px){
     .portPic{
        width: 35%;
     }
}

@media screen and (min-width: 100px) and (max-width: 824px){
    .aboutDesc{
        display: block;
        width: auto;
        text-align: center;
    }
    .aboutCom{
        height: 100%;
    }
    .portPic{
        width: 100%;
    }
    .aboutDesc p{
        padding-right: 3%;
    }

}
@media screen and (min-height: 100px) and (min-height: 600px){
    .aboutCom{
        height: 150%;
    }
}  
 <div class="aboutCom">
<div class="portPic">
    <img src="./assets/images/meC.jpg">
</div>
<div class="aboutDesc">
    <h2>Based in Orange County, California.</h2>
    <p>As a Full Stack Web Developer, I enjoy working with
        effects for UI/UX and discovering new and better solutions
        to challenging problems. Always open to working on existing
        projects or creating them from scratch. If I'm not coding,
        researching different techologies, or spending time on StackOverflow,
        I'm spending time with the Family.
    </p>
</div>