Bootstrap side menu unconfigured in the mobile version

Navigation
6

I'm in the fight to make a website and present it in my TCC. I separated the sections of the site (body, head, header, footer ...) into isolated files to be able to move more easily. I took great care to separate all the right elements in each file. They appear on the site because my index.php page has include_once() of those pages.

The problem starts here: My menu-lateral.php file is getting unconfigured in its mobile version. It contains the Facebook Like Buttons, Follow Twitter Profile, Flickr Link and YouTube Page Signup button.

Apparently, the problem is with the enjoy button on Facebook. Whenever the site is in its desktop version, no problem, it's all right:

Now,inthemobileversion,itlookslikethis(followsphoto).ThebuttonislargerthanitshouldandgoingfromdivoftheEmenutoaddingahugespacetothebodyofthepage.

HowshouldIstay:

Theotherbuttonswillbereplacedwithimages,however,IwanttocontinuewiththeFacebookbutton.Iwanttoknowifitispossibleto:1)fixthespaceprobleminthemobileversion;2)Leavebuttonsizeresponsive.

Followthemenu-lateral.phpcode:

<divclass="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
        <div class="list-group">

            <div class="list-group-item">

            <!-- Facebook -->
            <div class="fb-page jumbo-img" data-href="https://www.facebook.com/ibnovomundo" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false" data-layout="box_count">
                <div class="fb-xfbml-parse-ignore">
                    <blockquote cite="https://www.facebook.com/ibnovomundo">
                        <a href="https://www.facebook.com/ibnovomundo">IBNM - Igreja Batista Novo Mundo</a>
                    </blockquote>
                </div>
            </div>

            </div>

            <center>
            <div class="list-group-item">

            <!-- Twitter -->
            <a class="twitter-follow-button jumbo-img" data-size="large" data-show-count="false" href="https://twitter.com/ibnovomundo">Siga @ibnovomundo no Twitter</a>

            </div>
            <center>

            <div class="list-group-item">

            <!-- YouTube -->
            <div class="g-ytsubscribe list-group-item jumbo-img" data-channel="batistanovomundo2" data-layout="full" data-count="hidden"></div>

            </div>

            <center>
            <div class="list-group-item">
            <!-- Flickr -->
            <a href="http://www.flickr.com/photos/ibnovomundo2/" title="Veja nossas fotos no Flickr!"><img src="https://s.yimg.com/pw/images/goodies/white-see-my-photos_pt.png"class="jumbo-img" alt="Veja nossas fotos no Flickr!"></a>

            </div>
            </center>

            <center>
            <div class="list-group-item">
            <!-- App -->

            </div>
            </center>

        </div>
    </div>
    
asked by anonymous 16.10.2015 / 02:08

1 answer

5

Come on, I'll try to help you ....

Bootstrap 3 is strict with the correct use of the classes that determine the size of the grid column, I can clarify doubts about this at another opportunity, but at first it makes a difference to use col-xs-* , col-sm-* , col-md-* e col-lg-* . They will behave differently depending on the screen size of the device. Let's doubt!

see only your code 

<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">

Since the default bootstrap column is 12 and you used .col-xs-6

This means that for mobile .col-xs- with the value 6 you are saying that HALF of the total width of the page will be reserved for that menu ... an unnecessary size so this great distance

Normally in mobile this should be displayed below the content as if it were alone in a line for mobile you get this effect as well 

<div class="row">
  <div class="col-sm-3 sidebar-offcanvas">
  <!-- Resto do codigo ... -->

This will make the menu appear below the previous column which should be the content column. This is better, because it will be bad if you try to leave side by side hinders the user experience and is aesthetically bad because it generates horizontal scrolling, something that goes against a page that should adapt to a mobile device (Responsiveness).

If this does not work it should probably be the html structure you have developed, the row and column nesting contained in your code. I'll be happy to help and teach what little I know.

Hugs!

    
22.10.2015 / 12:10
Resolution of equations Comparison between IDEs for java [closed]