CSS Adjustments

010101

nitaaikumar I tested this and it works for me as well so I will add this to my original post. But, I'm curious just for my own peace of mind, why did you choose 991 for the max width and 768 for the min width? In core code I think Flarum sticks with 767 for the min width (which is a 1px difference). And then I'm just not sure how official the 991px for the max-width is? Obviously it works, things look fine... but I'm still curious if those are the best pixel choices... I have no idea.

Anyone else? What pixels should we stick with for min and max widths for @media styles?

@media screen and (min-width: 768px) and (max-width: 991px) {
.container {
width: 100%;
padding-right: 0px;
}
.DiscussionPage-stream {
margin-right: 180px;
}
}

nitaaikumar

010101 The text column width becomes very narrow only from 768px to 991px, not from 767px or for 992px and more. So I just used the exact values to target that issue.

010101

[deleted] Thanks. I was looking at the wrong type of reply box. I'll add this to my original post as well. 🙂

rob006

010101 To make this even more tricky - width of this box depends on "X replied to this" label width. So it still may look fine if you have many replies from people with long nicks. 😛

SqueakyBlum

010101 There would be a way to use wildcards here if the extensions had more consistent css syntax.

010101

Does anyone know yet if any of the above CSS tweaks (minus the user directory one since that's not core) were addressed in the beta 11 release? I'm trying to gauge whether or not the original post of this thread needs to be updated.

It does seem like the composer post box going off screen on mobile might have been fixed. At least for me in a new installation, that particular CSS tweak doesn't seem to be necessary anymore.

jordanjay29

010101 You can see the full diff between the two version on Github here.

010101

jordanjay29 Thanks, but I personally can't tell from that if any of the above CSS is still needed or not. I think maybe one of the rules isn’t needed anymore - the full width rule. Maybe it was never truly needed. I edited the original post; added a comment about that rule.

The rest are most likely still needed as of beta 11, unless someone can prove otherwise.

010101

FYI, I added two rules to the original post. One fixes an odd menu text disappearing issue, and the other is a personal preference; centering post images on mobile.

raafirivero

Is there a way to globally unset the css color rules? Inside the Flarum admin I changed the color of the header bar and now every color throughout my install is affected. Worse, I can't unset the color that's in the box and don't remember the value that was in there before I started. I've resorted to individually tracking down every color declaration throughout the app instead of being able to flush and go back to the defaults.

010101

First post has been updated. Patches tested on beta 15 except for the directory one. The first few are pretty important for iOS users.

010101

Post box on mobile code updated once again in first post thanks to @SychO. And a permanent fix may be a merge away. 😍 Some, or maybe most of the iOS fixes in the first post may not be needed by the time we get to stable. 🆒

010101

I'm removing these from the first post because these issues are fixed starting with beta 16. But, I'm putting them here in case someone still needs them.

Again, these are NOT needed as of beta 16! 👍

Fix double tap on some touch devices (iPad for sure):

Fixed as of beta 16

.DiscussionListItem .Dropdown-toggle.Button {
display: none;
}
.no-touch .DiscussionListItem .Dropdown-toggle.Button {
display: block;
}

Fix post box going off screen on mobile:

Fixed as of beta 16

@media (max-width: 767px) {
    .Composer:not(.minimized) {
        position: fixed;
        top: 0 !important;
    }
}

Fixes odd bug where header menu bar text disappears on mobile:

Fixed as of beta 16

.App-navigation {
    transform: initial;
}

[deleted]

Is this code

.video {
width: 100%;
height: auto;
}

suitable for YouTube video?

010101

[deleted] No, you'll have to search the web for responsive YouTube video CSS solutions. But, I thought the YouTube embeds are already responsive? I know I've never had a problem with YouTube and Flarum.

[deleted]

010101 But, I thought the YouTube embeds are already responsive?

On mobile and tablet view, YouTube video is fully streched (as composer/field allows it to be), but on my laptop (higher resolution) it is left placed, not fully responsive...

Arnold

[deleted] here's my version of this code, which makes youtube videos responsive

.video, span[data-s9e-mediaembed="youtube"] {
  width: 100%;
  max-width: 100% !important;
  height: auto;
}

010101

Arnold Thank you! Added to first post.

« Previous Page