CODEWITHSUNDEEP
csshtmlresponsive-design
user3471546
user3471546

Reputation: 381

how to make html code responsive

Hi i want to make html code responsive. This is my code but it is not responsive how should i do it. i heard something about media query. how one can use it for my code. in my code only inline css is there. how is it possible for me to make my code responsive.

<div class="row_inner_wrapper  clearfix" style="background-color: #777777;background-position: left top;background-repeat: no-repeat; margin-top: 3%;">


<div style = "width: 60%; height:50%; font-weight: bold; font-size: 20px; float: left; background-color: #777777;">
<div style = "width: 28%;  float: left;">
<img src= "C://wamp//www//rushi.jpg";  alt="" style ="max-width: 100%; height: auto; width: 100%; margin-left:10%"></div>

<div style = "width: 72%; float: left";>
<div style="font-weight: bold; font-family: Patua One,Arial,Tahoma,sans-serif; text-align: center;"><strong>abc  </strong></div>
<div style = "text-align: center;">  </div>

<div style = "width: 30%; float: left; margin-left: 5%">
<span style="font-weight: bold;"><strong>abc</strong></span><br/>
<span> Bathroom </span></div>

<div style = "width: 30%; float: left;">
<span style="font-weight: bold;"><strong>abc </strong></span><br/>
<span>abc</span></div>

<div style = "width: 30%; float: left;">
<span style="font-wight: bold;"><strong>abc</strong></span><br/>
<span>abc </span></div>


</div>



</div>


<div style = "width: 40%;  float:left; font-weight: bold; font-size: 20px; ">
<div style = "width: 100%; float: left;">
<span></span><br/>
<span style="font-family: bold;"><strong>abc</strong></span>
</div>



</div>
</div>

Upvotes: 0

Views: 228

Answers (4)

Rocksteady
Rocksteady

Reputation: 281

as @w3debugger did touch upon you could make use of @media queries and the <meta name="viewport" content="width=device-width, initial-scale=1">. The way that I use it is to start with the Mobile design and create responsive changes if the screen expands to certain width's using min-width. 

/* Initial mobilephone state*/
.row_inner_wrapper div{
  padding:1em}

/* TABLETS */
@media only screen and (min-width: 40.063em) {
 .row_inner_wrapper div{
    padding:0}
}

/* LARGE SCREENS*/
@media only screen and (min-width: 64.063em) {
 .row_inner_wrapper div{
    /*something else*/}
}

Upvotes: 0

w3debugger
w3debugger

Reputation: 2102

This is the very basic structure for responsive. if you want to add use internal css, use this in <head>.

.main-wrapper {
  min-height: 100px;
  background: black;
}
@media (max-width: 1023) {
  .main-wrapper {
    background: yellow;
  }
}
@media (max-width: 767) {
  .main-wrapper {
    background: green;
  }
}
@media (max-width: 479) {
  .main-wrapper {
    background: red;
  }
}
<div class="main-wrapper"></div>

As swapnil solanke said , don't forget to add <meta name="viewport" content="width=device-width, initial-scale=1"> in <head>

Upvotes: 1

swapnil solanke
swapnil solanke

Reputation: 258

You need to add width for parent div to make child element re sizable. In your Example row_inner_wrapper should have some width defined 80% or whatever you want.

LINK

and it is for this code and if you want complete web page responsive for all devices compitibility you need to add 

<meta name="viewport" content="width=device-width, initial-scale=1">

tag in your head part of the document and also need to @media queries

Upvotes: 1

Matthijs Otterloo
Matthijs Otterloo

Reputation: 588

First of all, why are u using inline css? It's a really nasty way of coding.... For example you can use @media queries or make use of the bootstrap framework.

Upvotes: -1

Related Questions