I've got this in my .css file...
#media (min-width: 576px) {
.mt-5-xs { margin-top: 5px; }
.mt-10-xs { margin-top: 10px; }
.mb-5-xs { margin-bottom: 5px; }
.mb-10-xs { margin-bottom: 10px; }
}
#media (min-width: 768px) {
.mt-5-sm { margin-top: 5px; }
.mt-10-sm { margin-top: 10px; }
.mb-5-sm { margin-bottom: 5px; }
.mb-10-sm { margin-bottom: 10px; }
}
And then this in the HTML:
<div class="mt-5-xs mt-5-sm">
<button ...></button>
</div>
However, the margin-top does not render on small screens. And when I look at the Styles in dev tools, they don't even show up. It's like the classes don't exist in the css. I know the html page has access to the overall .css file, because it's where every other class is, and they all work fine.
I'm doing something wrong, just not sure what.
Try #media only screen and (min-width: 576px).
Based on your posted codes, your HTML code has the issue not the CSS as your must add class="" attribute to your div
<div class="mt-5-xs mt-5-sm">
<button ...></button>
</div>
Update : also as already other persons mentioned, if you are checking below 576px then you should add a #media (max-width:575px) or maybe 576px too.
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
I want to add a margin (a break <br>) between the title and the price tag on mobile. the website is http://www.jokerleb.com. I tried
.h3{
margin:5px;
}
// and
.tags{
margin:5px;
}
and I also tried working on other divs and media queries, nothing worked, it seems that just applying a margin won't change anything. I've been working on this super silly problem for 2 days and don't know why it's not working.
Just add media query like following to get the issue fix.
#media (max-width:400px) {
.tags {
margin-bottom: 8px; /* Added */
padding: 0;
float: right;
right: 24px;
bottom: -12px;
}
}
You are doing it in a wrong way! It's crazily floated and stuff. You might need to do this and it would work:
#media screen and (max-width: 400px) {
.post-block .post-right h3 {
max-width: 100%;
float: none;
padding-top: 40px;
}
}
Preview
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;
}
}
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.