Posters of the week destroy mobile layout
Posters of the week destroy mobile layout
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.
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.
You do not have the required permissions to view the files attached to this post.
[Image]
Re: Posters of the week destroy mobile layout
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.
Re: Posters of the week destroy mobile layout
Well, you can try that one:
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
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.
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;
}
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>
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]
Re: Posters of the week destroy mobile layout
Thanks, Nasuada! I will try this later this week.
Re: Posters of the week destroy mobile layout
The fix has been implemented
If anybody has problems with the layout, let me know.
If anybody has problems with the layout, let me know.
Re: Posters of the week destroy mobile layout
Me and the catNasuada wrote: [Image]
Re: Posters of the week destroy mobile layout
Not sure what you will say, but I test it right now again and looks ok under mobile Safari.
[Image]