Posters of the week destroy mobile layout

Problems, requests or comments regarding forums or the main site go here.
User avatar
Nasuada
Posts: 645
Likes:
Joined: Sat Jun 06, 2020 1:05 pm

Posters of the week destroy mobile layout

Post by Nasuada »   0 likes

I recognized a view days ago that the Avatar-Images at the end of the board will „destroy“ a bit the layout.
When you on the Startpage of the board, you can scroll a bit to the right and when you scroll down to the images, you can see the reason for that.

See my screenshot.
058B86C3-F06E-4C7D-8814-9A487228A377.jpeg
You do not have the required permissions to view the files attached to this post.
[Image]
User avatar
mimzy
Posts: 1434
Likes:
Joined: Fri Aug 12, 2011 7:00 am

Re: Posters of the week destroy mobile layout

Post by mimzy »   0 likes

I see, but I don't know how to fix this properly. Maybe somebody who is better at CSS/HTML than me can give a hint.
User avatar
Nasuada
Posts: 645
Likes:
Joined: Sat Jun 06, 2020 1:05 pm

Re: Posters of the week destroy mobile layout

Post by Nasuada »   1 likes

Well, you can try that one:

Code: Select all

/* Poster of the Week Mobile Fix */
@media only screen and (max-width: 940px) {
  /* comes into effect for screens less than or equal to 940 pixels */

	page-body, table {
		width: 100%;
		background-color: blue;
}
	page-body, table img{
		width: 120px;
		height: 120px;
		padding: 0 10px;
		}
}

@media only screen and (max-width: 720px) {
	page-body, table {
		width: 100%;
		background-color: green;
		}
	
	page-body, table img{
		width: 80px;
		height: 80px;
		padding: 0 10px;
		}
}

@media only screen and (max-width: 530px) {
	page-body, table {
		width: 100%;
		background-color: yellow;
		}
	page-body, table img{
		width: 30px;
		height: 30px;
		padding: 0 10px;
		}
}

@media only screen and (max-width: 320px) {
	page-body, table {
		background-color: pink;
		}
	page-body, table img {
		display: none;
}
IMPORTANT NOTE:
I set on each @media Part a different color, so you can view very quick on wich width the color of the background is changed including the size of the images. It's just for a internal controlling.
For the final release in public, remove that colors by simple delete the line (example: background-color: blue;)
Pls. check my CSS on other areas on the board, if something has changed to what we would not change. For that check, the background colours are helpfully to, because you will see it immideatly ;-).

On the last Screensize (320px) I decide to remove the thumbnails, because they would be so tiny to fit it on the page, that it make no sense for me. But you can set your own dimensions if you like. Names and posting will still be there, but not looking perfect on a small screen because the text have no space.

If you give a bit of more controlling around that part, like hiding the full area of "Posters of the week" to in the last step (smaller than 320 pixel), you need to create a new CSS defintion around this part like a

Code: Select all

<div class="posterofweek">
THE PHP STUFF FOR THAT AREA
</div>
I think the posters of the week part is in the footer of the layout. There must be a line with "<h3>Posters of the week</h3>", so place the <div class="posterofweek"> before and than after the "</table"> of that are the </div>.

This is just a quick fix from my side. There are much more ways to handle thumbnails / gallerys in a grid, controlled over CSS, but for that you need to code some more and lot of things will be complicated with phpBB (or general if you working with Databases in the Background)

If you need any more help, let me know. Also over PM.
[Image]
User avatar
mimzy
Posts: 1434
Likes:
Joined: Fri Aug 12, 2011 7:00 am

Re: Posters of the week destroy mobile layout

Post by mimzy »   0 likes

Thanks, Nasuada! I will try this later this week.
User avatar
mimzy
Posts: 1434
Likes:
Joined: Fri Aug 12, 2011 7:00 am

Re: Posters of the week destroy mobile layout

Post by mimzy »   1 likes

The fix has been implemented :thumbsup

If anybody has problems with the layout, let me know.
User avatar
Nasuada
Posts: 645
Likes:
Joined: Sat Jun 06, 2020 1:05 pm

Re: Posters of the week destroy mobile layout

Post by Nasuada »   0 likes

Looking great for me. Thanks for fixing.
[Image]
User avatar
Sully23
Posts: 1335
Likes:
Joined: Wed May 10, 2017 7:41 pm

Re: Posters of the week destroy mobile layout

Post by Sully23 »   0 likes

Nasuada wrote: [Image]
Me and the cat
User avatar
Nasuada
Posts: 645
Likes:
Joined: Sat Jun 06, 2020 1:05 pm

Re: Posters of the week destroy mobile layout

Post by Nasuada »   0 likes

Not sure what you will say, but I test it right now again and looks ok under mobile Safari.
[Image]
Post Reply