Help with {{#if @member}} + CSS

Developer help
1

Hi!
I am trying without success, that it applies a different CSS if the member is logged in or not. I have tried this code but it does not work.
Any help please?
Thanks!

  {{#if @member}}
<style>
  @media (min-width: 1300px){
      .gh-content {margin-left: 220px;}</style>
{{else}}<style>
 .gh-content {margin-left: 0px;}</style>
{{/if}}
2

There are a lot of things that could be happening here.

First, you have a media query for the member style but not for the other one. I’m not sure if that’s intended, but it means that the first CSS rule will only apply on viewports larger than 1300px. The other one will apply to all viewports (screen sizes).

Second, where are you including this code? Are you able to share a link to a live site?

3

Thanks for the reply Ryan!

The correct code is this:

  {{#if @member}}
<style>
  @media (min-width: 1300px){
      .gh-content {margin-left: 220px;}</style>
{{else}}
<style>
  @media (min-width: 1300px){
      .gh-content {margin-left: 0px;}</style>
{{/if}}

What I want to achieve is that if the member is logged in with one device with resolution superior to 1300px, the “.gh-content” has a margin-left of 220px, otherwise 0px.
I have tried embedding it in general Code Injection (Header) and also in the Code Injection of the post.
I have also tried embedding it in the post.hbs file.

What could it be, or how could I get it to work?
Thanks…!!

4

You definitely need to do it in post.hbs. This won’t work via Code Injection.

When you try it in post.hbs, do you see the <style> tag on the page?

5

Solved Ryan!
Thanks you so much :slight_smile:

1 Like