Good Evening, I have a project in angular and I need help with styling. Specifically, I have 3 divs - card, table, and map. I want the card and table to be in the same row, and the map to be below them with double the size. The top left should have item information, the top right should display a table, and at the bottom, there should be a map.
I want it to look like this:
https://i.sstatic.net/whzdz.png
Here's what it looks like currently: https://i.sstatic.net/9khPE.png
Here is the code:
<div class="container">
<div class="card">
<div class="row">
<aside class="col-sm-5 border-right">
<article class="gallery-wrap">
<!-- Content here -->
</article>
</aside>
<aside class="col-sm-7">
<article class="card-body p-5">
<!-- Content here -->
</article>
</aside>
</div>
</div>
<div class="table">
<table>
<!-- Table content here -->
</table>
</div>
<div class="map">
<app-osm [location] = "location"> </app-osm>
</div>
</div>
And the CSS:
.gallery-wrap .img-big-wrap img {
height: 450px;
width: 100%;
display: inline-block;
cursor: zoom-in;
}
.gallery-wrap .img-small-wrap .item-gallery {
width: 50px;
height: 50px;
border: 1px solid #ddd;
margin: 7px 2px;
display: inline-block;
overflow: hidden;
}
/* Other styles */
If you need assistance with anything else, feel free to ask!