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
Related
I'm trying to hide the header image of https://gambiaschoolsupport.org/ on mobile devices.
I've used what I think is the correct CSS and when I preview the site in a virtual small screen the image is hidden.
}
#media (max-width: 768px) {
.header-image {
display:none;
}
But when I view the site on an actual mobile device, the image is still there! What is going on?
I have checked your site and found that your internal style tag contains display:block for .header-image class. Remove that and check. But before you do so, also remove display:none from .header-image class which is given in https://gambiaschoolsupport.org/wp-content/cache/autoptimize/css/autoptimize_de8fa02bd732efd9e22723257049a7e0.css. Let me know if that works for you.
Use Media screen
#media screen and (max-width:768px)
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;
}
}
On mobile devices, my post's title and date are clashing and overwriting each other. This looks awful. Here is my site. http://defensionem.com/200-russian-soldiers-along-with-t-90-tanks-in-syria/
It is on Wordpress.
How do I fix this? There are no options in the Theme and I can use Custom CSS.
I tried to hide the date but it did not work.
.meta--items_fl{
display:none !important;
}
What you can do here is write media queries to hide specific elements or change their related css at certain screen lengths. For example,
#media only screen and (max-width: 700px) {
div.meta--items.fl {
display: none;
}
}
The above code would hide the date at a screen width of 700px and below. You can mess around with the width the breakpoint triggers to see what works best for you.
To learn more about media queries, you check this out. Hope that helps!
For example, say I have a div and set the background image to 'X' that is displayed only for desktop sizes. When the query changes to mobile I would set the background image to 'Y'.
Would doing this make it so that on a mobile only 'Y' gets loaded and not 'X'? 'X' is a large image and 'Y' is small, I am trying to improve load times. Also if on a desktop would 'X' and 'Y' get loaded or just 'X' and not 'Y'?
You can accomplish this by setting different background images based on the media query.
Unfortunately you cannot set the source of an image tag (only with javascript).
Example:
.container {
background-image: url(big.jpg);
}
#media all and (max-width: 699px) {
.container {
background-image: url(small.jpg);
}
}
You could use the CSS Media Type and screen size to display different backgrounds.
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Yes this what media query do
You can create two css for every screen size for example:
#import url("test.css") screen and (min-width: 960px);
#import url("testmobile.css") screen and (max-width: 959px);
or you can add the media query on each css rule.
#media all and (max-width: 699px) and (min-width: 520px) {
}
Please check this link, it helps you
I'm making a website which has 3 breakpoint 768px, 1024px and 1900 px. Which size of CSS is good to keep outside media query containers?
Adding example
All specific styling inside media queries and all common styling outside
h1 {color:red}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px}
}
#media only screen and (min-width: 1024px) {
h1 {font-size:28px}
}
or
Most common used desktop first
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; font-color:red}
}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
or
Mobile first
#media only screen and (min-width: 480px) {
h1 {font-size:18px; font-color:red}
}
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; }
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
I believe you mean to ask what CSS should not be inside of the media query blocks, right?
If that is the case I recommend that any CSS that does not change be placed outside of the media query blocks. Any colors, font styling, etc. Any CSS that changes placement of elements, the padding, floats, inline or block display types, any structure-type CSS is what I would put in the media query blocks.
Update: To respond to the updated question, are you asking which order you should put the media blocks in? If that's the case as far as I know it doesn't really matter what order they go in. But to comment on the number of possible media queries, I would separate that CSS into different style sheets just to make it more maintainable. Your media queries would then be a part of the links to your style sheets in your HTML.
There are so many ways to approach this problem - and the decision may be different depending on the circumstances. For example, is there an existing site that you are reverse engineering to be responsive or are you starting from scratch?
STARTING FROM SCRATCH
If starting from scratch, one method is to create all of the basic styles OUTSIDE of any media query - so that these styles can be seen by any device (especially those devices that do not support media queries).
Basic styles could include just colors, and fonts etc - or it could be everything except layout.
Then, media queries are used to add the different layouts on top of the basic styles.
MIN or MIN AND MAX
The next question is how will you work your different media queries...
Will you allow them to be applied on top of one another - in which case you may start small and build up - using min-width only.
For example:
#media only screen and (min-width: 600px)
OR you may want to set them in a series of brackets - so that styes for one size do not interact with another size.
For example:
#media only screen and (min-width: 600px) and (max-width: 800px)
Again, there is no right or wrong - both have strengths and weaknesses. The first option allows you to use styles that flow through all widths. The second option allows you to fully control styles that appear in a specific width - without having to deal with the cascade.
DEALING WITH IE
There are a range of ways for dealing with older versions of IE including.
allow IE to see basic styles only
place media queries in separate CSS files and link to these files using media queries... then also link to a selection of these files (like wide screen CSS files only) via conditional comments.
Use some sort of JS solution like respond.js or others to force IE to understand the media queries.
HTH
I've read many articles recently that suggest starting with the smallest resolution first and working your way upwards using media queries. To me that also makes a lot of sense. The only problem is old browsers (IE) not understanding media queries. There are solutions to that problem though (if you Google).