3

How do I make this responsive. I'm working on single page responsive site I had replaced this code for submit button. In desktop view, it works fine. When I view it in mobile I can't see submit button. 

<div style="padding-left: 500px" class="bt-contact">
  <input style="width: 130px" class="des-button-dark des-button-dark-1 des-button-dark-1d" id="button-s"  name="submit" type="submit" value="Submit" >
</div>
Ajay Kumar Ganesh
  • 1,838
  • 2
  • 25
  • 33
Poovarasan RK
  • 37
  • 8

4 Answers4

5
<html><head></head><body><div style="padding-left: 40%;" class="bt-contact">
  <input style="width:16%;min-width:160px" class="des-button-dark des-button-dark-1 des-button-dark-1d" id="button-s" name="submit" type="submit" value="Submit">
</div></body></html>

For making Responsive site , Give everything in % not in px. If still u didnt get responsive use css media queries.

Akhila Prakash
  • 481
  • 4
  • 17
  • 3
    We use percents for **fluid** layouts. A responsive layout will use media-queries, but not necessarily percents. – zessx Apr 24 '15 at 07:14
  • 1
    thank you so much(Give everything in % not in px. If still u didnt get responsive use css media queries.) its works fine – Poovarasan RK Apr 24 '15 at 07:20
2

You need to use media queries:

/* Style applied everywhere */
.bt-contact input {
  width: 130px
}
@media screen and (min-width: 800px) {
  /* Style applied if your screen is larger than 800px */
  .bt-contact {
    padding-left: 500px;
  }
}
zessx
  • 68,042
  • 28
  • 135
  • 158
2

You need to add media in CSS, understand how to add media into css and make your website responsive. 

/*------------------------------------------
Responsive Grid Media Queries - 1280, 1024, 768, 480
1280-1024   - desktop (default grid)
 1024-768    - tablet landscape
768-480     - tablet 
 480-less    - phone landscape & smaller
 --------------------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) { }

@media all and (min-width: 768px) and (max-width: 1024px) { }

@media all and (min-width: 480px) and (max-width: 768px) { }

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


/* Portrait */
@media screen and (orientation:portrait) { /* Portrait styles here */ }
/* Landscape */
@media screen and (orientation:landscape) { /* Landscape styles here */ }


/* CSS for iPhone, iPad, and Retina Displays */

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
 @media screen and (max-device-width: 480px) and (orientation:portrait) {
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
}

 /* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
}

You just need to check which resolution you want to make responsive and particular CSS into that media. You need to use more inspect element for testing. One more thing you also use percentage for padding or margin so according to width of your DOM your button will be adjust.

Codelord
  • 1,120
  • 2
  • 10
  • 21
  • @PoovarasanRK Just make sure don't add media for one device. You must check you requirement for problem. Use chrome for development. – Codelord Apr 24 '15 at 07:24
1

Try using media queries..I suspect padding-left:500px is causing the issue.

Check out this link

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@media screen and (max-width: 420px) { /*According to mobile size you can change the width*/
    .bt-contact{
        padding-left: 100px;/* give some less px value */
    }
}
Arun Bertil
  • 4,598
  • 4
  • 33
  • 59