Support Forums

pepperstreet wrote:

Hello Dimitris, as far as I know you have to use a total amount of 12 spans (columns)! You are trying 8+5=13 ? Bootstrap will break your last "exceeding" column into the next line... which is the SPAN5. I guess, you have to rethink your layout and columns.

Dimitris Sampson wrote:
I use a span3 +span6 + span3 = total 12 and i still get the last span3 at the bottom of the layout position when the page is displayed.

pepperstreet wrote:

Dimitris Sampson wrote:
I use a span3 +span6 + span3 = total 12 and i still get the last span3 at the bottom of the layout position when the page is displayed.

Thanks for your feedback. Interesting issue though, can you describe in more detail where and what you want to layout. I mean the exact position and module type & style etc.

Dimitris Sampson wrote:
... I was trying to fit left and right vertical positions to the component area. The problem i get is that those areas are meant mostly for ad publishing and will not conform to standard google ads size 300x250 since they are automatically stretched and skewed even though they fit on screen. The entire NewsPlus template is not taking in account modern wide template design. I tried to everride css span values only to make things very bad. It will take me weeks to figure out optimum new sizes for the spans but I am convinced they were featured to conform to a 940px wide template.

pepperstreet wrote:

Hello again, just some thoughts and suggestions for the "line-breaking columns"...

I tried to investigate the demo pages of "News Plus" and "Corporex". I was able to re-create your behavior with temporary changes via browser developer tools. I think it might be the same cause and effect that you noticed on your installation.

The crucial part in the structure is the Bootstrap "row-fluid" usage. Which results in % and fluid spans/gutter. If you turn it into a regular "row", you will get the fixed pixel spans/gutter defaults. This is the moment where the sidebar is breaking into a new line!

I have compared the "Corporex" template, which seems quite similar in the main body layout. If you turn the row-fluid into a regular row... it does work! The layout stays solid and in-place. Why is this: Hence the visual difference in both templates. The "News Pro" has some light grey borders as "vertical dividers". Those 1 or 2 pixels seem to be the culprit! They seem to be added and exceed the total allowed width of the container.

So, you might have some options to "fix" it:

Either adjust the default gutter, or remove the borders. Maybe a higher "negative margin" to pull everything 1-3 pixels to the left might help as well.
I have also played with a higher container width. Did you try to set the main width in your template style? Try 1200px. It worked for me.

Good luck!

pepperstreet wrote:

Dimitris Sampson wrote:
... I was trying to fit left and right vertical positions to the component area. The problem i get is that those areas are meant mostly for ad publishing and will not conform to standard google ads size 300x250 since they are automatically stretched and skewed even though they fit on screen. The entire NewsPlus template is not taking in account modern wide template design. I tried to everride css span values only to make things very bad. It will take me weeks to figure out optimum new sizes for the spans but I am convinced they were featured to conform to a 940px wide template.

Thanks for your background infos. Sorry, but I can't really re-create and see your problems: The demo site has only Main/Sidebar-Right layout. As far as I can see, it nakes use of the standard defaults in Bootstrap v2. I think the Helix2 basis is quite good in customization... and NewsPlus seems to have a "wide" layout by default. You should be able to set it even wider in your template style parameters... In general, a 3 column layout can be problematic anways, because of the limited main content space, and the flexible gutter between content and sidebars... maybe the gutter padding should be smaller.
There seems to be a row-fluid design, too. Maybe this %-based layout is the cause for your "stretching" sidebars and the ads-images etc. You might check the images if they get a "responsive" max-width property... so, you might have to override their CSS to keep them from "stretching/squishing".