Announcement

Collapse
No announcement yet.

White space/line break issue with Article titles

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • [Bug / Issue] White space/line break issue with Article titles

    Off of a fresh install of vBulletin 5.4.5, I'm having a weird issue where the titles in our Article section (Article Channel Display Module) have a line break at about 50% on every width besides the smallest width. I cannot figure out why. It does it in every style, including the default vBulletin 5 style and even a fresh no parent "Test" style that I made just a minute ago.

    It also does it no matter what layout I select. I have also rebuilt the styles once already. I'm viewing my site on a 1080p monitor but even if I stretch the window across two monitors, it still adds in a line break at around 50% of the title.

    You can see what I mean here: http://totalgamingnetwork.com/

    I've also added an image.

    I have no idea what's causing this or what the first thing is I can do to fix it so that the title properly spans across the full width of the section before the need for a line break.

  • #2
    This is to do with the font size which you have increased. The area for the titles doesn't span the full width as far as I am aware.
    It's not actually a bug, it's the way it is designed. The larger font size is causing it to fill the available space and wrap down.

    I will have a look later to see if anything can be done easily with css.
    MARK.B | vBULLETIN SUPPORT

    TalkNewsUK - My vBulletin 5.5.2 Demo
    AdminAmmo - My Cloud Demo

    Comment


    • #3
      Originally posted by Mark.B View Post
      This is to do with the font size which you have increased. The area for the titles doesn't span the full width as far as I am aware.
      It's not actually a bug, it's the way it is designed. The larger font size is causing it to fill the available space and wrap down.

      I will have a look later to see if anything can be done easily with css.
      The problem with that is that the words wrap at the 50% mark in that space on every style, as mentioned. The only style with the larger font size is the TGN one, but they all get hit at around the 50% mark.

      If you select the others from the dropdown at the bottom, it shows the same issue.

      In fact, it shows an additional issue when I go to the default vBulletin 5 style.

      Click image for larger version

Name:	vb5 Default.jpg
Views:	64
Size:	182.1 KB
ID:	4404744

      Look at the part where it lists the time and number of comments. The time is literally getting split up and getting shoved down an extra line.

      I even made the page layout to full width and you can still see it happening in the titles:

      Click image for larger version

Name:	title span 2.jpg
Views:	32
Size:	170.7 KB
ID:	4404745

      I did notice something. The same issue that I have is happening on the vbulletin.com site with the article titles. It took a bit to find a title that was long enough, but if you go to https://www.vbulletin.com/forum/articles/page11 you can see the same issue.

      I've included screenshots of that happening on both the current Winter theme and the selectable "vBulletin Default Theme."

      Click image for larger version

Name:	vb5article.jpg
Views:	34
Size:	116.4 KB
ID:	4404746Click image for larger version

Name:	vb5article2.jpg
Views:	30
Size:	88.1 KB
ID:	4404747

      Comment


      • #4
        It is designed that way. The post header uses this CSS:

        Code:
        .conversation-list.stream-view .list-item-header .post-header {
            width: 60%;
        }
        You can override this with custom CSS in the css_additional.css template.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud customization and demonstration site.
        vBulletin 5 Documentation - Updated every Friday. Report issues here.
        vBulletin 5 API - Full / Mobile
        I am not currently available for vB Messenger Chats.

        Comment


        • #5
          Originally posted by Wayne Luke View Post
          It is designed that way. The post header uses this CSS:

          Code:
          .conversation-list.stream-view .list-item-header .post-header {
          width: 60%;
          }
          You can override this with custom CSS in the css_additional.css template.
          Thank you so much! I was able to move that out to 95% and it worked great.

          Comment

          Related Topics

          Collapse

          Working...
          X