How best can one make the Sling Bag title and its details, wrap below the image of the handbag, while on a small screen?
This page is thanks to Bootstrap!
<div class="customer-details row">
<div class="contact-information col-xl-7 col-lg-7 col-md-7 col-12">
<h3> Contact Information </h3>
<form action="#">
<label for="fname" class="pt-4 pr-4"> First Name: </label>
<input type="text" placeholder="First Name" class="w-50" id="fname" name="fname"> <br> <br>
<label for="lname" class="pr-4"> Last Name: </label>
<input type="text" placeholder="Last Name" class="w-50" id="lname" name="lname"> <br> <br>
<label for="telno" class="pr-4"> Phone No: </label>
<input type="number" placeholder="+254 722554294" class="w-50" id="telno" name="telno"> <br> <br>
</form>
<h4 class="pt-4"> Recipient's Delivery Address </h4>
<form action="#">
<label for="idnumber" class="pt-4 pr-4"> ID Number: </label>
<input type="number" placeholder="Id Number" class="w-50" id="idnumber" name="idnumber"> <br> <br>
<label for="companyname" class="pr-4"> Company Name: </label>
<input type="text" placeholder="Company Name or Estate Name" class="w-50" id="companyname"
name="companyname"> <br> <br>
<label for="apartmentname" class="pr-4"> Apartment Name: </label>
<input type="text" placeholder="Apartment, Suite, etc (optional)" class="w-50" id="apartmentname"
name="apartmentname"> <br> <br>
</form>
<h4 class="pt-4"> Additional Information </h4>
<form action="#">
<label for="moreinfo" class="pr-4"> <span class="more-info"> More Information: </span> </label>
<textarea name="moreinfo" id="moreinfo" cols="30" rows="5">
</textarea>
</form>
<div class="complete pt-4">
<a href="index.html" class="btn complete-btn"> <span> Complete </span> </a>
</div>
</div>
<div class="items-selected col-xl-5 col-lg-5 col-md-5 col-12">
<div class="items-selected-title">
<h4> <a href="#"> Your Basket </a> </h4>
</div>
<div class="row media items-selected1 border-top border-bottom p-5">
<div class="col-xl-7 col-lg-7 col-md-7 col-12 media-left">
<a href="handbags.html"> <img
src="https://www.freepnglogos.com/uploads/women-bag-png/download-women-bag-transparent-png-image-pngimg-5.png"
class="media-object img-responsive w-75" alt="#"> </a>
</div>
<div class="col-xl-5 col-lg-5 col-md-5 col-12 media-body">
<h4 class="media-heading text-nowrap">Sling Bag</h4>
<p class="text-nowrap"> Price: sh.700 </p>
<p class="text-nowrap"> Quantity: 3 </p>
</div>
</div>
<div class="row media items-selected2 border-bottom p-5">
<div class="col-xl-7 col-lg-7 col-md-7 col-12 media-left">
<a href="handbags.html"> <img src="asset/images/moreimg1.png"
class="media-object img-responsive w-75" alt="#"> </a>
</div>
<div class="col-xl-7 col-lg-5 col-md-5 col-12 media-body">
<h4 class="media-heading text-nowrap">Hobo Bag</h4>
<p class="text-nowrap"> Price: sh.880 </p>
<p class="text-nowrap"> Quantity: 5 </p>
</div>
</div>
<div class="total pt-2">
Total: sh.6,500
</div>
</div>
</div>I created a div tag with class name customer-details. Inside customer-details, I have .customer-information set to col-lg-7 and .items-selected set to col-lg-5. Added class row to class media, in the .items-selected. Inside class media, I set the .media-left to col-lg-7 and media-body to .col-lg-5. As a result, the contents of the .media-body wrapped below the image in the .media-left. This saved me a lot of time and energy.
How could I have achieved this using the CSS grid?
I would have to write another code and wrap my code in class customer-details-new. The .customer-details-new has customer-details-new and items-selected-new. Use Bootstrap cards in the .items-selected-new. Then, give the images a class of card-img-top, so that the image appears on the top and the text wraps below the image. Then, in the media query of the desired screen size, I set .customer-details to display none as shown below:
<div class="customer-details-new">
<div class="contact-information-new">
<h3> Contact Information </h3>
<form action="#">
<label for="fname" class="pt-4 pr-4"> First Name: </label>
<input type="text" placeholder="First Name" class="w-50" id="fname" name="fname"> <br> <br>
<label for="lname" class="pr-4"> Last Name: </label>
<input type="text" placeholder="Last Name" class="w-50" id="lname" name="lname"> <br> <br>
<label for="telno" class="pr-4"> Phone No: </label>
<input type="number" placeholder="+254 722554294" class="w-50" id="telno" name="telno"> <br> <br>
</form>
<h4 class="pt-4"> Recipient's Delivery Address </h4>
<form action="#">
<label for="idnumber" class="pt-4 pr-4"> ID Number: </label>
<input type="number" placeholder="Id Number" class="w-50" id="idnumber" name="idnumber"> <br> <br>
<label for="companyname" class="pr-4"> Company Name: </label>
<input type="text" placeholder="Company Name or Estate Name" class="w-50" id="companyname"
name="companyname"> <br> <br>
<label for="apartmentname" class="pr-4"> Apartment Name: </label>
<input type="text" placeholder="Apartment, Suite, etc (optional)" class="w-50" id="apartmentname"
name="apartmentname"> <br> <br>
</form>
<h4 class="pt-4"> Additional Information </h4>
<form action="#">
<label for="moreinfo" class="pr-4"> <span class="more-info"> More Information: </span> </label>
<textarea name="moreinfo" id="moreinfo" cols="30" rows="5">
</textarea>
</form>
<div class="complete pt-4">
<a href="index.html" class="btn complete-btn"> <span> Complete </span> </a>
</div>
</div>
<div class="items-selected-new">
<div class="items-selected-title">
<h4> <a href="#"> Your Basket </a> </h4>
</div>
<div class="card row p-3">
<a href="handbags.html"> <img
src="https://www.freepnglogos.com/uploads/women-bag-png/download-women-bag-transparent-png-image-pngimg-5.png"
class="card-img-top img-responsive w-50" alt="#"> </a>
<div class="card-body col-lg-5">
<h4 class="card-title">Sling Bag</h4>
<p class="card-text">Price: sh.700</p>
<p class="card-text"> Quantity: 3 </p>
</div>
</div>
<div class="card row mt-2 p-3">
<a href="handbags.html"> <img src="asset/images/moreimg1.png"
class="card-img-top img-responsive w-50" alt="#"> </a>
<div class="card-body">
<h4 class="card-title">Hobo Bag</h4>
<p class="card-text">Price: sh.880</p>
<p class="card-text"> Quantity: 5 </p>
</div>
</div>
<div class="total pt-2">
Total: sh.6,500
</div>
</div>
</div>
.customer-details {
display: grid;
grid-template-columns: 3fr 2fr;
grid-template-rows: repeat(2, 500px);
}
.contact-information {
grid-row: 1;
grid-column: 1;
}
.items-selected {
grid-row: 1;
grid-column: 2;
}
.customer-details-new {
display: none;
}
@media only screen and (max-width: 767px) {
.customer-details {
display: none;
}
.customer-details-new {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 500px 750px;
}
.contact-information-new {
grid-row: 1;
grid-column: 1;
}
.items-selected-new {
grid-row: 2;
grid-column: 1;
}
}This is how it will look:
As you can see, with the CSS grid, my code is longer with a media query. With Bootstrap grid classes, my code is less, neat with no media query.
For this reason and many more, which we can discuss later, I prefer using Bootstrap grids compared to using CSS grids.