I have a logo in my header that's too small. I found this piece of code where I can increase the size but I only want it to apply to computer screens and not to mobile or tablet. The code is:
.site-title img {max-width:100%; height:auto}
.site-description {display:none}
I want to change the 100% to 200% but only on computer screens.
Can somebody tell me which code makes that happen?
Responsive Web Design, using media-queries:
#media screen and (min-width: 800px) {
// this css will only be used when the screen size is min 800px
}
Media Queries are used to apply CSS rules to only matching devices. Specify a max-width or min-width to apply the style rules to.
#media screen and (min-width: 720px) {
body {
background-color: skyblue;
}
}
Related
We have our website in wordpress, below is the link for your reference.
https://timesandtrendsacademy.com/
There is one foobar which is shown at the bottom of every page of our website in sticky and scrolling mode.
I have put some custom css for the same for full width look, below for your reference,
.foobar-container-left{display:none;}
.foobar-container-right{display:none;}
#foobar-message-0{width:100%;}
#media only screen and (max-width:500){
#branches{width:100%;}
}
It's working perfect on desktop, but when we resizing our screen or when we open on mobile devices that width is not taking a full-width.
It is showing in a 150px width size that is not looking good in mobile devices.
we have to add some css or media query to reflect proper on all the devices.
Please advice us.
Thanks,
Gopal
That's because there's a style with a !important that overwrites your styles.
#media only screen and (max-width: 800px) and (min-width: 320px) {
#foobar-message-0 {
margin-top: 10px;
width: 150px!important;
}
}
Remove the !important, edit the style, or use a more specific selector with !important.
Example:
#media only screen and (max-width: 800px) {
#foobar-message-0 {
width: 100%!important;
}
}
These styles should be after the styles to overwrite.
Add this css in style editor
#media only screen and (max-width: 767px){
.foobar-container-inner {
margin-left: 0important;
width:100%!important;
margin-top: -40px!important;
}
#foobar-message-0 {
width:100%!important;
}
}
Hi am trying to apply the css when screen resolution is 1280*720 its not applied but when I manually enter width and height in google responsive check its working . Here is code of css
#media (min-height:720px) and (min-width: 1280px) {
.space
{
margin-top:24.5%;
}
}
You want it from 720px to 1280px then you have to use media query min-width:720px (i.e. from 720px) to max-width:1280px (i.e. less then 1280px) as below,
div {
width: 100px;
height: 100px;
background: #111;
}
#media screen and (min-width: 720px) and (max-width: 1280px) {
div {
background: red;
}
}
<div></div>
Scale your browser and see div background change.
On desktop systems, the size considered by media queries like min-height is the size of the content area of the browser, not the resolution of the screen. A system with a 1280x720 screen will not use rules in this media query unless the browser is in in full-screen mode, since some of the screen is being used for the browser toolbar and scrollbar, window decorations, a taskbar (on Windows) or menubar (on macOS), etc.
I am trying to adapt the three background images for different resolutions (mobile, tablet and computer screen in 1920 x 1080). How should I do?.enter link description here
You'll want to use media-queries in your CSS files.
You can read more about how media-query works here but the following CSS is a general guide to how you'd want to manage your queries.
/* Mobile screens */
#media (max-width: 400px) {
#background-image{
background-image: url('imageMobile.jpg');
}
}
/* Larger than phone. Tablet-sized. */
#media (min-width: 401px) {
#background-image{
background-image: url('imageTablet.jpg');
}
}
/* Desktop-sized. */
#media (min-width: 920px) {
#background-image{
background-image: url('imageDesktop.jpg');
}
}
/* Larger than Desktop HD */
#media (min-width: 1200px) {
#background-image{
background-image: url('imageHDDesktop.jpg');
}
}
Elsewhere in your CSS - not in a media-query, you would define all the other properties of your container element, and then the media-queries will choose the background-image that best fits their size.
Edit: A few years back, when media-queries were introduced, people used to use max-width exclusively. Now there is a newer responsive design approach that uses min-width instead, using the nature of CSS' 'cascade' to apply and then overwrite each successive rule until the final query is the correct one. This way, smaller devices won't have to load the media queries for devices larger than their own screen, which turns into a performance boost on older mobile devices.
I'm trying to do a CSS for just my desktop, therefore i used the media query like below to link my css with my desktop.
My desktop resolution is 1440 x 900. Hence, my media query css for desktop is like this below
#media (max-width: 1440px) {
#loginpage {
position:relative;
margin-top:15%;
}
#headerbodyadmin {
position:relative;
margin-top:20%;
}
}
I tried used this method as well.
#media only screen and (max-width : 1440px){
}
Unfortunately, it's not working. I checked the various media query tutorial and this seems to be the correct way to implement css for my desktop resolution 1440x900.
May i know did i do anything wrong here?
Try adding one pixel to your max-width , #media (max-width: 1441px)
I checked the code and it working fine, make sure that you referenced id's in html page also.
Check this URL : http://jsfiddle.net/Ravichand/8kznk/
#media (max-width: 1440px) {
#loginpage {
position:relative;
margin-top:15%;
color:red;
}
#headerbodyadmin {
position:relative;
margin-top:20%;
color:skyblue;
}
}
I checked that and it works, here you can find example
http://jsfiddle.net/7VVsA/
#media (max-width: 1440px) {
#loginpage {
position:relative;
margin-top:15%;
background:red;
}
#headerbodyadmin {
position:relative;
margin-top:20%;
background:yellow;
}
}
Solution 01: Instead of max width. you can use min-width
Like
/*Sizes above 1024*/
#media (min-width: 1024px) {
}
Solution 02: Or you can try adding +1 to your width
Like
/*width 1441 to avoid any other conflict */
#media (max-width: 1441px) {
}
The width and height attribute describes the length for the view port and not the device screen resolution as device-width and device-height. If you use the width attribute it is possible that the considered value is smaller then your screen resolution width, because there is a border around the window or a scroll bar. Browsers on mobile devices usually utilize the entire width of the screen, so you don't see this effect there. Here what MDN says to the width attribute:
The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).
So if you want to trigger the styles if your device has a width resolution of 1440px I would use it like this:
#media (max-device-width: 1440px) {
/* your style */
}
You can read more about this in the MDN documentation. Maybe this question is also interesting.
I have a responsive web page that fits nicely down until 750px then it runs into trouble. It takes a lot of CSS to make it look good and it is a pretty hackish solution.
Is there a way so that if the browser size is smaller then 750px take them to a certain page with its own markup, styles etc??
Thanks,
Jordan
You can implement media queries
e.g:
#media all and (max-width: 750px) {
/* CSS rules here for screens lower than 750px */
}
#media all and (min-width: 750px) {
/* CSS rules here for screens above 750px */
}
Also see Introduction to media queries – Part 1: What are media queries - Adobe, Media queries - Wikipedia, the free encyclopedia and CSS3 Media Queries overview - CSS Media Queries
You need to Use Media Queries to get what you are looking for.
Refer the link to know more about it.
You can apply CSS to a certain device width only:
#media only screen and (max-width: 767px) {
body { background-color: red; }
}
You can easily show and hide HTML areas that target one or another device. You could even do that with the whole site, even though loading times would suffer, because all devices load the markup of all other devices.
.phone-section { display: none }
#media only screen and (max-width: 767px) {
.phone-section { display: block }
.desktop-section { display: none }
}
Here are some more examples:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml
Screen Sizes:
640x480
800x600
1024x768
1280x1024 (and larger)
CSS media queries for screen sizes