Weaver X adds some @media settings that I cannot seem to over-write or change

[JayDub]

There are some lines of CSS that seem to be controlled by Weaver Xtreme regarding screen sizes that I do not see how I am able to set them within the admin panel, or even over-ride them with custom CSS (since they already use the !important and seem to execute after my custom CSS rules).

Where are these coming from, and is there a way to control this without having to edit the proprietary Weaver CSS files?

For example WeaverX seems to add these two width ranges which overwrite my #header top margin which I have set in the Admin Panel to be a negative number (-48px):

@media (min-width: 581px) and (max-width: 767px)
#header {margin-top: 0!important;}}

I have tried overwriting these with

@media (min-width: 581px) and (max-width: 767px)
#header {margin-top: -48px!important;}}

But that does not overwrite it.  I have also written other rules that should over-ride those (such as @media all max-width:3000px  or writing another rule using 582 and 766 px, but that does not work for items in that range either.) I think no matter what I do, I cannot alter things because those baked-in WeaverX @media settings get written in BELOW my custom CSS.
I am using a child theme to keep my changes separate from the base WeaverX theme, but I still see this issue when I remove it.
Is there an elegant way to fix this without having to mess with the default(core) WeaverX stylesheets?

 

[Weaver]

Your examples are missing a leading { for the rules, I think

[scrambler]

In addition to the missing open bracket, you are missing a space before the exclamation mark.

If the syntax errors we pointed out are not the source of the issue, please leave your overriding rule in (as corrected below), and provide a link to the page where you need it to work so we can give you the proper selector / syntax.

the correct rule that should go in the Theme Global; Custom CSS Rule box is

@media (min-width: 581px) and (max-width: 767px){
#header {margin-top: -48px !important;}}

[JayDub]

I was just writing out quick examples for this post, but you did get me on track.  I had a something broken above it that was interfering.  I was so busy testing just my snippet of code and I should have tested the whole thing.

So, basically, I have my work around, thank you so much for your reply.

I still would love to know why WeaverX resets the html top margin for certain media situations instead of carrying over the values I put into the Admin panel.  But at least now I have my fix.

 

[JayDub]

thank you scrambler!  I am good now…except for wondering why those media exceptions reset the values I set using the admin panel for  Header.

Is that a bug or a feature?

I am kind of confused why I need to set such a large negative margin to get my header to be fixed to the top of the site.  Is that unusual?  I dont have any other major elements that have a margin that should push it down.  I am doing a full width site and setting the posts to scroll up underneath a fixed header.  I would ask you to look, but cannot share the site easily.

[scrambler]

I think that as a general rule, on mobile you try to minimize wasted space in the header, so @weaver may have added that rule to do just that.

Using negative margin is usually not the best way to do a layout as it can react differently on different browser.

If you give us a link too the site explaining why you are doing that, we can see if there would be a more appropriate way to achieve what you are after.

[Author]

Posts