Home › Forums › Weaver Xtreme Theme › Weaver X adds some @media settings that I cannot seem to over-write or change
- This topic has 5 replies, 3 voices, and was last updated 9 months, 2 weeks ago by
scrambler.
-
AuthorPosts
-
October 29, 2021 at 19:30 UTC - Views: 18 #69721
JayDub
ParticipantThere 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?October 29, 2021 at 20:48 UTC - Views: 16 #69722Weaver
KeymasterYour examples are missing a leading { for the rules, I think
October 29, 2021 at 23:03 UTC - Views: 18 #69723scrambler
ModeratorIn 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;}}
October 29, 2021 at 23:38 UTC - Views: 12 #69724JayDub
ParticipantI 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.
October 29, 2021 at 23:46 UTC - Views: 15 #69725JayDub
Participantthank 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.
October 30, 2021 at 00:55 UTC - Views: 9 #69726scrambler
ModeratorI 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.
-
AuthorPosts
- You must be logged in to reply to this topic.