Question

Photo of Don Smallman

0

Bootstrap Question

5

Hi,

I am still trying to figure out bootstrap.  Would someone be able to look at this page and see where I am going wrong?  It looks OK on my computer but on my phone there is no space between the videos.

http://www.therockaz.org/page/385

Thanks
Don

  • Photo of Dave Schuster

    0

    Hey Don,

    Not positive, but don't think it's the added row div adding the space, it's the paragraph <p>.  Bootstrap adds a margin to the bottom of those paragraph tags and that's probably what you're seeing inbetween the rows, as it's added after your second video div. 

    Just looked at the page again and am pretty sure you can fix it by just adding an extra class to the div where you have Bootstrap's column class.  You can either leave the 2nd row div or remove it.  Don't think it will make any difference one way or the other.

    Here's one way that will work:

    First, remove the <p>&bnbsp</p> from the bottom of your second video div.  (You can also remove the extra row here also, or not). 

    Then, add a class to your video divs.  For example, change the four divs from <div class="col-sm-6 col-xs-12"> to <div class="col-sm-6 col-xs-12 video-padding">.

    Finally, add the class you just named to your css file. It looks like you have a css file named "developer.css".  To that file you could add:

    .video-padding {
        padding-bottom: 5%;
    }

    You can use px, em, rather than % to play around with the padding until you get the look that you want.  5% is about 40px and about 2em, for example.  Then, if you add additional video frames, just include the padding class you created.  You will now have the padding at the bottom of all of your video divs regardless of the screen size.

  • Photo of Dave Schuster

    0

    Don,

    You can fix at least a couple of different ways...  Just from an ease of maintaining I would consider removing the the second row class and wrap all your videos in one row, rather than two.  I'm pretty sure Bootrap will respond the way you want with just one.

    From there, you could leave the <p> between the second and third video's divs and then add another <p> after the first and third too, but again, just for maintainability, I would remove the <p>, add a class to your video's divs and use that class for padding.  Something to the effect of class="col-sm-6 col-xs-12 added-padding" and then in your css add the .added-padding {padding-bottom: ??;} and play with the px or ems until you get it to space out the way you want.

    • Don Smallman

      Don Smallman

      Thanks Dave. I tried the first suggestion before and just tried again. When I remove the second row class, then it removes the space between the videos on both the computer and the phone.


      I think it has something to do with the "embed-responsive-16by9"

    • Photo of Don Smallman

      0

      I'm not sure if anyone will see this, since I marked it as answered.  Can you possibly tell me how I can remove spave above the Words "Service Times & Locations"?  I assume it has something to do whit Bootstrap.  Thanks!

      https://www.therockaz.org/page/415

    • Photo of Dave Schuster

      0

      Hey Don,  it looks like there are a couple of things affecting your spacing and does come from Bootstrap, but there is a little more to it. 

      First, it may be that you want to remove the div with the .page-header class.  That class is adding 44px of margin(see below) to the top.  If that isn't enough, then read on...

      Any page that uses the 3 column, Left & Right Sidebar or Full-Width layouts will have an <h1> tag added to the page.  Even if there isn't anything typed in the header, looks like there is still space added.  To fix that you could remove where the <h1> tag is inserted by Rock... If you are familiar with copying the Themes, such as the Stark theme, to edit as suggested in the documentation, the easiest way may be to make a copy of the layout you're using and remove the lines from the .aspx files where the Page Title is generated.  Then use your new copy sans Page Title rather than the one you were using.  If what I'm saying doesn't make much sense, then don't do it ;-).

      Here is the line you could remove:

              <!-- Page Title -->
              <Rock:PageIcon ID="PageIcon" runat="server" /> <h1><Rock:PageTitle ID="PageTitle" runat="server" /></h1>

    • Photo of Don Smallman

      0

      Thank you!  I removed the <div class="page-header"> and it looks much better.

      Also, has anyone else had any issues saving comments here?  I have tried IE11 and Firefox and the comment just wont save.  This happened last time I tried to add a comment too.