CODEWITHSUNDEEP
htmlcssflexbox
Wayne
Wayne

Reputation: 293

css - flex for mobile

I have some html and css that looks like the following:

.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>

And it looks great on a desktop:

Desktop image

However on mobile it looks terrible and I have tried various permutations:

Mobile Verion

I am sure it is probable something very silly and simple but I have tried for hours. I am simply looking for a push in the right direction to solve this, I am sure its pretty basic. I also do not want the image to shrink but occupy the entire screen width.

Upvotes: 1

Views: 904

Answers (2)

Amarjit Singh
Amarjit Singh

Reputation: 1192

I have updated pen and also here please check:

.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: 0px 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 {
      width: 100%;
  }
  .media-object .media-body{
    width:100%;
  }
  .media-object .figure {
    max-width: 100%;
    margin:0 auto 15px 0;
    border:none;
  }
}
<div class="media-object">
            <img id="profileImage" class="figure" src="https://www.w3schools.com/w3css/img_lights.jpg" 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>

Upvotes: 1

Nik
Nik

Reputation: 1709

With respect to codepen added by @AmarjitSingh in comments below is the updated answer.

.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;
    width: 100%;
  }
  .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 {
    width: 100%;
  }
  .media-object .media-body {
    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>

Hope this helps.

Upvotes: 1

Related Questions