I'm searching for what's the code for a display 28", by code I mean the CSS media query, like this in the example.
Example:
#media (max-height: 1200px) and (min-width: 1920px) {
.nav-over {
width: auto;
float:right;
margin-right: 420px;
}
.nav {
list-style: outside none none;
margin-bottom: 0;
padding: 0px;
margin-top: 0px;
margin-right:400px;
}
.navbar-brand {
margin-left: 250px;
}
}
Thanks for the help.
That is super specific and I would not recommend doing it, but the way to do it is this
If you calculate the DPI (dots per inch) you can use this link to get the DPI
For 28″ you get 1920 x 1080 measures at 78.68 DPI and 1200x960 is 54.88 DPI
So for 1200px you get something like:
#media screen
and (min-device-width: 1200px)
and (min-resolution: 53dpi)
and (max-resolution: 60dpi) {
}
You can try to run the following JS code on the 28" device to find the height and width:
let height = window.screen.availHeight;
let width = window.screen.availWidth;
console.log(height, width);
Related
I have taken a screenshot of it in google chrome devtools to help explain this.
I have used scss that is then ccompiled to css using Koala. The media query is after the original css meaning it should be over written, however this is not the case.
Any explanation is appreciated (I have added some code examples so you dont have to view the image)
Line 190:
#recent-users, #frequent-trees{
width: calc(50% - 80px);
padding: 0px 40px;
}
Line: 261:
#media only screen and (max-width: 600px) {
#recent-users, #frequent-trees {
width: 90%;
padding: 0px 5%;
}
}
If you look carefully the selector is:
#content #recent-users, #content #frequent-trees
You either set the same for the media query:
#media only screen and (max-width: 600px) {
#content recent-users, #content #frequent-trees {
or use !important rule to override it:
#media only screen and (max-width: 600px) {
#recent-users, #frequent-trees {
width: 90% !important;
padding: 0px 5% !important;
}
}
More info: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
good evening, I am using Joomla built in Bootstrap2. I am making website in full width view, the problem is below 768px 20px padding add on both sides of the screen. I have added following but its not working:
#media (max-width:767px) {
.container-fluid {
padding: 0;
}
}
Thank you for your help.
Regards,
You need to update the rule defined in the responsive-bootstrap.min.css. Code in that file is :
#media (max-width:767px) {
body{
padding-left: 20px;
padding-right: 20px;
}
}
So to make it zero you have to override that rule so replace your code with this:
#media (max-width:767px) {
body{
padding: 0px;
}
}
Why is custom background showing? Here is the css i have added that should work.
#media (min-width: 992px) {
body.custom-background {
background-image: none !important;
display: none; }
}
Link to the website: http://goo.gl/RgG2Ct (scroll down and you will se this strip that is only suppose to be on the mobile version)
You can try with
#media screen and (min-width: 992px)
try this code:
#media (min-width: 992px)
{
body
{
background-image: none !important;
}
}
thanks.
You need to clean things up a bit... try it like this:
#media screen and (min-width: 480px) {
body.custom-background {
background-image: none !important;
display: none;
}}
It seems you have an extra set of () and one misplaced }
Ive been looking all over and I cant find any solution to this. My media queries don't work on mobile devices but they work when I re size my screen.
YES I do have:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In the head of my document.
Here are what my media queries look like:
#media only screen and (max-width: 1100px) {
.r-menu {
display:inline;
}
.m-menu {
display:none;
}
}
#media only screen and (max-width: 900px) {
.res-full {
width: 100%;
}
}
Thanks.
Here is the whole code: http://scratchpad.io/marvelous-holiday-5460
Replace only screen with all
#media all and (max-width: 1100px) {
.r-menu {
display:inline;
}
.m-menu {
display:none;
}
}
#media all and (max-width: 900px) {
.res-full {
width: 100%;
}
}
screen is used for computer screens whereas all is used for all media type devices
Do you really need to use "only"?
I found that the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Why don't you try removing it?
Found the mistake Use min-width not max-width
/*If screen is less than 900px don't show full menu*/
#media(max-width: 900px) {
.r-menu {
display:inline;
}
.m-menu {
display:none;
}
}
/*If screen is greater than 900px then show full menu*/
#media(min-width: 901px) {
.res-full {
width: 100%;
}
}
Use this css
#media screen and (max-width: 1100px) { .r-menu {
display:inline;
}
.m-menu {
display:none;
}}
#media screen and (max-width: 900px) {
.res-full {
width: 100%;
}}
working all devices & screens
Instead of just having text for example
If I do
1-800-123-4567 then it will be broken on desktops.
If I do (800) 123-4567 then it will display as the number on desktop but should automatically become a link on Android and iPhone
But if I want to make an image like this:
Is there a solution, possibly with media query or any other way. That I can make this image display on desktop and mobile but on mobile function as a button? This is for email so only HTML/CSS options.
Based on the answers I have this and it didn't work either:
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-image { display: block; } /* show it on small screens */
#my-link { display: none; } /* hide it on small screens */
}
#media screen and (min-width: 401px) and (max-width: 1024px) {
#my-image { display: none; } /* hide for all below 401px*/
#my-link { display: block; } /* show for all above 401px*/
}
Along with:
<div id="my-image">
Call Now!
</div>
<div id="my-link">
Call 1-800-328-4766
</div>
And it still is not working, both links are showing up.
Deleted my old answer, because it was poor. Please try this http://jsfiddle.net/qDUqS/
The telephone number looks the same both in small screen and in big screen, but it acts like a link, only on smaller screen.
Html:
<span class="phone"><img src="http://goo.gl/PdeeU" />1-800-123-4567<p>1-800-123-4567</p></span>
CSS:
.phone
{
background-color: #152C48;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 4px;
}
a
{
display: inline-block;
text-decoration: none;
color: #ffffff;
padding: 0px;
}
img
{
vertical-align: middle;
width: 24px;
height: 24px;
padding: 0px;
}
p
{
display: none;
color: #ffffff;
padding: 0px;
}
#media only screen and (min-width: 480px) and (max-width: 1920px)
{
a
{
display: none;
}
p
{
display: inline-block;
}
}
Hey I don't know if this is what you are asking for but it might help.
Do let me know.
http://www.wpbeginner.com/wp-tutorials/how-to-add-clickable-phone-numbers-for-smartphones-in-wordpress/
Sorry if this is not what you were looking for.
NOTE: Updated my code and all works as it should be now. set the max-width to 9999px.
Working JSFIDDLE
Make a div and put the image inside that div:
<div id="my-image"></div>
The css would look like this:
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-image { display: block; } /* show it on small screens */
}
#media screen and (min-width: 401px) and (max-width: 9999px) {
#my-image { display: none; } /* hide for all below 401px*/
}
for your button/link you can do the same but then otherwise:
<div id="my-link"></div>
The css would look like this:
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-link { display: none; } /* hide it on small screens */
}
#media screen and (min-width: 401px) and (max-width: 9999px) {
#my-link { display: block; } /* show for all above 401px*/
}
Hope it helps.
The answer is very simple, just ad opacity "transparrency" to the desktop code.and copy the code to mobile while setting the opacity to 1.