I am using an HTML template (Admin LTE) for my angular project. In it I tried to override a default width specification using this in my index.html head section
#media(min-width: 768px)
{
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper, body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer, body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header
{
margin: left 300px!important;
}
}
But when executing, its not at all taking my custom css in index.html, instead it takes the 250px which is hardcoded in the CSS file
SO How to override this?
CSS is not valid as shown in dev tools:
margin: left 300px !important
Try:
margin-left: 300px !important
Related
.contact-me h2 h3 {
font-size: 40px;
}
.contact-message{
width: 80%;
}
**This is my code inside media query and Its width is not working can anyone help, please
I selected the same name of class but it didn't work
This is the image from developer tools I incepted my site and found that in my media query .contact-message width is been overridden by my .contact-message outside media query**
Your css is overlapping so use !important tag. So new code will be:
.contact-message{
width: 80%!important;
}
some part of my css code written in wordpress editor dedicated for mobile version of a website does not work and it doesn't appear in inspect page dedicated
i would like for my table to have horizontal scroll when used by mobile phone
#media (max-width: 768px) {
.gem-textbox-content {
padding-right: 30px !important;
}
.vc_tta.vc_general.vc_tta-accordion .vc_tta-panel-body {
padding: 25px;
}
/*form here forward code doesn't word*/
.gem-table .gem-table-responsive .gem-table-style-1 .row-headers {
display: block !important;
overflow-x: scroll !important;
}
.tabletolist .rh .nrh {
display:none !important;
}
table {
display:block !important;
}
}
and when i write this code directly in dev console it works, but when i write it in wp css editor it doesnt, i put !important to overwrite inline css
You should change the version number in your enqueue code (usually in functions.php for themes) so that the style sheet is reloaded.
wp_enqueue_style( 'my_styles', plugins_url( 'mystyles.css' , dirname(__FILE__) ), array(), 5.52);
In the above example, I would change 5.52 to 5.53 to trigger a style change.
wp_enqueue_style( 'my_styles', plugins_url( 'mystyles.css' , dirname(__FILE__) ), array(), 5.53);
I tried to use media query within CSS that would work only on web front page. ID of the front page is defined within its body as index. This front page uses basically two columns (.aside and .main) and I want to avoid it on the front page but still use it on others.
When I try this CSS without specifying the ID, the .aside column does leave (on all pages), but once I try to add the #index (to use this only on the front page) it stops working.
#media only screen and (min-width: 500px) {
#index {
.aside.col-lg-pull-9 {
right: 100% !important;
}
.main.col-lg-push-3 {
left: 0% !important;
}
.aside.col-lg-3 {
width: 0% !important;
}
.main.col-lg-9 {
width: 100% !important;
}
}
}
The ideal way to handle this problem is as Hidden Hobbes stated—by using a preprocessor such as SASS. SASS is transpiled to CSS, which is then loaded the browser. It eliminates repetitive CSS, which makes development faster, and code easier to understand.
Depending on what framework (if any) you're developing in, you should be able to find the appropriate SASS/SCSS module to use in your project. If you're currently not using a framework, I'm partial to suggesting HarpJS, which includes several preprocessing modules for CSS and HTML.
References:
SASS: http://sass-lang.com
HarpJS: http://harpjs.com
the suggestion to add #index was good, but I kept a mistake in the previous code (dot before aside and main), the code below works well and it allows me to conditionally format the web based on the fact which link is actually viewed.
#media only screen and (min-width: 500px) {
#index aside.col-lg-pull-9 {
right: 100% !important;
}
#index main.col-lg-push-3 {
left: 0% !important;
}
#index aside.col-lg-3 {
width: 0% !important;
}
#index main.col-lg-9 {
width: 100% !important;
}
}
I need a media query (or similar) using pure CSS, HTML or possibly LESS (as long althogh pre-compiled won't work) to apply a particular class to an ID depending on the screen height. I'm setting classes defined by Add2Any - not css properties.
jsfiddle
What I want to do is set the div #add2any to this for small screens.
<div id="add2any" class="a2a_kit a2a_default_style">
Otherwise I want this:
<div id="add2any" class="a2a_kit a2a_kit_size_32 a2a_default_style">
Is this possible, and how?
Looking for a non-javascript/not Jquery solution to avoid time lag and having a <div> for each style and showing only the relevant one.
Background
The idea is to change the layout and size of the AddToAny bar for small screens, so instead of 32px images it displays a totally different style of compact bar, with less buttons, and using AddToAny's classes means future changes they make would not be dependent on fixed css in my stylesheets. Browser compatibility is important.
CSS so far
#media screen and (max-height: 430px) {
.a2a_button_google_plus, .a2a_button_pinterest, .a2a_button_print { display:none;}
#add2any a, hr#add2any, hr#add2any a, .a2a_divider { font-size: 15px; padding-top:2px; padding-bottom:-2px; }
.a2a_divider { top:5px ; position: relative}
}
Edit
Unable to find solution from any of these, I'm using foundation framework.
conditional CSS based upon div not screen
Toggle mobile view in Foundation using CSS class or JS
How to toggle class using pure javascript in html
**Edit 2 **
Suggestions of using Less or Sass from this question seem like overkill, since the solution would be needed on every page.
Self-hosting the script and adding some javacript to it might be a better choice, the class names look certain to remain the same even if the script changes since all Customize instructions encourage direct use of AddToAny's class names.
Edited
If you have this html:
<div class="a2a_kit a2a_default_style">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
You can make a media query like this:
/* first state */
.a2a_kit { display: block; }
.a2a_kit.a2a_kit_size_32 { display: none; }
#media screen and (max-height: 430px) {
/* reverse behaviour on max-height 430 px */
.a2a_kit { display: none; }
.a2a_kit.a2a_kit_size_32 { display: block; }
}
You just need to set up modified styles in your media queries:
#add2any {
/* any styles you want to apply all the time */
background-color: blue;
width: 100px;
color: white;
}
#media (min-width: 420px) and (max-width: 760px) {
/* styles when screen is greater than 420px wide but less than 760px */
/* omitting the 'and (max-width: 760px)' would cause these styles to apply at any width above 420px unless overridden by another media query */
#div1 {
background-color: red;
width: 300px;
color: yellow;
}
}
#media (min-width: 760px) {
/* styles when screen is greater than 760px wide */
#div1 {
background-color: green;
width: 600px;
}
}
JSFiddle Demo
*if you don't want to style based on the ID, you can add a unique class and style that
I'm researching existing html5 application.
Its html page contains style for print
<link href="receipt.css" rel="stylesheet" type="text/css" media="print" />
receipt.css file contains also #media and #page directives
.myreceipt {
#page {
visibility: hidden;
margin: 0 15px;
}
#page {
height: auto;
}
}
.myreceipt body {
margin: 0;
padding: 0;
width: 100%;
}
#media screen {
.myreceipt #receipt-header img {
width: 300px;
}
}
.myreceipt #receipt {
margin: 0;
width: 100%;
padding: 0;
background-color: #fff;
}
#media print {
.myreceipt #receipt {
color: #000;
}
}
Why css file contains media directives ? If html file contains media='print' is it used only for printing ?
Can #media screen elements deleted fully from css file and #media print directives removed safely ?
Or is there some reason for them, this css is created by proffessionals ?
Why visibility: hidden is specified in #page ?
According to doc, visibility: hidden is ignored for #page, can it safely removed ?
Can #page also removed since html file contains media=print and in this case #page is always used ?
Why css file contains media directives ?
Or is there some reason for them, this css is created by proffessionals ?
Because it could be used for different media (e.g. screen, print, etc)
If html file contains media='print' is it used only for printing ?
Yes.
Can #media screen elements deleted fully from css file and #media print directives removed safely ?
Only if the file is linked from link elements using media="print".
Why visibility: hidden is specified in #page ? According to doc, visibility: hidden is ignored for #page, can it safely removed ?
That's for CSS 2.1. It does/will matter for CSS 3 (http://dev.w3.org/csswg/css-page/#content-empty). However, as of now, in Firefox 25, both visibility and height are invalid, hence ignored.
Can #page also removed since html file contains media=print and in this case #page is always used ?
Yes, but also for a different (better) reason: at-rules (#page, #media) must be defined top level. As it is in your style sheet, with #page inside .myreceipt, they are simply ignored so you might as well delete them.
If they weren't ignored (ie. outside of .myreceipt) then you should be aware that #page refers to the actual print area on a page, not to the .myreceipt (https://developer.mozilla.org/en-US/docs/Web/CSS/#page). So if you want to remove them, you would have to apply some equivalent formatting to the body element.
I would like to close by pointing out that in this case "created by professionals" probably refers more to someone being paid, than someone being an expert in this stuff.
Andrei