Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 Overlapping on Mobile
On the mobile version the text in the posts is overlapping on the right of the screen. The maintitle class is also cut off.

Attached 1 File(s)
Attached Image
Offhand I don't know what the issue is but it is probably because the maintitles need to be overridden. You can use the #mobile id to override any class though.

Try this at the bottom of your css, it will not look good, but see if it makes it normal again and we'll go from there:

#mobile .maintitle {
font-size: 12px;
text-shadow: 0 1px 1px rgba(0,0,0,0.5);
padding:7px 0px 7px 7px;
background-color: #6c0a0a;

email: :: blog: John C.
Added that, but it didn't change anything as far as I can tell.
There's an error in your stylesheets somewhere that's preventing the styles from parsing correctly. You can tell by putting the above styles at the top of your stylesheet, as they'll load correctly there. That stylesheets is huge so I didn't look through, but run it around some online checkers and you'll find it soon enough.
I put my CSS through two validators and fixed anything wonky, still no results on mobile though. Tried moving it up through the CSS too. Now it's back at the bottom.

This post has been edited by DesiTack: May 18 2018, 12:20 AM
Found a missing right brace after a media min-width query on line 2077. Won't immediately fix your problems, but still.

As far as the maintitle cutting off, this is an issue of fixed pixel widths on the .tableborder and .maintitle a elements. You can use media queries to specifically target phones, or use percentage based widths. The adjustments that worked for me were removing the .tableborder and .maintitle a widths, and applying width:100%; to .maintitle

This post has been edited by Dusty: May 18 2018, 11:56 AM
Thank you Dusty!

My tableborder doesn't have a specified width, but setting my maintitle to like 96% and removing the specified width in maintitle a seems to have worked to fix those.

The media query's been taken out, I was using it to remove a sidebar which I've plucked out completely, so hopefully that won't be an issue anymore.

Now I just have the actual posts overlapping on the right side to worry about. I got the actual post/text to stop overlapping by changing the postcolor width to a percentage, now it's just that the black background overlaps the grey framing for it.

That black background is .new-post but doesn't have a specified width.

This post has been edited by DesiTack: May 21 2018, 07:45 AM
Ah, I see. .tableborder does have a percent width, it's just part of the mobile CSS rather than the CSS you can generally edit. To be honest, I don't know what you're going for in terms of appearance, so I can't suggest an edit that'll fix it all in one go. The 100% width applied by the mobile CSS is causing that overflow of the black box, but you can !important that away in #mobile-wrapper .tableborder. Setting it to display:inline-block; will keep it all wrapped up, but still left justified - plus, the banner gets wonky then. Is there any chance you have a mockup of what it's supposed to look like?
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll