My layout is relatively simple. There is a header at the top, nagivation bar with an image inside a column on the left and the content at the right.
When I switch to a mobile responsive view, I want the navigation column to display the nagivation list and an image side by side instead of top and bottom like in the default view.
So far, I have used the following code
<div class="row">
<div class="col-lg-2">
<div class="row">
<div class="col-sm-10">
<ul style="margin-left: 50px;">
<li><a href="/news">News</a></li>
<li><a href="/events">Events</a></li>
</ul>
</div>
<div class="col-sm10">
<img src="/images/navbg.png" class="img-fluid">
</div>
</div>
</div>
<div class="col-lg-9">
<h3>Blog Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>
</div>
With the above code, the layout looks fine in the Default view, but in the smaller responsive view, I am unable to get the image appear beside the unordered list. The unordered list and the image appear below each other just like in the default layout and eat up a lot of space. I also wanted to crop the image smaller from the top with css, although I don't mind using a smaller size image too.
Any help would be appreciated.
You should use the responsive col-
classes inside the left column...
https://www.codeply.com/go/s2HSMmbnkv
<div class="row">
<div class="col-sm-2 col-12">
<div class="row">
<div class="col-sm-10 col-9">
<ul style="margin-left: 50px;">
<li><a href="/news">News</a></li>
<li><a href="/events">Events</a></li>
</ul>
</div>
<div class="col-sm-10 col-3">
<img src="//placehold.it/200" class="img-fluid">
</div>
</div>
</div>
<div class="col-sm-9">
<h3>Blog Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>
</div>
The left col-sm-2
become full width (col-12
) on the smallest screens, and then the inner columns (col-9
,col-3
) become side-by-side. You may want to adjust the breakpoints (sm), and widths as desired.