Docs

[mrsnooch]

Hi there,

re: http://bigrockdesigns.badwolfproductions.co.uk/

I followed another post to create a top bar, and that works fine. I was then able to hide this top bar on mobile devices using this code;

@media (max-width:  979px) {
	.x-topbar {
		  display: none;
	}
}

Worked perfectly. Now my problem is that I had to create a margin in order for the top bar to not overlap content by using;

.x-main.full { margin-top: 106px; }

However because I have hidden the top bar from mobile, I now have this 106px area of white space.

How can I remove this? I tried to alter the above code to the following but no luck;

@media (max-width:  979px) {
	.x-topbar {
		  display: none;
	}
        .x-main-full {
                  margin-top: 0px;
        }
}

Any assistance is greatly appreciated.

Thanks,
Mark

[Thai]

Hi Mark,,

Please update your custom CSS to this:

@media (max-width:  979px) {
	.x-topbar {
		  display: none;
	}
        .x-main.full {
                  margin-top: 0px;
        }
}

Hope it helps 🙂

[mrsnooch]

Hi Thai,

For some reason in my original copy of the code it said .x-main-full when infact what I had in was .x-main.full , so the code you have given me is basically what I had.

Are you able to look at the site and see if you can figure it out? I can’t seem to pinpoint why it won’t take effect. I will supply credentials below.

Thanks
Mark

[mrsnooch]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in! I have checked your site and it turns out that the code works perfectly. It is not working in your site because of the hierarchy of the css code. Please always keep in mind that @media() block should always be at the bottom of your other custom css. For example:

.x-main.full { 
  margin-top: 106px; 
}

@media (max-width:  979px) {
  .x-topbar {
   display: none;
  }

  .x-main.full {
    margin-top: 0px;
  }
}

Hope this make sense. Please let us know how it goes.

[Author]

Posts