I have a code for a bootstrap carousel I am deploying to a site. It works perfect on large devices but I wanted to add media queries to optimize it for mobile.
However, whenever I add a media query to the style sheet I get a runtime error and the site breaks.
I am using Umbraco and this the carousel is a partial view. When I add in even a blank query such as
#media screen and (max-width:480px) {
body {
color: red;
}
}
I get the runtime error, what could be problem?
Thank you
Since your CSS is within a tag in your view and you're using #media, you must escape the #, by adding an additional #. So change your code to
##media screen and (max-width:480px)
When using # the compiler thinks you're writing Razor code and it simply errors because it can't figure out what #media is supposed to be, since there's no variable defined with its name. I hope that makes sense.
If you change it to this does it work?
##media screen and (max-width:480px) {
body {
color: red;
}
}
Related
I am in the process of developing a new starter theme for myself. Within it, I have a number of breakpoints I wish to use throughout the theme. Rather than manage the breakpoints for every single media query, I wanted to set CSS variables as the breakpoint pixel value and call on the variable inside the media query. Below is an example of how (ideally) this would work
:root {
--medium: 1024px;
}
p {
color: black;
}
#media screen and ( min-width: var(--medium) ) {
p {
color: red;
}
}
<p>Text I want to be red in screens larger than 1024px.</p>
This logic sadly does not work in regular CSS/CSS3. Is anyone familiar with a method of creating a single point where I can adjust media query breakpoints for the whole theme without using a preprocessor? Thanks in advance!
This is not currently possible as referenced above by #rangerz.
I have taken to just splatting the actual values in the media queries in all of my CSS files marked with a comment:
:root {
--breakpoint-md-max: 767.98px /*var(--breakpoint-md-max)*/;
--breakpoint-md-min: 768px /*var(--breakpoint-md-min)*/;
}
#media (min-width: 768px /*var(--breakpoint-md-min)*/ ) {
#body {
background: green;
}
}
This allows me to do a global replacement if I ever need to change this "constant" value.
Plus, one day, when env() is supported, I can remove this unsightly blemish in one shot. :)
You can accomplish this with matchMedia.
I gave a usage example in this answer.
I am currently using DIVI Builder to build a simple website.
I have a fullwidth section, with a full width slider inside. The text inside the slider seems to behave differently on desktop versus mobile, so I figured i can help that with #media. What i have done so far is to create a duplicate, identical slide, adjust the 2nd of the two for mobile and hide the 2nd from desktop users. While I don't exactly know, I assume that this way will eventually slow down the page loading speed, so I resorted to #media.
The issue preventing this from working is that the media inquiry starts with:
#media all and (max-width: 980px) {
XXX {
margin-top: 100px;
}
}
The XXX represents the unknown for me, because I want to target the whole column, in this case automatically labeled as .et_pb_slide_0. From what I understand i cannot replace the XXX with a class, or in other words, something that starts with a . Is there any way to make this work ??
Media queries can contain classes like .et_pb_slide_0 or .anything_you_like!
This is valid:
#media all and (max-width: 980px) {
.et_pb_slide_0 {
margin-top: 100px;
}
}
I use:
#media(max-width:992px){
h3{
color:red;
}
}
but in the browser it seems that the change does not happen at 992px, but when the screensize is at 887px or less. I have tried disabling css files one by one, but the problem doesn't seem to go away.
I can't figure out what the problem is.
EDIT: It must be something in the HTML file, because when I try the same code for another html file, it works properly. Also, I've noticed that boostrap's media queries are also not working properly (for example, if one of the breaking points is say 1200px, the changes happen at around 1120px in the browser). No idea what causes this. I've tried commenting different parts of the HTML, but it's always the same.
As per the given example it seems that you might be not closing } bracket also code should be like
#media screen and (max-width: 980px) {
h3{
color:red;
}
}
You may check http://webdesignerwall.com/tutorials/responsive-design-in-3-steps link for more information Hope it helps!
As Pravin vaichal, His guess must be true, You mised "}" bracket.
and you should write media query min-width to max-width too.
see this one for more detail about media queries for responsive site.
I have created a website and added this line of code for starting media queries:
#media only screen and (max-device-width: 768px) {
.title {
font-size:32px;
line-height:30px;
}
}
But whenever I make a change on media queries, it's also changing the code in the original CSS file. How can i avoid this process. Because I don't want to change anything on desktop view. I only want to make changes on that #media screen. Please help.
There is a change in media query try with my code,
Try my code in codepen
I have a web page that is using media queries to target print media.
Like this:
#media print {
#user_profile h1 {
font-size: 16px;
margin-top: 10px;
}
}
When I try to print the page from the iPad, via AirPrint, the print styles are not applied.
Is #media print not supported by mobile safari?
If the other styles are without media query for screen, I think it will apply to print also.
Try adding to normal css a media query for screen,
Try to place all print css at the bottom to overwrite normal css.
#media print is supported since iOS 1.0.
However, Mobile Safari does aggressive caching of assets and it's possible that your modified style sheet is not fetched from the server. You may append a query string (e.g. styles.css?v=1) to make sure the file is reloaded.