Topic icons too low on viewforum in mobile with long topic title

For support and discussion related to templates and themes in phpBB 3.3.
Post Reply
CarolC1
Registered User
Posts: 653
Joined: Sat Dec 02, 2006 4:26 pm

Topic icons too low on viewforum in mobile with long topic title

Post by CarolC1 »

It seems like this must be answered somewhere already, but I'm not finding it.

Can anything be done to get the topic icons to stay in place on viewforum when a topic title is long?

It is not too bad on a PC

topic_icons_PC.PNG
topic_icons_PC.PNG (5.42 KiB) Viewed 2413 times
but it is more noticeable on a 375 px width.

topic_icons.PNG
topic_icons.PNG (5.99 KiB) Viewed 2413 times
Thanks!
User avatar
pit-PL
Registered User
Posts: 3212
Joined: Sat Nov 21, 2009 12:24 pm

Re: Topic icons too low on viewforum in mobile with long topic title

Post by pit-PL »

In responsive.css after @media (min-width: 701px) and (max-width: 950px) {
add

Code: Select all

	dl.row-item dt {
		background-position: 5px 50%;
	}
CarolC1
Registered User
Posts: 653
Joined: Sat Dec 02, 2006 4:26 pm

Re: Topic icons too low on viewforum in mobile with long topic title

Post by CarolC1 »

Thanks for your reply. :D

I should have said the board is 3.3.2 prosilver, in case it matters.

Here is what I got.

topic_icons2.PNG
topic_icons2.PNG (2.82 KiB) Viewed 2289 times
topic_icons3.PNG
topic_icons3.PNG (3.06 KiB) Viewed 2289 times
This is my edit.

Code: Select all

@media (min-width: 701px) and (max-width: 950px) {
	dl.row-item dt {
		background-position: 5px 50%;
	}

	ul.topiclist dt {
    	margin-right: -410px;
	}

	ul.topiclist dt .list-inner {
    	margin-right: 410px;
	}

	dd.posts, dd.topics, dd.views {
    	width: 80px;
	}
}
Thanks!
User avatar
pit-PL
Registered User
Posts: 3212
Joined: Sat Nov 21, 2009 12:24 pm

Re: Topic icons too low on viewforum in mobile with long topic title

Post by pit-PL »

Refresh browser cache (CTRL+F5) to see changes.
CarolC1
Registered User
Posts: 653
Joined: Sat Dec 02, 2006 4:26 pm

Re: Topic icons too low on viewforum in mobile with long topic title

Post by CarolC1 »

I'm sorry, it's stlll not working. I had purged both caches before, but did it again to be sure. Thanks.

Also, I have been checking in Responsinator, which is not always accurate, but I drove to McDonald's to view it on a real mobile device, and it was the same there. (Don't have wifi here.)

In the process of trying to fix the topic icon position yesterday, I discovered another issue, that I did not notice before. The same issue is also on the live board, where I have never edited responsive.css. When I made the second set of screenshot images yesterday, I made long titles by holding down a key on the keyboard. In viewtopic, the long title should wrap, but it does not. It goes in one straight line across the width of the screen, continuing over the avatar.

I turned off all extensions and purged acp and browser cache. Still didn't wrap.

I had previously edited 7 files, so I uploaded the 7 original unedited files, purged acp and browser cache, still didn't wrap. So this 3.3.2 board with original files does not wrap a XL title in viewtopic. It does wrap in viewforum.

I diffed viewtopic with an original to be sure it hadn't been edited, but they were identical.

