How to make the page responsive?

Question

I want to make this website mobile responsive. But when I add image with the text it breaks its size. I am trying to keep the image and text side by side. I can't understand what should be the width and height.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="row">
  <div class="col-md-6">
    <div class="box2">
      <img src="http://lorempixel.com/160/140/" align="left">
      <h3>PETER L.MARUZ </h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      <img src="image/f.jpg" width="35" height="30">
      <img src="image/twitter-bird-white-on-blue.jpg" width="35" height="30">
    </div>
  </div>

sample image

1:

Yo have to do a hit-and-trial to check what size fits the screen best. Also, consider using `col-sm-*` for mobile devices with `col-md-*` instead of relying solely on `col-md-*` alone — Ayush Kumar, Jan 14 '19 at 07:42

SteeveDroz · Answer 1 · 2019-01-14T10:00:51.027

1

First, don't use width="..." and height="..." in your HTML. If you want things to be responsive, you have to use CSS. Everything in the HTML is actually "hard coded" and not responsive at all.

Second, if you fix both width and height, it changes the ratio. You can use max-width and max-height as presented here to fix that secondary problem.

edited Jan 14 '19 at 10:00

answered Jan 14 '19 at 07:45

SteeveDroz

6,006
6
33
65

score 1 · Answer 2 · answered Jan 14 '19 at 08:00

Play around with flexbox and media queries :)

.flex-mobile-column {
  flex-direction: column;
}

.d-flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.flex-grow {
  flex: 1 0 50%;  
}

.p-5 {
  padding: 50px;
}

.img-300-500 {
  height: 300px;
}

@media only screen and (min-width: 900px) {
  .img-300-500 {
    height: 500px;
  }
  .flex-mobile-column {
    flex-direction: row;
  }
}

<div class="d-flex flex-mobile-column p-5">
  <div class="d-flex flex-grow justify-center align-center">
      <img src="https://via.placeholder.com/1000x1000" alt="img" class="img-300-500" />
  </div>
  <div class="d-flex flex-grow justify-center">
    <p>Nulla facilisi. Phasellus commodo maximus eros. Nullam in orci porta, porttitor arcu non, scelerisque mi. Duis ut leo porttitor, fermentum tortor in, consectetur mauris. Nunc nunc neque, rutrum id vehicula eget, volutpat vitae risus. Mauris sed maximus dolor. Phasellus nec ornare arcu. Ut sollicitudin mauris in arcu laoreet, sed laoreet ligula blandit. Nam hendrerit erat eu laoreet eleifend.</p>
  </div>
</div>

View the snippet above in full-screen mode to see what the layout will look like when viewed on a higher resolution display. On the other hand, it appears that you are using bootstrap. It should provide you with enough flexbox utilities you'll need for a responsive design.

Also, here's a pen. The example I made doesn't look like the layout you gave. But, it'll give you an idea on how to achieve what you want :)

@DogukanCavus d-flex is a bootstrap class. The others were made by me. Bootstrap has a documentation pertaining to all their flexbox related classes. You could also check that one out :) — C.RaysOfTheSun, Jan 14 '19 at 09:05

score 1 · Answer 3 · edited May 24 '23 at 17:23

instead of using

<div class="col-md-6">

alone will not help you, you have to use

<div class="col-sd-6 col-md-6 col-lg-6">
</div>

also. Try using in percentage like :

<img src="image/p1.jpg" width="30%" height="35%"  align="left" >

Percentage will auto adjust your image as per the screen. But you have to hit and trial a lot to check the changes work on all screens properly.

Try playing with 'Media Queries' also if you got stuck with % at some points. If you have any further query you may comment.

score -1 · Answer 4 · answered Jan 14 '19 at 07:44

Remove all the widths from main images and use 'img-responsive' class.

Since you are using bootstrap, try below

<div class='col-md-6 col-sm-6 col-xs-12'>
<div class='row'>
<div class='col-xs-6'>
<p>   <img src="image/p1.jpg" class='img-responsive'></p>
<p> 
<img src="image/f.jpg" width="35" height="30" >
                          <img src="image/twitter-bird-white-on-blue.jpg" width="35" height="30" > 
</p>
</div>
<div class='col-xs-6'>
<h3>PETER L.MARUZ </h3>
                          <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                              </p>
</div>
</div></div>

For icons you can use external styles

How to make the page responsive?

4 Answers4