General Discussion

Maximiliane Quel
PRO
Maximiliane Quel
Pro Student 55,486 Points

Issues with website project using Bootstrap framework

Hi guys,

I created a website using bootstrap for the first time. My biggest issue is that I get a horizontal scroll bar and the picture grid is also not behaving exactly as I would like it too. Ideally I would like it to always span the entire width of the window and I really need to get rid of the empty space on the right side.

So here goes: website link

I have stared at this project for so long now that I can't really see the solution. So please, any suggestions, comments and solutions are welcome!

Thanks in anticipation ;0)

Max

18 Answers

Wayne Priestley
Wayne Priestley
19,565 Points

Hi Maximillane,

I think you will have to place whatever you are using to show your images outside of the container class to get it to span 100% of the screen, as anything within the container is restricted to the mac grid size.

(from what i can remember anyway)

Maximiliane Quel
Maximiliane Quel
Pro Student 55,486 Points

you were right in the sense that once I took out the gallery from the jumbotron and div with container class it does span the entire width. so great answer. thank you.

Matt Campbell
Matt Campbell
9,766 Points

The top black bar is overflowing the viewport and the yellow and black backgrounds look to be as well. There'll be some margin or border or padding that's blowing it up past 100% width.

Try to add a CSS rule for everything that sets box-sizing to border-box. It's really useful as padding and borders are contained within the element rather than adding to the elements width. So a 100px div with a 10px border stays at 100px, not 120px width.

Maximiliane Quel
PRO
Maximiliane Quel
Pro Student 55,486 Points

Thanks for getting back to me. I really appreciate it.

Unfortunately, I still haven't solved it. The black bar at the top is bootstraps native nav bar.

Bootstrap suggest the following: Grids and full-width layouts Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .rows.

I have tried putting that inside the main content area and leaving the page hero and container outside of it. But I still get a white stripe running down the right side of my page ...

Then I tried having everything inside the main container. I get the white stripe on the right side of the page.

Then I have tried leaving everything inside the main container and taking out the negative margin from the contact area and page hero, which leave everything nicely centered and gets rid of the horizontal scroll bar ... with a 15px white margin on both sides ...

Whatever I try another part falls appart ...

I still need help please.

Brian Phillips
Brian Phillips
15,074 Points

I see the padding that you added to the main-container div is negative (0 -15px). Perhaps try making it a positive value instead (0 15px)? The negative value is already applied to the rows in the bootstrap CSS and needs to be offset by the positive value.

Maximiliane Quel
PRO
Maximiliane Quel
Pro Student 55,486 Points

I have updated the site as far as I have gotten. the crux is the contact area not spanning the entire width. if anyone has any ideas how I can do that without breaking the entire site again that would be really helpful.

btw I will of course vote your answers once I have solved the last issue. so just a tiny bit of patience please.

Brian Phillips
Brian Phillips
15,074 Points

The col-md-offset-1 applied to the Contact Us portion is causing the awkward indent on the left-hand side.

Maximiliane Quel
PRO
Maximiliane Quel
Pro Student 55,486 Points

thanks Brian. you are right that the offset is probably no longer ideal. the problem that I am trying to fix though is that the black background isn't spanning the entire width of the page. but I need the content to be in a container to apply the rest of the formatting other than with the gallery block

Brian Phillips
Brian Phillips
15,074 Points

The problem is you have a container inside your main container. the class .container has padding added to it of 15px left and 15px right in the bootstrap CSS. Try adding a custom class to that div in addition to the .container and reset the padding on each side to 0px in your custom CSS.

Maximiliane Quel
PRO
Maximiliane Quel
Pro Student 55,486 Points

So here is the issue. I tried to reset the padding of the main container by adding a negative margin of -15px left and right to the div wrapping the entire contact area like I did for the jumbotron at the top. and ... that puts me exactly where I started from. with a horizontal scroll bar and a white strip on the right hand side.

Maximiliane Quel
PRO
Maximiliane Quel
Pro Student 55,486 Points

and taking the contact area out of the main container breaks the layout too

Brian Phillips
Brian Phillips
15,074 Points

I think I have it. Change the right and left margin of your #contact-container to -15px.

Brian Phillips
Brian Phillips
15,074 Points
#contact-container {
    background: #000000;
    border-top: 0.8em;
    border-image: url('../img/stripe-black.png') 20 0 0 0 repeat;
    margin-right: -15px;
    margin-left: -15px;
}
Wayne Priestley
Wayne Priestley
19,565 Points

Ok, Your #contact-container is inside your main content. Ive been changing your code and if i change the main-content class at the top of your custom css the #contact-container changes its width.

A fix to get rid of the white space down the side of #contact-container should be to go through your html and take the #contact-container out of the main-content. Even if you have to have another main-content after the #contact-container id. Hopefully that will work.

Maximiliane Quel
PRO
Maximiliane Quel
Pro Student 55,486 Points

Hi Wayne,

thanks. I will try that. Keeping my fingers crossed.

Maximiliane Quel
PRO
Maximiliane Quel
Pro Student 55,486 Points

I finally solved it. I am not entirely sure how, but I am not questioning it. There was a lot of adding and subtracting containers rows etc and in the end it finally came together. I will do a bit more editing before I upload the result, if any one is curious.

Two things that I learned in this process:

  1. structural issues should be solved as early as possible because otherwise ... and
  2. I was really happy to see that people did care about what is essentially my problem. So that was very positive and I think you guys are awesome!
Wayne Priestley
Wayne Priestley
19,565 Points

I'm glad its all sorted Maximiliane. :)

Maximiliane Quel
PRO
Maximiliane Quel
Pro Student 55,486 Points

Thank you! I really appreciate your help a lot. Not sure we I can't vote up answers. I contacted support about that. So hopefully you get at least some points :0)

Wayne Priestley
Wayne Priestley
19,565 Points

I'm not bothered about the point, I'm just glad its working, Looks very nice BTW

Maximiliane Quel
Maximiliane Quel
Pro Student 55,486 Points

well but I kind of feel like they are well deserved since I was kind of on the brink of going mad :0).