.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;
}
Related
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
Im wondering if it's possible to use the element.style at a certain media query.
Im working inside an application where a divs width is set by javascript on document load. Like this:
<ul style="width: 593.531px;" class="width-fix">
<style>
.width-fix {
width:100%!important;
min-width:100%;
}
</style>
What I would like is that a certain break point just fallback to the element.style.
Should I use jquery to toggle this or can it be done with a media query?
You could write it in the "reverse" way.
#media screen and (min-width: ###px) {
.width-fix {
width:100%!important;
min-width:100%;
}
}
This media query will only be active when the window is above a certain width. Meaning that when you fall under it, the !important rule will be removed and the inline css will kick in.
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've made a mediaquery and, strangely, some of the new css properties work and other don't...
working : .ctas and .footer-content
When I use the chrome inspector, I doesn't even detects the mediaquery for the classes not working...
You can see the page I'm working on here : http://sopureinthecity.fr/test/
#media screen and (max-width:570px) {
.ctas {
width: 270px;
}
.footer-content {
padding-top: 20px;
}
.img-reponsive {
margin-top: 40px;
}
.main-title {
top: 30%;
width: 100%;
font-size: 18px;
}
.modal-btn {
top: 48%;
}
}
What did I do wrong ?
Thanks in advance !
EDIT, so everything works in the browser, but my .large-header is all bugged when I visit the website on my phone !
The responsive of the .large-header only works on the desktop (with a phone screen size)
You have typos in your css selectors when compared to the site you have linked:
.img-reponsive vs .img-responsive
.modal-btn vs .modalbtn
Nothing is wrong with the media query. The issue is a typo:
.modal-btn {
should be
.modalbtn {
As the CSS class used in your page is modalbtn.
Does anyone know how can I control the image source from the CSS?
I need to be able to change the image src from the CSS. I have loop printing < img id=.. > tags, and for every id it different image. I want to be able to set the source by its id from the style css area.
Does anyone know how to do this?
This is not possible: The image's source is part of the markup, not CSS.
The only workaround would be having div elements with background-image properties instead. Those you could set from within the style sheet:
<div id="image1"></div>
#image1 { width: 100px; height: 50px; background-image: url(image.gif); }
However, with this method you lose all the img tag's advantages like
The ability to set an alt text
Resizing
Printing (most browsers don't print background images)
Search engine indexing (probably)
the only other alternative is by using JavaScript, but that obviously won't work if JavaScript is disabled, which makes it a no-no in my view.
This is now possible with CSS3 using the Content style.
I use this to swap images within a slider based on window size through media queries.
Edit: When I originally posted this, I was unaware that it only worked in Webkit at the moment. But I doubt it will take long before it gains more functionality across browsers.
HTML
<img class="img1" src="image.jpg">
CSS
#media (min-width: 768px) {
.img1 {
content: url(image.jpg);
}
}
#media (max-width: 767px){
.img1 {
content: url(new-image.jpg);
}
}
That is not possible with CSS.
However, this is very easy with Javascript:
document.getElementById("IdOfImage").src = "SourceOfImage";
You cannot really do that, however, if you do need to do that using CSS, you can do it for two images with the same size like this:
<style>
img {
width:0;
height:0;
display:block;
background: url('2.png') no-repeat bottom left;
padding-left:196px;
padding-bottom:187px;
}
</style>
<img src="1.png">
Only tested it in FF3.6 though.
I found this article that might be useful. It actually changes background of an image
here is the example in case website goes missing:
HTML
<html>
<body>
<div class="header">
<img class="banner" src="http://notrealdomain1.com/banner.png">
</div>
</body>
</html>
CSS
/* All in one selector */
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
If you don't want to use backgrounds nor use javascript, you layer 2 images with different src on top of each other (using absolute positioning) and use CSS to hide one or another. Visually it will be the same then changing the src.