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
Related
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);
Here is my code:
.el {
padding-top: 20px;
}
#media (max-width: 979px) {
.el{
padding: <anything already been> 10px 10px 10px;
}
}
Is there something to use as <anything already been> ?
I can do that like this:
#media (max-width: 979px) {
.el{
padding-right: 10px;
padding-left: 10px;
padding-buttom: 10px;
}
}
But I just like to know is there any approach to do that in one line?
I'm going to state that no, it is not possible.
Inherit would be the sufficient replacement, but this cannot be achieved because inherit counts for all 4 properties of the shorthand. You cannot semi-overrule part of it by entering inherit randomly.
Besides, with padding, it will always be converted from padding to padding-top, padding-left etc etc. Which will (as #Pete stated) overrule the original value everytime.
You should stick with your second approach:
#media (max-width: 979px) {
.el{
padding-right: 10px;
padding-left: 10px;
padding-buttom: 10px;
}
}
Theres no way to do what you want to do. You could get something closeish with custom properties to achieve this.
For example:
.el {
--paddingTop: 20px;
padding: var(--paddingTop, 0) var(--paddingRight, 0) var(--paddingBottom, 0) var(--paddingLeft, 0);
}
#media (max-width: 979px) {
.el{
--paddingRight: 10px;
--paddingBottom: 20px;
--paddingLeft: 20px;
}
}
This would be fine to use on 1 off situations but would give you way too much overhead to want to do this everywhere imo.
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;
}
}
I have a, for me, strange situation that I have never came across before.
I have created a class that defines a font-size of 0.8vw
If the screen-size-width is smaller then 750px a new media query is loaded where the font-size is 3.2vw.
Because this is the same class I have to use !important on the 750px query.
Here comes the problem.... If, and there is, there will be another media-query I have to use another !important but as far as I know that won't be possible.
I'm starting to think that I don't fully understand how to use the media-queries in combination with different styles.
Here is an example of how this should go:
#media (max-width: 750px) {
.header_devider{
font-size: 3.2vw !important;
}
}
#media (max-width: 320px) {
.header_devider{
font-size: 4vw !important;
}
}
.header_devider{
font-size: 0.8vw;
}
<div class="header_devider">
test content
</div>
Hope somebody can tell me how to fix this.
M.
Declare your media queries after your initial style declaration and it should work:
.header_devider {
font-size: 0.8vw;
}
#media (max-width: 750px) {
.header_devider {
font-size: 3.2vw;
}
}
#media (max-width: 320px) {
.header_devider {
font-size: 4vw;
}
}
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.