Now I am thinking, do I want to upload all new clean files entirely (to be absolutely sure I'm not missing something) and see if the problem is still there? This problem is unlikely to cause any real issues in real life, because people don't post titles as long as the one I made while testing. Tried to check the Tracker to see if anyone reported anything about long titles not wrapping, and didn't see anything, but I've missed stuff while searching the tracker before.
User avatar
Brf
Support Team Member
Support Team Member
Posts: 53398
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: Topic icons too low on viewforum in mobile with long topic title

Post by Brf »

Here is a before-and-after example for you showing how pit-PL's code fixes the problem:

Before:
wrap1.png
After:
wrap2.png
CarolC1
Registered User
Posts: 653
Joined: Sat Dec 02, 2006 4:26 pm

Re: Topic icons too low on viewforum in mobile with long topic title

Post by CarolC1 »

Hi, thanks! That's beautiful. It's perfect. I was assuming the code provided was right, now that I found another issue with the board. I was coming back to edit my post to that effect, thinking I would try to find what is causing the wrapping problem first, and if not, post it in a separate topic.

viewtopic.PNG

Here is what I am seeing in viewtopic. It did not go away when I replaced the edited files with clean files and purged both caches. I was trying to talk myself into uploading a clean board to see if it's still there, since I already replaced all edited files with originals and the only possibility is I missed something. However the upgrade was recent and I saved copies of all edited files and I really don't think I missed anything. May still do that. (Extensions are turned back on in the image, but it's the same with them off.)
User avatar
Brf
Support Team Member
Support Team Member
Posts: 53398
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: Topic icons too low on viewforum in mobile with long topic title

Post by Brf »

Why would someone want to use 100 Xs as a topic title? Break it into sensible words.
CarolC1
Registered User
Posts: 653
Joined: Sat Dec 02, 2006 4:26 pm

Re: Topic icons too low on viewforum in mobile with long topic title

Post by CarolC1 »

It works! It displays and wraps properly in viewtopic.

OK, why does it work with real words and spaces, and not with a solid line of characters? I had no idea it would make a difference. What a relief, because I didn't want anything to be wrong with our new board. Thanks!

viewtopic.PNG

I have the edited responsive.css up now and purged via acp and browser, and the topic icon is still too low. I can check it on a mobile screen tonight, but there appears to be no change on the PC here.

The code in your black screenshot looks different than the 'Find' code in the 'After, add' edit instructions. Does it matter?
User avatar
Brf
Support Team Member
Support Team Member
Posts: 53398
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: Topic icons too low on viewforum in mobile with long topic title

Post by Brf »

It depends on which responsive section you are trying to edit. I edited the <=700 section, while pit-PL edited the 701-950 section.
CarolC1
Registered User
Posts: 653
Joined: Sat Dec 02, 2006 4:26 pm

Re: Topic icons too low on viewforum in mobile with long topic title

Post by CarolC1 »

The small screen up to 700 has the icon centered now.
But the responsiveness of the banner is broken, it stays big when it should resize smaller.
So I removed that edit.
Code and result.

Code: Select all

@media (max-width: 700px) {
	dl.row-item dt {
		background-position: 5px 50%;
	.responsive-hide { display: none !important; }
	.responsive-show { display: block !important; }
	.responsive-show-inline { display: inline !important; }
	.responsive-show-inline-block { display: inline-block !important; 
	}
icon_centered.PNG
icon_centered.PNG (4.62 KiB) Viewed 1710 times

Code and result.

Code: Select all

@media (min-width: 701px) and (max-width: 950px) {
	dl.row-item dt {
		background-position: 5px 50%;
	}

	ul.topiclist dt {
    	margin-right: -410px;
	}

	ul.topiclist dt .list-inner {
    	margin-right: 410px;
	}

	dd.posts, dd.topics, dd.views {
    	width: 80px;
	}
}
788_width.PNG
788_width.PNG (8.31 KiB) Viewed 1625 times
Thanks!

EDIT TO ADD: If this sounds like mass confusion, it is. I went back and tested again with only the 701-950, and only the 700 and below. Now I can get the 701-950 working and centering. First time for that. Why it wasn't before, I don't know, because I didn't change the code and I've purged it both ways a dozen times. It is working between 701-950 and the banner is the right size.

The wide screen still has the topic icon low.
It's's not working above 950, but I asked about mobile, and above 950 is not mobile.
Is there a way to make the topic icon centered across all widths?
User avatar
pit-PL
Registered User
Posts: 3212
Joined: Sat Nov 21, 2009 12:24 pm

Re: Topic icons too low on viewforum in mobile with long topic title

Post by pit-PL »

In content.css find /* Position of topic icon */ and change 95 to 50.
CarolC1
Registered User
Posts: 653
Joined: Sat Dec 02, 2006 4:26 pm

Re: Topic icons too low on viewforum in mobile with long topic title

Post by CarolC1 »

It works! :D
It looks really good.
The icons are staying centered at all widths. Nothing makes them move off center.
It is working with only the content.css edit, and no edits to responsive.css.
The banner is unaffected.

Thank you very, very much!!!
Now we can use topic icons to help people find the posts they want.
Can't thank you enough!!! :D
Post Reply

Return to “[3.3.x] Styles Support & Discussion”