golfads VIP
Total posts: 216
27 Nov 2013 09:31

Well, this is not really a bug but guess it's the only category where I can report this issue, it's about the full article layout, just see on this link

The article info box is mixed with the rating box! We have tried to play a bit with the css layout as it is definitely related to the css but cannot get it correctly, can you please help us on this?

Last Modified: 02 Mar 2014


pepperstreet VIP
Total posts: 3,837
27 Nov 2013 11:50

Link or screenshot is missing.

Thanks in advance.


golfads VIP
Total posts: 216
27 Nov 2013 11:58

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


golfads VIP
Total posts: 216
27 Nov 2013 11:59

golfads VIP
Total posts: 216
27 Nov 2013 12:00

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


stblink VIP
Total posts: 501
27 Nov 2013 12:57

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.


golfads VIP
Total posts: 216
27 Nov 2013 13:05

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.


stblink VIP
Total posts: 501
27 Nov 2013 13:31

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.


pepperstreet VIP
Total posts: 3,837
27 Nov 2013 20:59

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...


golfads VIP
Total posts: 216
29 Nov 2013 07:35

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


pepperstreet VIP
Total posts: 3,837
29 Nov 2013 22:08

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


pepperstreet VIP
Total posts: 3,837
01 Dec 2013 14:24

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.


golfads VIP
Total posts: 216
01 Dec 2013 17:42

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.


golfads VIP
Total posts: 216
02 Dec 2013 00:23

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 ._. )

Powered by Cobalt