How to Center a website content

rgleason · April 19, 2017, 5:29pm

The entire website is bracketed

<Body> 
       <Container>  set to "fluid"

The top portion is a Carousel which is centered and restrained by <row><columns> for anything above 991px wide.
The middle portion has TAB navigation which is left justified and drops text in favor of icons below 991px wide.
The bottom portion is Content: Text, Lighbox Gallery, Table, Jpeg, iframe, form. The the text is not centered, the lightbox photos are centered.

I would like to center the Content and TABS when the screen is above 991px. Also I would like to restrict the width of the Table and the Form to about 500-460px when the screen is above 991px.

I started to center the Table by using the Column component and setting column width and offset, and began to do the same with the iframe, and form, but then thought there should be a way to do this to the whole website....

Is is possible to use a css style on the "container" component similar to this..

.container-fluid { max-width: 991px; margin: auto; }

Or if not that, perhaps add a

<

div class="content"> inside of the "Container" component and then put a style on that? How would that affect the various features that use columns to center the particular item?

A version of the website is here http://crimson-paper-3666.bss.design/

hackers_84 · April 19, 2017, 6:35pm

Have you tried any of what you suggested above before asking?

If you don't want to have fluid width on every break point you can use media queries to control the container width using margin as you suggested.

Alternatively you could just de-select the container fluid option in the options panel and then just include a media query for fluid width to kick in for containers after minimum width of 991px.

rgleason · April 19, 2017, 6:53pm

I think I figured it out.

.container-fluid {
  max-width:991px;
  margin:auto;
  }

That didn't do much.

So using the BSS tools, I just tried a <row> and <column> inside the <container> and then set column widths of 10 and offset 1 for LG and MD. This slides the TABS over and aligns all content text under the Carousel, centers the lightbox photos. For the Map and Table TAB content, I used some more <row> <column> to control the width a little bit more and center those.

Hope that's an acceptable way to do this.

hackers_84 · April 19, 2017, 7:30pm

try this.

1) drag in a new blank section or div into your design. 2) call it wrapper or whatever. 3) then drag the the bits you need into the section/div. 4) create a new class name for the section in attributes and apply. 5) create new CSS entry and apply the following:

 .newstyle {

 max-width: 991px;
 margin-left: auto;
 margin-right: auto;

}

this should then fix the width of your section to be 991 max.

you wil also need to then remove the offsets you have applied to your columns as that is creating more work for yourself.

rgleason · April 19, 2017, 8:13pm

Chris, I just saw this post. Sorry.

Have you tried any of what you suggested above before asking? - I went ahead and tried on .content-fluid with margin:auto but it didn't really work as far as I could determine.

If you don’t want to have fluid width on every break point you can use media queries to control the container width using margin as you suggested. - Thank you for the conceptual explanation.

Alternatively you could just de-select the container fluid option in the options panel and then just include a media query for fluid width to kick in for containers after minimum width of 991px. - Would it be more efficient than what I did with <row><column> under the <container>?

  .visible-xs   Extra small (less than 768px) visible 
  .visible-sm  Small  (up to 768 px) visible 
  .visible-md  Medium (768 px to 991 px) visible
  .visible-lg   Larger (992 px and above) visible

(I don't understand above, it appears ES and SM are essentially the same!)

/* XS */ fluid

@media (max-width:767px) /* SM */ fluid

@media (max-width:991px) and (min-width:768px) /* MD */ 10 columns wide, 1 col offset

@media (min-width:992px) /* XL */ 8 columns wide, 2 col offset

I'm going to figure out the css for this next.

rgleason · April 19, 2017, 8:15pm

Chris, I just saw your post above and will try that! Thank you.

1) drag in a new blank section or div into your design. 2) call it wrapper or whatever. 3) then drag the the bits you need into the section/div. 4) create a new class name for the section in attributes and apply. 5) create new CSS entry and apply the following:

