Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Template manager layout is tied to narrow layout only

Featured Lock Resolved Issue
I am designing a site for a news portal using the wide width of 1170 px. I tried to fit 2 span4 and a span5 in the same row and that is not possible.

Looking arround in the css i discovered that in bootstrap.min .css the following are defined

.span5 {
width: 380px
}
.span4 {
width: 300px
}

which means to me that 2*span4 = 600px + 1*span5= 380px total 980 px which must definetely fit in one row of a 1170px with template.

But the 3rd span always goes in the next line messing up my design.

I suspect that the layout designer is tighted down to a standard narrow design of 940px which messes up my design

It is a requirement that the site uses the 1170px width so please give me some instructions as to how make the template manager layout designer take in account the required width instead off the narrow one

9 Answers

pepperstreet

More than a month ago #Permalink
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

More than a month ago #Permalink
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

More than a month ago #Permalink
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.



Thanks but that is not so. 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. It is not that simple I am afraid and I don't want to start feedling with the template core css. I am asking for a robust siolution that wont be canceling further template updates

pepperstreet

More than a month ago #Permalink
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

More than a month ago #Permalink
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.


I managed to make way with it but it is not a good solution. 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.

Though nice it is too far from a ready to use template and is a mess with several css customizations that i can't even begin to figure out why are causing mayhem

pepperstreet

More than a month ago #Permalink
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".

Dimitris Sampson

More than a month ago #Permalink
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! ;)


Thank you

Dimitris Sampson

More than a month ago #Permalink
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".


You are absolutely correct in your observations. The problem is the gutter padding.


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 105
Toufiq

Toufiq

Total Accepted Answers: 61
Sifat

Sifat

Total Accepted Answers: 44
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 17
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 17

118

Templates

305943

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us