У меня есть некоторые HTML и CSS, которые выглядят следующим образом:
.media-object {
display: -webkit-flex;
display: -ms-flex;
display: flex;
align-items: flex-start;
}
.media-object .figure {
margin-right: 20px;
flex: 1 0 40%;
max-width: 300px;
border: 5px solid grey;
padding: 3px;
border-radius: 7px;
}
.media-object .media-body {
flex: 1 1 auto;
flex-direction: column;
justify-content: flex-end;
padding: 0px 5px;
}
.media-body-info {
display: flex;
justify-content: space-between;
}
.media-body-info-detail {
width: 60%;
margin: 5px 0;
}
.text-infoProfile {
display: flex;
flex-direction: column;
padding: 5px;
}
.media-object-business {
display: -webkit-flex;
display: -ms-flex;
display: flex;
align-items: flex-start;
width: 100%;
}
.media-object-business .figure-business {
margin: 0 5px;
margin-right: 20px;
flex: 1 0 30%;
max-width: 300px;
border: 5px solid grey;
padding: 3px;
border-radius: 7px;
}
.resetPass {
display: none;
}
@media screen and (max-width: 768px) {
.media-object {
flex-direction: column;
align-items: center;
}
.media-object .figure {
border: 5px solid grey;
padding: 3px;
border-radius: 7px;
}
.media-object-business {
flex-direction: column;
}
.media-object-business .figure-business {
margin: 5px 5px;
border: 5px solid grey;
padding: 3px;
border-radius: 7px;
}
.media-body-info {
flex-direction: column;
width: 100%;
}
}
<div class="media-object">
<img id="profileImage" class="figure" src="" alt="Profile Image">
<div class="media-body">
<div class="media-body-info">
<label for="businessName" id="">Business Name:</label>
<input type="text" id="businessName" class="media-body-info-detail">
</div>
<div class="media-body-info">
<label for=" mob_no" id="">Contact:</label>
<input type="number" id="mob_no" class="media-body-info-detail">
</div>
<div class="media-body-info">
<label for=" email" id="">Email:</label>
<input type="text" id="email" class="media-body-info-detail">
</div>
<div class="media-body-info">
<label for=" website" id="">website:</label>
<input type="text" id="website" class="media-body-info-detail">
</div>
<div class="media-body-info">
<label for=" facebook" id="">facebook:</label>
<input type="text" id="facebook" class="media-body-info-detail">
</div>
<div class="media-body-info">
<label for=" instagram" id="">instagram:</label>
<input type="text" id="instagram" class="media-body-info-detail">
</div>
<div class="media-body-info">
<label for=" linkedin" id="">linkedin:</label>
<input type="text" id="linkedin" class="media-body-info-detail">
</div>
</div>
</div>
И на рабочем столе выглядит отлично:
Однако на мобильном телефонеэто выглядит ужасно, и я пробовал различные варианты:
Я уверен, что это возможно что-то очень глупое и простое, но я пытался часами.Я просто ищу толчок в правильном направлении, чтобы решить эту проблему, я уверен, что он довольно простой.Я также не хочу, чтобы изображение сжималось, но занимало всю ширину экрана.