.newstyle {

max-width: 991px; margin-left: auto; margin-right: auto;

}

this should then fix the width of your section to be 991 max.

you wil also need to then remove the offsets you have applied to your columns as that is creating more work for yourself.

rgleason · April 19, 2017, 8:55pm

Have done what you suggested. It is simpler.

 <body>
       <div id=wrapper>
            <container>
                    all the content

CSS as you suggested.

  .wrapper {
        max-width: 991px;
        margin-left: auto;
        margin-right: auto;
        }

The container-fluid seems to stop at the lower end, whereas before it would go down below the width of my cell phone, and the Carousel has no side margins now, but the TABS, Content and Carousel look more "together" and aligned and its better. http://crimson-paper-3666.bss.design/

Thank you.

rgleason · April 19, 2017, 9:34pm

Found this.

The xs breakpoint actually handles screens from 767 pixels and below. The breakpoint widths are as follows:
xs= 0-767 pixels
sm = 768-991 pixels
md = 992-1199 pixels
lg = 1200 pixels and up
See http://getbootstrap.com/css/#grid

PLEASE NOTE THIS ANSWER IS FOR VERSION 3.0

Also they said " Bootstrap v4.0 : xs is now at 480px. They also added more descriptive responsive classes e.g. hidden-md-up."

saj · April 19, 2017, 11:43pm

Not sure but I'm thinking your over thinking it. I think Chris was on the right track. But I'm wondering what your really trying to accomplish.

Are you trying to make it so the site doesn't get any wider then 991px? If so then all you needed to do was set in your custom CSS the following

.container-fluid{
    max-width:991px;
}

Here is how this works.

.container-fluid has no width restrictions i.e. full width of screen whatever that may be
.container has specific width restrictions based on media queries and maxes out at 1170px
both .container-fluid and .container by default have margin-left/right set at auto
both .container-fluid and .container have padding gutters (padding-left/right set at 15px)
.row offsets the padding gutters by setting margin-left/right set at -15px
.col-xx-yy must be (and should only be the) direct child(ren) of .row

The use of .container-fluid and .container is required by the grid system i.e. <div class="row"><div class="col-md-12">

The grid system first starts with a row (<div class="row">) and it's direct child(ren) should only be a column(s) (<div class="col-md-12">) and some where along the hierarchical tree there should be a parent element of .container(-fluid) http://getbootstrap.com/css/#grid-intro

Based on the above (without the wrapper div) if you set it as I described your site will center on any screen above 991px and be no wider than 991px.

If the center and width are not working out, then you have something else wrong in your CSS which I can't see because my testing on your site it all worked out as I layed out here.

....

Next part..

Your Carousel is in an incorrectly constructed grid. You have the following <div class="row"><div><div class="carousel slide"> that middle div should be a column class. It is truly unnecessary for the grid here at all. So you can drag the Carousel just above the <div class="row"> in the Overview pane and delete the row and it's child div.

Now doing either will reinstate the gutter spacing on mobile view because of the .container-fluid, if want the Carousel to be edge to edge again in mobile view add the following CSS. Using the site address http://crimson-paper-3666.bss.design for my testing.

#carousel-1{
    margin-left: -15px;
    margin-right: -15px;
}

....

Next part..

Your Inquire Contact Us form is in an incorrectly constructed grid. It is in a column with out a parent .row element. It is truly unnecessary for the grid here at all. So you can drag the Form just above the <div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2"> in the Overview pane and delete the column. If you are trying to, in effect, restrict the width of the Form and center it, then you would do something similar as I described above with the .container-fluid but for the Form element. I just don't think that it's necessary really.

This would make your site more properly constructed.

Sometimes I even have to take a step back and think, am I over thinking this, often at times I am. Which ultimately leads to a better way of doing whatever it was I was trying to do in the first place.

....

Read this site http://getbootstrap.com it is what the BSS app is based on.

Saj

rgleason · April 20, 2017, 2:00am

