Reply To: [Waiting for user confirmation] HTML question

Hi Luoy,

You are pointing to the new docs of Bootstrap V3, the good link is: http://getbootstrap.com/2.3.2/scaffolding.html#layouts.

I started reading more about fixed, fluid and responsive, and then read the docs of Toolset bootstrap again.
Good article about fixed, fluid and responsive with twitter bootstrap is this one: http://ericterpstra.com/2012/09/twitter-bootstrap-fixed-fluid-and-responsive/comment-page-1/#comment-253.

First I started reading http://wp-types.com/2013/08/toolset-bootstrap-theme-released/.

You: We are very happy to announce a first public release of Toolset Bootstrap. A responsive theme, built for developers.

ME: Great: but, for responsive you can use fixed and fluid layouts!

You: Choose and Insert Pre-Defined Layouts: You can choose between fixed-width and responsive layouts and even insert layouts inside of other layouts (quite simple actually).

ME: This is wrong info, because it should be fixed or FLUID.

With the help of the article I mentioned before about fluid, fixed and responsive, I now know that the Toolset Bootstrap theme is a fixed-width responsive theme.
That means that you make use of different 'fixed widths' for different screen sizes, handled by the media queries.

So width a 9/3 column layout these are the fixed widths:

30 px | 870px | 30px | 270px = 1200px (Twitter talks about 1170px) > only when viewport is 1200px and up!
20 px | 700px | 20px | 220px = 960px (Twitter talks about 940px) > only when viewport is between 980px and 1199px.
20 px | 538px | 20px | 166px = 744px (Twitter talks about 724px) > only when viewport is between 768px and 979px.

When the viewport is 767px and below all the columns become a fluid width of 100% and stacked vertically (so no fixed with anymore from that point).

Now I understand this, I also can understand you sometimes want to use a row-fluid nested inside a normal fixed width row. When the viewport changes and with that, also the fixed width, the row-fluid adapts to this change. However, when the viewport is 767 and below, all the fixed width columns and the fluid column will be 100% width (fluid).

With this being said, I don't understand why this is not working: see this example page of your: http://ref.wp-types.com/bootcommerce/product/hand-drawn-t-shirt/.

The structure is:

<pre>

<div class="row">
   <section class="span9">
      <div class="row">
         <div class="span3">
            <div class="row-fluid">
               <div class="span4"></div>
               <div class="span4"></div>
               <div class="span4"></div>

</pre>

So the three small images under the big images are in a row-fluid, 3 * span4 makes 12. However, when I want to nest a normal row inside the span3, that's also possible. However, then is must be 3 * span1 makes 3, like the row above which has a span 3. This is also what you explain on http://wp-types.com/documentation/user-guides/how-to-use-the-grid-system/ under 'Nested grids'.

However, changing the HTML on this product page to what I explained above, is not working because it simply doens't fit. But, if you read Twitter bootstrap explenation, this should work, and there actually isn't any difference is how it looks or behaves. So this should work also, but isn't:

<pre>

<div class="row">
   <section class="span9">
      <div class="row">
         <div class="span3">
            <div class="row">
               <div class="span1"></div>
               <div class="span1"></div>
               <div class="span1"></div>

</pre>

But this is EXACTLY the same point of my first post. Because there you are talking about the single product page also (this one: http://ref.wp-types.com/bootcommerce/product/hand-drawn-t-shirt/).

YOU: Our product has an image that will occupy 3 columns and our product details which will be 6 columns, of the total 9 columns that make up our content area. In this case we want the content to be directly related in pixels to the width of the page – we will use the basic grid, so we will apply the .row class.

The product image and the description is nested inside a FIXED WIDTH ROW of 9 columns. I just doens't make a difference if you nest an other row as fixed width with two columns of 3 and 6 (makes 9) or when you insert a fluid widht row with spans of 4 and 8 (makes 12)…

Can you agree with me this time? You can try it and you see it makes no differce at all. The only strange thing is that it wans't working for the 3 small product images because one image didn't fit in the row anymore, but thats strange because have a fixed width row width 3 columns of span1 nested in a column of 3 spans should work!

Other questions:

1) what are you using for syntax highlighting? Maybe Google prettify? Can I use the same for having code snippets being highlighted in my posts?
2) can I also use this template like it is, thus 'fixed-width', but without the responsive part (so I don't want to work with the mediaqueries).

Thanks!