I am currently facing an issue with my code involving a side menu and main content. In Desktop view, the side menu should be on the left and the company content on the right.
However, when I added pictures to the content (which I have commented out for now), the side menu shifted down by the size of the picture. Interestingly, this only happened with the first picture, hence why it is omitted in this example. But ideally, I would like to include images in production.
I attempted to resolve this by placing the picture inside a span, but that did not solve the issue...
Any assistance with this problem would be greatly appreciated.
Here is a snippet of my code:
.side-menu {
display: inline-grid;
width: 20%;
margin-top: 23px;
margin-left: 27px;
}
.company-content {
width: 71%;
display: inline-grid;
/*margin-left: 75px;*/
}<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1c11110a0d0a0c1f0e3e4b504e504c">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5c8c8d3d4d3d5c6d7e79289978995">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-2 side-menu" style="padding-left: 0px;min-width: 200px;padding-right: 0px;margin-right:50px;padding-left:0px;margin-left:0px;">
<ul id="menu-map" class="menu" style="padding-left:0px;">
<li class=""><a href="/Category" aria-current="page">
<span>Category</span>
</a></li>
<li class=""><a href="/Subcat1" aria-current="page">
<span><strong>Subcategory 1</strong></span>
</a></li>
<li class=""><a href="/Subcat2" aria-current="page">
<span>Subcategory 2</span>
</a></li>
<li class=""><a href="/Subcat3" aria-current="page">
<span>Subcategory 3</span>
</a></li>
<li class=""><a href="/Subcat4" aria-current="page">
<span>Subcategory 4</span>
</a></li>
</ul>
</div>
<div class="company-content">
<div class="row">
<div class="col-sm-6">
<!-- <span><img src="~/graphics/picture.webp" style="max-width: 350px" /></span> -->
<b>John Doe</b>
<br />
<p>
<span><b>Text</b></span> <br />
E-Mail: <span id="email1">loading...</span>
</p>
<div class="card" data-person="john">
<span class="dots"></span>
<span class="more" style="display: none; color: black"
><br />This is a test text. Yup, still testing. <br />
Teeeeeeeeeeeeeeeeeeesttiiiiiiiiiiiinnnnnnggg.</span>
<button
type="button"
onclick="readMore('test')"
class="Btn btn btn-dark">
More
</button>
</div>
</div>
<div class="col-sm-6">
<span><img src="~/graphics/picture2.webp" style="max-width: 370px" /></span>
<br />
<b>Janet Doe</b>
<br />
<p>
<span><b>Text here</b></span
><br />
E-Mail: <span id="test2335">loading...</span>
</p>
<div class="card" data-person="janet">
<span class="dots Btn" onclick="readMore('test2')"></span>
<span class="more" style="display: none; color: black">
This is a test text. Yup, still testing.
<br />
Teeeeeeeeeeeeeeeeeeesttiiiiiiiiiiiinnnnnnggg...</span
>
<button
type="button"
onclick="readMore('test2')"
class="Btn btn btn-dark"
>
More
</button>
</div>
</div>
</div>
</div>