Search code examples
htmlcssresponsive-designresponsive

How to make a div row with two elements responsive in mobile

so i have a page that looks like this enter image description here

with an HTML like this

<form id="contact-form">
    <div class="row" style="position:relative">
        <div class="col-md-6">
            <input type="text" placeholder="First Name*" required id="firstName" />
        </div>
        <div class="col-md-6">
            <input type="text" placeholder="Last Name*" required id="secondName" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <input type="email" placeholder="Email*" required id="email" />

        </div>
        <div class="col-md-6">
            <input type="tel" placeholder="Phone Number*" required id="phoneNumber" />
        </div>
    </div>
    <div class="row">
        <div class="col">
            <textarea rows="3" placeholder="Message*" required id="message"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <button type="submit" class="rehab-btn-secondary btn-send-contact">Send</button>

        </div>
    </div>
</form>

As seen above, there is a div which has a class "row" and the two div elements that contains the input for "First Name" and "Last name", same as "Email" as "Phone Number". This part is ok as I can set the margin-bottom for each "row" class to 15px and each row will have a gap. However, this approach is not responsive, as In mobile it will look like this enter image description here

The inner elements are overlapping, I cant think of an approach to make this responsive so that the "First Name" and "Last Name" will be on another line with margin in mobile mode. can I handle it in pure CSS and HTML alone or do I need to do some scripting in javascript if its in mobile mode?

Any suggestions?

Solution

  • Since you are using Bootstrap, you can use its classes for margins, and set top margin only for mobile devices.

    Just add mt-3 mt-md-0 classes to the "Last Name" and "Phone" inputs:

    <div class="col-md-6 mt-3 mt-md-0">
  <input type="text" placeholder="Last Name*" required id="secondName" />
</div>
...
<div class="col-md-6 mt-3 mt-md-0">
  <input type="tel" placeholder="Phone Number*" required id="phoneNumber" />
</div>

    This will set margin on mobile devices, and it will remove them on desktop.