Containers In Website

HTML & CSS
1

Hello, I have a container that is 1570px in width
but it seems to be breaking other elements within the
page and they dont seem to go full width like my .container-fluid
Website

489×528 11.8 KB

I think its because I dont have an outerwrapper to contain everything…

2

By saying this:

@media (min-width: 1200px)
.container {
    width: 1570px;
}

You’re telling the browser to set the .container to a width of 1570px even when the browser viewport is only 1200px wide. Doesn’t make sense to do that.

Setting widths like you’re doing isn’t advisable.

1 Like
3

ok I returned it to its original state to :

.container {
    width: 1170px;
}

Something is a bit off though I got my fluid containers not going all the way
across the browser:

1905×100 13.9 KB

4

That’s because there’s padding in the parent.

5

I know but I have that padding in my other website I made
but it goes all the way at the end. I dont know I think
I dont good structure, I started off wrong.

I think I should start off with this: http://codepen.io/paulobrien/pen/FKAxH
instead any suggestions on how to start off any development project
in terms of structure?

6

All you need to do is remove the col-lg-12 wrapper from around that and it will go to the edge. It’s just doing what you tell it to do - it’s applying the padding to the 12 column wrapper, but it’s not needed in this case.

<div class="container-fluid">
        <div class="row">
                            <div class="check-in-box">
                   <form id="check-in-form" action="#" method="post">
                       <label class="online-checkin">Online Check-In</label>
                       <label><input type="text" name="YourName" placeholder="Name"></label>
                       <label><input type="text" name="YourPhone" placeholder="Phone Number"></label>
                       <label><input type="text" name="YourEmail" placeholder="Email"></label>
                       <label><input class="btn btn-primary send-btn" type="button" name="button" value="Send"></label>
                    </form>
                </div>
        </div>
    </div>
7

If you are using a framework then you need to stick to the framework and use designs that fit the framework nicely. Bootstrap has a strict code for its columns and gutters and you need to follow all the guidelines for rows and columns because the structure had padding and then negative margins on .row to offset the padding.

If you aren’t using a framework or have no need of a framework (most small sites don’t need them) you should build your own bare bones starter template so that you know what everything does and don’t continually have to over-ride everything just to make it fit your design as often happens with bootstrap.

In the end its a personal choice but if you are going with a framework then spend a few weeks understanding the frameworks rules so that modifying it becomes easier.

1 Like
8

gotcha

9

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