Media queries are killing me. Help!

I’ve already attempted to get this sorted (thanks @ralphm and @cpradio for your help to date) but I’m still stuck.

I have a Discourse instance with custom header links. It works great on some devices but it’s broken for many mobiles.

This is what it looks like on an iPhone6+ (which is how it should look on all devices)

But this is what it looks like on an iPhone6 (and apparently a Nexus5 so likely other devices as well). The bar is covering some of the header items and I don’t actually know where that HOME link is coming from – I thought I’d removed it from everywhere!

Here is my CSS:

// header links

.mobile-view .hidden-for-mobile { 
    display: none; 
}
.add-header-links {
    margin-left: 0 !important;
}

@media screen and (max-width: 940px) {
    .nav-link-container {
        display: none;
    }
}
@media screen and (max-width: 830px) {
    .nav-link-container {
        display: none;
    }
}
@media screen and (max-width: 743px) {
    .nav-link-container {
        display: none;
    }
}
@media screen and (max-width: 667px) {
    .nav-link-container {
        display: none;
    }
}
@media screen and (max-width: 650px) {
    .nav-link-container {
        display: none;
    }
}
@media screen and (max-width: 525px) {
    .nav-link-container {
        display: none;
    }
}

.nav-link-container {
    display: inline;
    li { 
        display: inline-block;
        float: right;
        a {
            color: rgb(255, 255, 255);
            text-decoration: none;
            text-align: center;
            font-family: 'Open Sans'; 
            line-height: 48px;
            min-width: 90px;
            font-size: 15px;
            padding: 0 1em;
        }
    }
}

And from the </head>

<style>

/* These are here so that they display in the admin screens also */

.nav-link-container {
    display: inline;
    li { 
        display: inline-block;
        float: right;
        a {
            color: rgb(255, 255, 255);
            text-decoration: none;
            text-align: center;
            font-family: 'Open Sans'; 
            line-height: 48px;
            min-width: 90px;
            font-size: 15px;
            padding: 0 1em;
        }
    }
}

.d-header .icons .icon {
     float: right;
    color: #EC7825;
}

.add-header-links {
    float: left;
    padding-left: 0;
}
</style>

<script type="text/discourse-plugin" version="0.2">
api.decorateWidget('home-logo:after', helper => {
    const showExtraInfo = helper.attrs.minimized;
        if(!showExtraInfo) {
            return helper.h('ul.nav-link-container', [
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'https://www.feverbee.com/resources', 
                        text:'RESOURCES',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'https://experts.feverbee.com/', 
                        text:'DISCUSSIONS',
                        target:'_self'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://newyork.feverbee.com/', 
                        text:'EVENTS',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://ondemand.feverbee.com/', 
                        text:'TRAINING',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://www.feverbee.com/consultancy', 
                        text:'CONSULTANCY',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://www.feverbee.com/about-us', 
                        text:'ABOUT',
                        target:'_blank'
                    })
                ]),
                helper.h('li', [
                    helper.h('a.nav-link', {
                        href:'http://www.feverbee.com', 
                        text:'HOME',
                        target:'_self'
                    })
                ])
            ]);
        }
});
</script>

Where things are getting complicated is that responsive emulators aren’t rendering the mobile version of the CSS, which is:

@import "theme_variables";

.d-header .icons .icon {
    color: $header_primary;
}

// header links
.mobile-view .hidden-for-mobile { 
    display: none; 
}

.nav-link-container {
  display: inline;
}
.nav-link-container  li { 
  display: inline-block;
  float: right;
}
.nav-link-container  a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  text-align: center;
  font-family: 'Open Sans'; 
  line-height: 48px;
  min-width: 90px;
  font-size: 15px;
  padding: 0 1em;
}

Can anyone see where I’m going wrong?

1 Like

I mentioned in the meta thread that this code in the head of your page is broken, and is causing the issues:

