Struggling with formatting a modal as a novice front end coder. Apologies for the messy code!
Currently using bootstrap columns and a card, but having trouble getting the second row to move up close to the first row.
I'm not sure what type of CSS element would be helpful in this situation. The elements I want to move up are labeled "thing" and "second row" in the code snippet.
Here's the relevant code:
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="test">
<div class="modal-dialog modal-lg" style="overflow-y:auto">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">ORDER SUMMARY</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- start content -->
<div class="container-fluid">
<!-- FIRST ROW -->
<!-- left column -->
<div class="row" style="width: 100%">
<div class="col-md-4" style = "width:0%; margin-right: 10%;"> ORDER DETAILS
<hr>
<!-- Order Number -->
<div class="form-group" style = "margin-right: 10%;">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" style= "display: inline">
</div>
</div>
<!-- right column -->
<div class="col-md-4" style="width:100%; margin-right:20%; height:20rem;" id = "order-summary"> ORDER SUMMARY
<div class="card" style="width:17rem; height:24rem">
<div class="card-body" style="width:100%" id="item-summary">
</div>
</div>
</div>
</div>
<!-- SECOND ROW -->
<div class = "row">
<div class="col-md-4 ml-auto" style = "width:100%; margin-right: 20%; position:fixed;"> things
<hr>
<!-- Order Number -->
</div>
</div>
</div>
</div>
CSS:
.row {
display: flex;
}
.col {
flex: 50%;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
.modal-content {
width: 29rem;
height: 38;
margin: auto;
}
}
label{
font-weight: bold;
}
#create-order-modal {
width: 750px !important;
margin: auto !important;
}
.modal-content {
width: 35rem;
height: 35rem;
margin: auto;
}
.container-fluid{
display:inline;
}Looking for a quick fix but struggling to find one. The first row element seems too large, even though no specific CSS properties affect its size.