Pushing Body Content So Its Hiding Last Post

[Former Member]

Forum URL: (private)

For some reason, on Mobile some things are hidden. Why's that? I haven't used many widths or margins or anything. ??

[Craig]

Hey Majority

Could you edit your opening post and add a URL. It will help the staff see what you see. Additionally, could you expand on what is hidden. Bare in mind that content may cause it to stretch and push some things out of view. For example, a wide image, or a long string of text.

[Former Member]

Oh sorry! the URL is gray-and-gherkin.proboards.com/

The last posts, who commented on last post, is hidden.

[Craig]

Ok, yes, see you have that description scroll box, which has a defined width of 400px. You also have the width of the content set to a width of 80%, width a padding of 70px each side. Let's assume that the width on your screen is 1000px.

1024 * 0.8 = 800

800 - 70 - 70 = 640

640 - 400 = 240

So all of the other content within that area has to be less than 240px for it to fit in without it being push off screen.  That is a big ask.

One thing you could do it have different widths for mobile. So perhaps have the width be 100% instead of 80%, reduce the padding by half, and decrease the description box by 100px or so. Would that be something you would want to try?

[Former Member]

Ohh I see. Yes I would like to try that! Can you tell me how though? I'm not sure how to change all that, especially the mobile-only size changer.

[Craig]

You can specify screen type and width in CSS:

@media only screen and (max-width: 1000px) {
 
}

Everything between those { and } will only execute on smaller screens, that have a width upto and including 1000px. So, for your forum and what i suggested changing:

       @media only screen and (max-width: 1000px) {

#content{
width: 100%!important;
}

.content_wrapper {
padding-left: 40px!important;
padding-right: 40px!important;
}

.BOARD_DESC {
width: 350px!important;
}

}

Try adding that to the bottom of your stylesheet, and have a mess around with the values until you get a desired look. Bare in mind that some viewing areas may be smaller than your mobile device, so you may want to leave a little leeway in the board description, for example.

[Former Member]

Hmm for some reason that did not work! For experimentation, I changed the board description really low, to 150px; but nothing seems to be changing.

[Former Member]

-sorry, ignore this-

[Former Member]

bump, still needs fixing