Shrinking a carousel snippet to fit page

Hi there everyone!

The demo carousel:
http://bootsnipp-env.elasticbeanstalk.com/iframe/RAGdb

The carousel can be found on this page:
https://wheeltastic.com

I found a responsive carousel to use on the front page of a site and it’s working ok, but it’s stretching out too far. I’be played with putting it into smalller sized divs but to no avail.

Could you perhaps let me know what I need to do do get this to fit the div that the rest of the content around it is in? Even if it shrinks the number of items on a panel, that would be just fine.

Thanks for your time!

Try this:

.col-md-12 .container {
width: 100%;
}

Hi,

The problem is that you have a nested .container element and that is not allowed in bootstrap. Remove the container class and your page should work ok as you don’t want to modify bootstrap classes directly.

Remember that if you are using a grid then you must stick to the grid rules and not mix and match. If you have custom designs that don’t fit the grid then you can always come out of the grid but if you are using the grid classes then follow the correct rules for nesting columns and rows.

Thanks very much for your help!

The stretch issue was solved(thanks PaulOB!) but I’ve run into a new issue when swapping the placeholder images with my own. The boxes now wrap and more space exists between the image divs than should. I’ve gone through the code and don’t see any unclosed tags and the images are being set to use the same width.

https://wheeltastic.com

Any idea of what I’ve done wrong this time?

Well, the Li has padding left & right set that may be whats causing your problem?

.col-sm-3 {padding: 2px; width: 25%; }

[EDIT]

Thanks but I figured it out. I was trying to pack too many elements into the UL.

Is there a way to force all LIs to be at the same height and vertically center the image inside?

I already mentioned it above but it needs re-iterating that you should never directly alter the bootstrap classes themselves because that will affect the whole grid. If you need to make one off alterations then that should be done by adding an extra class and using that new classname to keep the grid safe :slight_smile:

You are still not following the proper grid structure as columns cannot be nested directly inside other columns unless they are inside a row. The .row has negative margins left and right of 15px which offset the 15px padding on the columns. This is how the gutters in columns are maintained and then allows for nesting of columns.

Refer to the grid as the rules are clear and unambiguous and come with examples to show the format. When using a grid like bootstrap you must rigidly stick to the rules of the structure.:slight_smile:

Assuming you are talking about the 4 small (latest brands) images then they are contained in floated containers and thus the images have no correlation with each other and cannot be automatically aligned. You could set an arbitrary min-height perhaps which may suffice but for automatic alignment you would need a different structure altogether.

However you have some bigger issues and your carousel is stopping with a js error which may be the unclosed ‘ul’ for the second slide or it could be any one of the other html errors on that page as there are quite a few unmatched tags.

Here for example:

<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>

The unmatached a gives the validator a fatal error.

Span elements cannot encompass block elements like p tags.

<span style="font-size: 16px;">
          <p>Congratulations, you&apos;ve managed to stumble upon what is offroading&apos;s greatest secret! On these pages,
            you&apos;ll find great deals on all kind of parts for your truck, Jeep or SUV. There are other great things that
            we want to tell you about, but to be honest, the guy writing this needs to get back to work getting the important
            stuff ready for the big reveal.</p>
          </span> <br>
          <br>

Use the validator and fix your errors first and that will make it easier to debug.:slight_smile:

Hi there Paul,

I’ve gone through the validation page and it looks like I’ve managed to clean it up(minus the apple icons, which don’t seem fix-up-able): https://validator.w3.org/nu/?doc=https%3A%2F%2Fwheeltastic.com

If there’s nothing else I need to do there what should be my first step in cleaning this up? I don’t think I’ve done anything to alter a bootstrap class, so your next part is:

which I don’t understand. Is it that li class=“col-sm-3” is sitting inside class=“col-xs-12”? Does the carousel need to be formed differently than it currently is?

I’ll hold off on the container heights until I’ve got this bit sorted in an effort to keep my thoughts in order :smiley:

Not quite:)

It’s cold-md-12 that is directly inside col-md-8. If you look at the text “Our Latest Brands” you can see that they are not inline with the rest of the content but shifted to the right. This is because of the padding on the columns and when you ‘nest’ columns you need to start another row. because rows have negative margins to offset the padding on the columns.

e.g.It should be like this:

<div class="row">						
  <div class="col-md-12">
	<div style="width:45%; text-align:left; display: inline-block;">
		<h2 class="stylishH">Our Latest Brands</h2>
	</div>
etc...

Then the following col-xs-12 should also be wrapped inside a row.

<!-- add div class="row here -->
<div class="col-xs-12">
  <div class="carousel slide" id="myCarousel">
    <div class="carousel-inner">

As all those elements are full width then it looks like you don’t actually need either of those two classes at all and then the slider will match the width of the content above it. Try removing those 2 classes col-md-12 and col-xs-12 and see if it corrects the alignment. If not you will need to wrap the rows around as I showed in the first example above.

In bootstrap you cannot nest one column inside another unless you create a new row using the class of .row.:slight_smile:

i.e.

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Hi there again Paul,

After reading through your response, I decided to remove those two divs and you’re right that they weren’t necessary at all. It seems however, that I’m still missing something. You stated that the content shifts to the right because of my improper use of nested bootstrap elements. I thought I got rid of them which would have allowed the content to shift back into it’s intended location.

Not to be too dense but am I still missing an element to put inside a div class=“row”?

The page in it’s current form: https://wheeltastic.com

Yes, the ul.thumbnails needs a class of .row to get it to align fully to the edges.


<ul class="thumbnails row">

All column classes have 15px left and right padding for their gutters so when you nest columns they would get another 15px padding added which is why the row classes have to be used and have 15px of negative left and right margin to offset the initial padding.

I did as advised but I didn’t see a change between the page load with and without the “row” class added. DId I perhaps need to do something else as well?

Yes it has changed and if you look at the right hand edge of the slider you will see that the last image and the arrows are aligned perfectly to the right along with the content above :). Previously they were 15px to the left.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.