Making Div Content Responsive

Making div content responsive

try this css:

/* Show in default resolution screen*/
#container2 {
width: 960px;
position: relative;
margin:0 auto;
line-height: 1.4em;
}

/* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */    
@media only screen and (max-width: 479px){
    #container2 { width: 90%; }
}

Here the demo: http://jsfiddle.net/ongisnade/CG9WN/

make divs responsive with div content at centre of div

Here is my solution

Open the snippet in full screen and check

Adding d-flex align-items-lg-center align-items-sm-top will center align the text verticaly on large screen and will align the text to top on small screens.

.row {

  background: #f8f9fa;

  margin-top: 20px;

}

.col-lg-6,.col {

  border: solid 1px #6c757d;

  padding: 10px;

}

.image{

  height:100px;

}

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

<div class="container">

  <div class="row">

    <div class=" col-lg-6 col-sm-12 image   text-center text-lg-left">

      Image

    </div>

    <div class=" col-lg-6 col-sm-12 justify-content-center d-flex align-items-lg-center align-items-sm-top">

      lorem ipsum

    </div>

  </div>

  <div class="row">

    <div class="col">

      1 of 3

    </div>

  </div>

</div>

how to make a div content responsive?

First you need to remove position absolute; on the botton and replace it with float: right", then add position: relative on the div to content the botton and the span.

<div style="background-color: white; width: 50%; height: 50px; border-bottom-style: solid; border-bottom-width: 0.5px; position: relative">

  <span>My Word</span>

  <button style="height: 50px; width: 50px; float: right">button</button>

</div>

(HTML CSS) trying to make certain div responsive

Welcome to SO!

Try to use flex as its responsive and easy to use

And on break-screen(below 767px mobile) i just change its direction to
column from row

* {

    box-sizing: border-box;

}

.container {

    display: flex;

    width: 100%;

    flex-flow: row wrap;

}

[class*="box--"] {

    display: flex;

    margin: .25rem;

    height: 2rem;

    padding: .25rem;

    color: white;

}

.box--half {    

    background: blue;

    flex: 1 1 30%;

}

@media all and (max-width: 767px) {

  .container{

    flex-direction: column;

  }

}

<div class="container">

    <div class="box--half">1</div>

    <div class="box--half">2</div>

</div>

How can i make text is responsive in a div

A few tips that you might consider :

You may adjust the padding to keep text away from edges .
Flex can also be useful to center contents.
Vertical-align can be used on inline boxes

.chevron {

/* flex to align content */

  display: inline-flex;

  align-items:center;

  justify-content:center;

  /* end flex update*/

  position: relative;

  clear: both;

  padding: 10px 0  10px 2.5em;/* adjust here side's padding*/

  margin:2px 0;/*vertical  margins if wrapping ? */

  height: 20px;

  width: 15%;

  vertical-align:middle;

  text-align:center;

  color: white;

  font-size: 12px;

}

.chevron:before {

  top: 0;

  -webkit-transform: skew(55deg, 0deg);

  -moz-transform: skew(55deg, 0deg);

  -ms-transform: skew(55deg, 0deg);

  -o-transform: skew(55deg, 0deg);

  transform: skew(55deg, 0deg);

}

.chevron:after {

  top: 50%;

  -webkit-transform: skew(-55deg, 0deg);

  -moz-transform: skew(-55deg, 0deg);

  -ms-transform: skew(-55deg, 0deg);

  -o-transform: skew(-55deg, 0deg);

  transform: skew(-55deg, 0deg);

}

.chevron:after, .chevron:before {

  content: '';

  position: absolute;

  left: 15px;

  z-index:-1;

  height: 50%;

  width: 100%;

  background: #609090;

}

<div class="chevron">Claim registered</div>

<div class="chevron">Awaiting Emails </div>

<div class="chevron">Please Repair; Awaiting repair date</div>

<div class="chevron">some lengthiest; status goes</div>

<div class="chevron">Invoice Paid</div>

Make div responsive at certain screen size

Added an example how to use css other than position elements.

body,

html {

  margin: 0px;

  padding: 0px;

  height: 100%;

}

ul {

  margin: 0px;

  padding: 0px;

}

li {

  list-style: none;

  margin: 0px;

  padding: 0px;

}

#homepageLeftImg,

#homepageRightImg {

  float: left;

  /* Keeps both the div to align side by side to each other */

  width: 50%;

  /* 50% width to both equates to 100% */

  height: 100%;

}

#homepageLeftImg li,

#homepageRightImg li {

  width: 100%;

  height: 100%;

  float: left;

}

#homepageLeftImg li img,

#homepageRightImg li img {

  width: 100%;

  height: 100%;

}

@media (max-width:480px) {

  #homepageLeftImg,

  #homepageRightImg {

    width: 100%;

    /* Below 480px the width will be 100% and the images will come in stakced view. */

  }

}

<ul id="homepageLeftImg" class="homepageCol">

  <li><img src="https://dummyimage.com/400x800/red/fff&text=This+is+Dummy+left+Image"></li>

</ul>

<ul id="homepageRightImg" class="homepageCol">

  <li><img src="https://dummyimage.com/400x800/blue/fff&text=This+is+Dummy+right+Image"></li>

</ul>

Making Div Content Responsive