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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #69721
    JayDub
    Participant

    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?

     

    #69722
    Weaver
    Keymaster

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

    #69723
    scrambler
    Moderator

    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;}}
    #69724
    JayDub
    Participant

    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.

     

    #69725
    JayDub
    Participant

    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.

    #69726
    scrambler
    Moderator

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.