CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Brian
Brian

Reputation: 581

How to prevent left sidebar from being partially cut off on narrow display?

I am trying to get a left sidebar to behave a bit nicer on smaller width displays.

Here is the site:

https://guitar-dreams.com/guitar-lesson/triad-arpeggios-2-strings/20

On this page you see the left sidebar and if you make the browser window narrower and narrower you will see that there gets to be a point when the left side of the sidebar disappears a bit beyond the browser window edge.

Here is pic (notice left side; right side looks cut just because of how I made the screenshot):

enter image description here

Since the sidebar behaved normally before I added the sticky block, I thought maybe I could just use a container div, where the presence of the sticky element would automatically maintain a proper relative position along with the menu that is above the sticky element, but that didn't help.

Here is the HTML for the sidebar:

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 hidden-sm hidden-xs left-sidebar" style="text-align: center;">
        <div class="menu block tile-default" id="sidebarmenu" style="border:0px;">
            <img src="/img/sidebar-top.png" class="img-responsive" alt="sidebar image">
            <div class="pad">
                <ul class="nav nav-pills nav-stacked">
                    @include('partials/menu')
                </ul>
            </div>
            <div style="background-color: white; height: 10px; border:0px"></div>

            <div id="sidebar-container">
                <div id="leftsidebar">
                    <h4 class="text-center">Register for Free Live Video Webinar!</h4>
                    <a href="https://zoom.us/webinar/register/WN_Pt9LgDTBR828OXIHOfTLPQ" class="thumbnail" target="_blank">
                        <br>
                        <h4 class="text-center">Triad Chords Everywhere!</h4>
                        <img class="img-responsive" src="/img/chordswebinargraphic.png" alt="..." width="300" height="309">
                        <div class="caption">

                            <p style="background-color: #c8d9fe ; padding: 4px;">Set out on a path to master chords on the guitar. Understanding triads is the key to learning more advanced chord concepts such as 7th chords, extended chords, altered chords, hybrid chords, chord substitution, and more.</p>
                            <p>When: 7 September, 1:00 PM</p>
                            <p>Duration: 90 Minutes</p>
                        </div>
                        <div class="countdown" id="timer">
                            <div id="days"></div>
                            <div id="hours"></div>
                            <div id="minutes"></div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Maybe I just don't have the relationship among the divs set properly. Curious if there is some simple adjustment that solves the problem. I suspect this isn't so much a CSS issue as a div structure issue in my HTML, just not sure how to properly set the divs to achieve the desired result.

Thanks in advance, Brian

Upvotes: 0

Views: 659

Answers (1)

DevLasting
DevLasting

Reputation: 352

Update you md class on both divs. Use col-md-4 for side bar and col-md-8 on main content parent div. Below is the code: 

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-3 hidden-sm hidden-xs left-sidebar">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-9">

There are "hidden-sm hidden-xs" classes on left side bar div in your html. These classes hide your div once the screen width is below a certain threshold. For more info, please refer https://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp

Upvotes: 1

Related Questions