Mai Munah Mai Munah - 3 months ago 14
HTML Question

Responsive form html css

I have a form like this:

large screen

It looks normal until I open it on mobile screen:

small screen

HTML structure:



<form action="" method="post" id="frmreport">
Booking Date :
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; display:inline">
<span></span> <b class="caret"></b>
</div>&nbsp;&nbsp;
<input type="hidden" name="input_date_from" id="input_date_from" value="">
<input type="hidden" name="input_date_to" id="input_date_to" value="">
<button type="button" class="btn btn-primary" style="padding:5px 12px;margin-bottom:3px;" onclick="print_report('html');">
<i class="fi flaticon-copy"></i> View
</button>
<button type="button" class="btn btn-primary" style="padding:5px 12px;margin-bottom:3px;" onclick="print_report('pdf');">
<i class="fi flaticon-download"></i> PDF
</button>
<button type="button" class="btn btn-primary" style="padding:5px 12px;margin-bottom:3px;" onclick="print_report('csv');">
<i class="fi flaticon-download"></i> CSV
</button>
</form>





I have tried to add
col-sm-6
but the CSV button break to a new line below View and PDF button. What should I add?

Answer

All the code you had in the style="" attribute must be moved into a <style></style> tag or a css file, just copy this code in there

CSS

#reportrange{
background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; display:inline
}

#button{
padding:5px 12px;margin-bottom:3px;
}

HTML (i just added id's to the buttons just copy this in there)

<button type="button" id="button"  class="btn btn-primary" onclick="print_report('html');">
<button type="button" id="button"  class="btn btn-primary" onclick="print_report('html');">
<button type="button" id="button"  class="btn btn-primary" onclick="print_report('html');">

Then use this in the CSS

@media screen and (max-width: 650px) {
#button{
/* add all of your mobile styles in here    */
}
}

So in there you could change the padding and to see the result you could either view it on your phone or by resizing your browser

Comments