Layout Issue

Link or screenshot is missing.

Thanks in advance.

Strange! I added the link and it disappeared! Here is the link

Seems I cannot add any link, it always disappears! Try another one http://www.golfmediaplus.com/international-golf-resort-directory/user-item/65-golfmediaplusceo/9-5-star-resorts/3-test-resort.html

Now it's working, thanks and sorry for the delay.

You have an aligment problem (checked with firefox) on the rating template.

Check the screenshot (in the screenshot the css is already corrected so it is displays normal, in ur firefox u should see that the right side overlays the rating stars). On the lower screen you will see class span2 and span8... but this is bootstrap classes. If you change it will affect other bootstrapped pages.

You should add other classes so that it stays class="span2 my_class" and you can correct them using css. Unless someone can suggest another easy way to do it.

So far, I tried with Joomla default template, same issue, I have tried templates from Joomshaper, Yootheme, Joomlashine and SmartAddons, all the same layout issues! Finally I decided to move ahead with Rockettheme and still same issue!

Guys, Sergey, as I mention you, our website is participating to an ICT awards and on Monday next week, these guys are going to check my site to rate it, a quick solution shall be really appreciated from your side as I cannot get through this on my own, thanks again.

Try adding this code to ur css file:

.menu-international-golf-resort-directory #rt-mainbody .article-info .span8 {

width:59.746% !important;

display:table !important;

}

And let me know if it works.

Changing only span8 is not a solution. The real culprit is the span2. Actually the first one... but it is also not to blame for its content: The too large rating table! The table plus stars and (long) labels simply needs its space... the content HAS to go in one line horizontal. Hence the "nowrap" attributes. The table behaves like it should behave. So, it is not a "bug" of the table, nor cobalt, not bootstrap defaults. It is a logical result...

Conclusion:

The surrounding % SPANs can't represent and keep the layout width. I mean, the % CSS values can't match the actual content.

Suggestions:

So, i would recommend to change the SPANs in your template file!. Imagine your wanted layout.... i assume everything should align horizontal. Every change has to sum-up to a total of 12! i.e.:

span4 / span4 / span4

This gives 3 equal wide areas... about 33% each.

Start thinking about the actual size of all 3 areas.... which part needs how much space?

The table and the info block are almost equal. The avatar is the smallest. So, something like the following might fit better:

span6 / span5 / span1

**or **try a variant like:

span5 span5 span2

HeadsUp: - The info block is a horizontal Definition list. All infos are meant to be in a horizontal line! Currently, the whole info is squashed into a limited area! That might look messy. You could remove/rename the current CSS class... "dl-horizontal user-info" in the template. Maybe rename it to "dl-vertical user-info"... my temporary test looks like this:

Sidenote: - I would shorten the rating labels. Get rid of the extra word "rating". - The default stars are really big, IMHO. Take a smaller variant. - The avatar belongs to the username. Currently it is separated in an extra area and SPANx. Personally, i would try to place it above or under the info-block...

Where should I try to change the position of the avatar 'SPANx', in the full article template layout?

HeadsUp: Your JoomForest template has the same issues like Joomlart T3 v3: Disappearing elements due to script conflicts.

Where should I try to change the position of the avatar 'SPANx', in the full article template layout?

I noticed you are still switching template frameworks ;-)

This might help you with the known issue "disappearing elements". WARP does not have this issue.

But it will not solve your rating table overlapping. This layout depends on the provided Cobalt article template. It will use bootstrap SPAN classes for layout. You still have to adjust those spans...

Excerpt from page output:

As you can see, the default span sizes are 2 / 8 / 2.

Yes, finally I came out to the final decision to choose warp framework as there are less issues, you are right, still need to work on the overlapping rating issue, will try to move the avatar down tomorrow and see if that's solve the layout issue, hope it will work finally, need to complete our website and be ready for launching by Monday next week just to be ready for xmas special promo, will keep the forum updated about it.

Hi, thank you very much for all these info, very much appreciated, I will definitely have a look at the bootstrap config and see if there is any issue there.

I was able to bypass the rating overlapping issue by following your initial advices:

1. Changing the rating icon (from stars to tick).

2. Removing the mention of 'Rating' in the rating label column.

See screenshot (it is better now):

It was not necessary to change the position of the avatar (anyway did not know any other place to put it ._. )