Im trying to change the back ground for a specific post on a mobile wordpress page.
#media screen and (max-width: 940px)
#page {
max-width: 768px;
width: 100%;
margin: 0 auto;
background: #007A52;
box-shadow: 0 0 10px #999;
}
I know page id is used but im not sure how?
http://www.thedoughbros.ie/wp-content/plugins/contact-form-7/includes/css/styles.css
The file above has the following CSS and custom backgrounds for certain posts.
806 represents the post-id so if you want custom backgrounds just keep adding new blocks with different id
#media screen and (max-width: 940px) page.custom-background.page-id-806
/*--------------------------------------------------------------
Custom Backgrounds
--------------------------------------------------------------*/
body.custom-background.page-id-806 {
background-image: url( http://www.thedoughbros.ie/wp-content/uploads/2015/05/menubackground.fw_.png);
}
body.custom-background.page-id-723 {
background-image: url(http://thedoughbros.ie/wp-content/uploads/2015/03/VAN3.fw_.png);
}
body.custom-background.page-id-822 {
background-image: url(http://thedoughbros.ie/wp-content/uploads/2015/03/Restaurant3.fw_.png);
}
#media screen and (max-width: 940px) page.custom-background.page-id-806 {
background: #fff !important;
}
body.custom-background.page-id-346 {
background-image: url(http://thedoughbros.ie/wp-content/uploads/2015/06/14jun.fw_.png);
}
Just add new blocks of CSS
#media screen and (max-width: 940px) page.custom-background.page-id-807 {
background: #fff !important;
}
#media screen and (max-width: 940px) page.custom-background.page-id-808 {
background: #fff !important;
}
#media screen and (max-width: 940px) page.custom-background.page-id-809 {
background: #fff !important;
}
Or multiple
#media screen and (max-width: 940px) page.custom-background.page-id-807, page.custom-background.page-id-808, page.custom-background.page-id-809, page.custom-background.page-id-810 {
background: #fff !important;
}
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
Try to hide the slider background image in mobile screen:
#media screen and (max-width: 800px){
.home #mainSliderWrapper {
background-image: none;
}
.stlye {
background-image: none;
}
.img--holder {
background-image:none;
}
}
It wasn't working, can anyone help me ? The site is: https://uraniamedicalcenter.hu
The id is mainSliderWrapper.
Am i using wrong the class and the id ?
trying these too:
#media screen and (max-width: 800px){
.home #mainSliderWrapper {
background: none !important;
}
#mainSliderWrapper #mainSlider .slide .img--holder {
background-image:none;
}
#mainSlider .slide .img--holder {
background-image:none;
}
#mainSlider .img--holder{
background-image: none;
}
}
won't working
Try it:
#media (max-width:800px) and (min-width: 0px)
And use background, no background-image because in your code it's background
There is the CSS rule
.home #mainSliderWrapper{
background: 'imageURL' !important;
}
that you have to overwrite with your !important custom rule:
$('.home #mainSliderWrapper').css('{ background: none !important }');
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 }
I have a floating banner I want to display over 50% of the width of large screens and 100% of the width of small screens (mobile devices).
The image is sometimes very small (I think on retina displays).
How can I improve my code to display correctly on retina displays, large screens, and small mobile device screens?
In the .css
.banner-sticky {
bottom: -2.5px;
left: 0px;
width: 100%;
text-align: center;
background: rgb(0, 0, 0) transparent;
background: rgba(0, 0, 0, 0);
/* filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";*/
}
.advert-img {
width: 50%
height: auto;
}
#media screen and (max-width: 380px) and (orientation: portrait) {
.advert-img {
width: 100%;
}
}
In the .html file
<meta name="viewport" content="width=device-width, initial-scale=1.0">
.
.
.
<div id="sticky" class="banner-sticky" style="position: fixed;">
<a id="ad-link" href=' #' ><span id="banner-ad"><img src=' foo.jpg' class="advert-img" /></a>
</div>
'<a id="ad-link" href=' + this.landingUrl + ' ><span id="banner-ad"><img src=' + this.imgSrc + ' class="advert-img" /></a>'
You can use CSS media queries to distinguish the screen width, like this:
body {
background: url(foo-small.jpg);
}
#media (min-width: 500px) {
body {
background: url(foo-medium.jpg);
}
}
#media (min-width: 800px) {
body {
background: url(foo-large.jpg);
}
}
In order for this to work, you need to set the image as background in CSS, not as a <img> tag
Try using background-size css rule for every resolution
body {
background: url(foo-small.jpg);
}
#media (min-width: 500px) {
body {
background-size:50%;
}
}
#media (min-width: 800px) {
body {
background-size:80%;
}
}
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.