Dear Saj,

In an effort to get things centered and set max-width for 4 different TAB content types, I've been trying to clean up my extra <rows> <cols> for all the TABS, and almost concurrently have removed them and the earlier attempt to set max-width by using columns. Thank you for explaining this so clearly!

With Chris's suggestion for making a Div wrapper, I took that technique and adapted it for each of the tabs that needs to be centered and max-width set, so I added

  #map {
  max-width:470px;
  margin-left:auto;
  margin-right:auto;
  }

  #rates {
  max-width:470px;
  margin-left:auto;
  margin-right:auto;
 }

 #dates {
 max-width:670px;
 margin-left:auto;
  margin-right:auto;
  }

 #inquire {
 max-width:470px;
 margin-left:auto;
 margin-right:auto;
 }

To center the content in those TABS and to set the max-width. It seems to work very nicely and eliminates using grid components like <row> <col> just as you have suggested. I believe I have followed your suggestions and eliminated probably 3-4 incorrect and improperly made <row> <col> for TAB content: Map, Rates, Dates, & Inquire.

I will check what I have done to fix the Carousel, next and make it conform to what you suggest. I believe I moved the Component up and deleted the <row> and <col> and under OPTIONS for the "div id-carousel" I see that max-width is "none" and margin-left: 0px and margin-right: 0px sand the Carousel seems to be working ok and below that Lightbox photos outer edges are lining up nicely, so I think it is working. Maybe I don't need to add this to the custom.css file.

  #carousel-1{
   margin-left: -15px;
   margin-right: -15px;
   }

Your explanation & rules for .container and .container-fluid make the big picture seem so clear. I certainly hope that gets into the User Manual, for sure!

I will next try to get that working and eliminate the "div id=wrapper" which was working as well.

Thank you again for getting me straightened out and squared away!

Best Regards, Rick

PS: The added css for container-fluid works great now & I've removed the div wrapper.

rgleason · April 20, 2017, 2:44am

With everyone's suggestions, and Saj's sage advice I think the html and css is looking cleaner and the design works much better. Thank you so much for all your help.

http://crimson-paper-3666.bss.design/

Now onto figuring out a captcha for "Inquire"/ "Contact Us".

marrco · April 20, 2017, 7:42am

@rgleason there's also a larger breakpoint @1200, for a reason. Not everybody has low-resolution monitors. My regular monitor is 1920x1080, and your website now looks "small" to users on laptops and large monitors. Amateurish and in need of a redesign. But all previous versions always had issues because of the limited width images you use.

No offense, but why don't you invest a few weeks in learning bootstrap? I really think you would benefit from it. I shared a suggestion here: https://bootstrapstudio.io/forums/topic/introduction-to-bootstrap/

@all-experts why don't you post a few useful links on that thread (or create a new one) with more free resources to learn bootstrap (and HTML 5 and CSS 3)? I'm thinking about the basics like w3c or gogetbootstrap, but I'm sure there are few hidden gems that could help beginners that are willing to learn.

jo-r · April 20, 2017, 12:49pm

I find Udemy is a great place to learn and cheap and some things free as well. EdX is one I just discovered thanks to Marrco as well. Udemy you can usually get a lot of education for 10 bux a pop which is pretty cheap for the amount of work these people do to create these tutorials and classes. Just wait for the sales, sign up for their email and you'll see them. Check out BitsDuJour as well, they run sales on software and other things for different companies and Udemy is on there quite often with their sales. Here's some links for you to check some out. Most of them are have some free things, and have some really cheap prices for things that aren't free, or they run sales. Definitely worth the effort so you can get on your feet with this. I know you have a lot of programming background, but as intuitive as this may seem, it's not the same at all compared to other languages and there is a lot to learn now with Responsive design and all the new CSS features.

https://www.edx.org/ https://learntoprogram.tv/ https://www.udemy.com http://codesmart.academy/courses