.nav-link-container {
    display: inline;
    li { 
        display: inline-block;
        float: right;
        a {
            color: rgb(255, 255, 255);
            text-decoration: none;
            text-align: center;
            font-family: 'Open Sans'; 
            line-height: 48px;
            min-width: 90px;
            font-size: 15px;
            padding: 0 1em;
        }
    }
}

That’s not valid CSS code. (It looks like unprocessed Sass or similar.) It needs to be reformatted to look like this:

.nav-link-container {
  display: inline;
}
.nav-link-container  li { 
  display: inline-block;
  float: right;
}
.nav-link-container  a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  text-align: center;
  font-family: 'Open Sans'; 
  line-height: 48px;
  min-width: 90px;
  font-size: 15px;
  padding: 0 1em;
}

Are you able to track down where that code it being inserted?

You did and I thought I’d changed it, but apparently only in one place! Sorry about that @ralphm!

Strangely though, that code had been working just fine. Does anyone have an iPhone6 (or similar) that can verify if it’s working now?

1 Like

Hm, the code still seems to be there. :grimacing:

Anyhow, I have an iPhone6S, and can confirm that when that wrongly formatted code is disabled, the layout is fixed. So it’s interfering with the normal header code. (I know by plugging the iPhone into my Mac and debugging via Safari.)

That code can’t work as is, as it’s not in a format that a browser can read. Perhaps it somehow got unformatted at some point?

[quote=“ralphm, post:4, topic:225700”]
Hm, the code still seems to be there.
[/quote] How about now?

I haven’t found the CSS Ralph posted, but

looks to be a left-over from desktop view. i.e.
Desktop

Mobile (using desktop browser not mobile device)

For some reason, all but Home are getting a “hidden” class.

<ul class="nav-link-container">
  <li class="hidden-for-mobile">
    <a href="https://www.feverbee.com/resources" target="_blank" class="nav-link">RESOURCES</a>
  </li>
  <li class="hidden-for-mobile">
    <a href="https://experts.feverbee.com/" target="_self" class="nav-link">DISCUSSIONS</a>
  </li>
  <li class="hidden-for-mobile">
    <a href="http://newyork.feverbee.com/" target="_blank" class="nav-link">EVENTS</a>
  </li>
  <li class="hidden-for-mobile">
    <a href="http://ondemand.feverbee.com/" target="_blank" class="nav-link">TRAINING</a>
  </li>
  <li class="hidden-for-mobile">
    <a href="http://www.feverbee.com/consultancy" target="_blank" class="nav-link">CONSULTANCY</a>
  </li>
  <li class="hidden-for-mobile">
    <a href="http://www.feverbee.com/about-us" target="_blank" class="nav-link">ABOUT</a>
  </li>
  <li>
    <a href="http://www.feverbee.com" target="_self" class="nav-link">HOME</a>
  </li>
</ul>
2 Likes

Yeah, that was deliberate. The others didn’t fit on smaller devices so this was a good solution.

This stuff messes with my head. :wink:

OK, that broken code is fixed now, and the problem is still there. O well, it needed fixing anyhow!

So to fix the layout, you need this:

.nav-link-container {margin: 0;}

in your mobile styles, as it’s the margin on the nav that’s causing the problem. But do you want that Home link or not? If not, you could just hide the whole nav and be done with it. E.g.

.nav-link-container {display: none}

in your mobile styles.

2 Likes

I can certainly live without the home link so I’ve added display:none

How does it look now?

Sigh—the display: none is getting overridden by the display: inline discussed earlier. You could just force the issue by adding !important. E.g.

.nav-link-container {display: none !important;}

I’m not a fan of using !important, but sometimes you have to pick your battles. :slight_smile:

The alternative would be to give the rule higher specificity. E.g.

#main .nav-link-container {
    display:none;
}
2 Likes

Ok, I’ve implemented !important. How’m I looking?

It looks ok on my old iphone4 and looks like the good image in your first post.

The mac emulator shows iphone5 and 6 looking ok also.

4 Likes

Yay! Thanks @PaulOB, that sounds promising.

Big thanks to @ralphm for the support on this.

4 Likes

Yep, looking good!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.