Attention:

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.

timewontforgetv2.jcink.net

Attached 1 File(s)
Attached Image
PM
#
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.

https://jcink.com/main/wiki/mobile-mode-skinning

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:

CODE
#mobile .maintitle {
vertical-align:middle;
font-weight:bold;
font-size: 12px;
letter-spacing:1px;
text-shadow: 0 1px 1px rgba(0,0,0,0.5);
padding:7px 0px 7px 7px;
color:#FFF;
background-color: #6c0a0a;
}



signature
email: admin@jcink.com :: blog: John C.
#
Added that, but it didn't change anything as far as I can tell.
PM
#
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.
PM
#
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
PM
#
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
PM
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll