I have an adult wordpress blog and I am using juicyads as my affiliate advertising network. I have one pop-under which I would like to disable on mobile devices only because I realized it is a big nuisance for the mobile visitor which will hurt my traffic.
The script is in the header and begins and ends as below:
<!-- Begin JuicyAds PopUnder Code -->
<script type="text/javascript">juicy_code='9454y2u2w256r2r2s2c42354';
<!-- End JuicyAds PopUnder Code -->
Is there any way I can modify it so it does not appear on mobile visits? Thank you.
Kind regards,
Pintersex
Replace the code with this:
<div id="mobile-popup">
<script type="text/javascript">juicy_code='9454y2u2w256r2r2s2c42354';
</script>
</div>
Add this to CSS
#media screen and (max-width: 480px) {
#mobile-popup {
display:none;
}
}
Related
In 2019, email developers used to be able to target yahoo mail's css with the media query below:
<body>
<style>
#media screen yahoo {
.class-name {css}
}
</style>
My issue is with using web fonts. I need to target font-size for yahoo mail.
Is there a new method for targeting yahoo mail css in 2020?
Thanks
Alice Li of Litmus has worked out that the new Yahoo filters for 2020 do not filter out weird unicode characters.
However, it appears to capture AOL & Yahoo (I say 'appears' because it comes up intermittently on Litmus previews):
<html>
<body>
<!-- START force fallback on Yahoo/AOL -->
<style>
.& #√ .yahooAOLhide {display: none !important;}
.& #√ .yahooAOLshow {display: block !important;}
</style>
<!-- END force fallback on Yahoo/AOL -->
<table id="√"><tr><td>
<div class="yahooAOLhide">
########
</div>
<div class="yahooAOLshow" style="display: none;mso-hide:all;">
YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO!
</div>
</td></tr></table>
</body>
</html>
As you can see, the <style> section must be written in the <body> so as to work with the Yahoo app too.
I am using this system to solve this problem. I have just found that with a lot of try/error testing with the Gmail/Yahoo/Outlook and MacMail and this seems to work. The element with the id="yahoo-show" is only visible in Yahoo. However I don't know if it will still work with other less used mailing systems. None of the answers written here seems to work fine for me but this.
#media only screen{
[id="yahoo-show"]{display:block !important;}
}
/* Intended commented line (Otherwise it will appear in both Yahoo and MacMail App) */
a[id="yahoo-show"]{display:none !important;}
Here it is:
<!-- START force fallback on Yahoo -->
<style>
.& #☃ .yahoohide {display: none !important;}
.& #☃ .yahooshow {display: block !important;}
</style>
<!-- END force fallback on Yahoo -->
I just had a hell of a time with my email that worked in all versions of Outlook but was running into issues on Yahoo Mail and AOL Mail. I tried the yahoo media query and could not get it to work, and so I figured I would try #supports and it worked.
#supports not (box-sizing:border-box) has the parameter filtered out and becomes #supports not (_filtered_a), thus becoming true and then targets the desired elements. My Email on Acid test confirms it works for AOL and I verified it on my test Yahoo account.
I have designed a website that uses a CSS hamburger menu to activate a slidebar with a links to different webpages on the site.
I also have written an iPhone/andriod apps that need to have an hamburger menu that open a slider work that run swift and android code.
I want to add to the iphone/android hamburger slidebar links to the website (which has it own hamburger menu)
How can I test on the website if it a mobile device or a PC, so I can turn off if "Website" hamburger if its a mobile, since I already have and need the hamburger menu on the mobile.
I have php on the website so I can remove the hamburger menu on the website if its a mobile.
This is the main page
<html>
<div class="w3-sidebar w3-bar-block w3-card-2 w3-animate-left" style="display:none" id="mySidebar">
<button class="w3-bar-item w3-button w3-large" onclick="w3_close()">Home</button>
Link 1
Link 2
Link 3
</div>
<div zclass="w3-main" id="main">
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button>
<div class="w3-container">
<h1>My Page</h1>
</div>
Thanks
so there are a few ways of doing this, but a really simple one is something like this:
var width = $(window).width(); //jquery
var width = window.innerWidth; //javascript
if(width > 1000){do large screen width display)
else{handle small screen}
of course 1000 is just an arbitrary number. it gets tricky because when you consider tables, there really are screens of all sizes so its up to you to determine what belongs where
How can I test on the website if it a mobile device or a PC, so I can
turn off if "Website" hamburger if its a mobile,
If I understood you correctly, you could use CSS #media -rules, to setup CSS rules that only apply to smaller devices. Below is a simple code-snippet example of a CSS media-query.
#media (min-width: 700px), handheld
{
.w3-sidebar
{
display: none;
}
}
My website 5focusmanagement.com is not displaying completely on mobile. Only footer is displaying. May be error with HTML tags or CSS styling. Here I am attaching code. Please suggest me how can I display complete website when we open on mobile browsers. Thank you.
Please download the code here..
<div class="container hidden-phone">
You have a hidden-phone class that hides the content on mobile devices.
.hidden-phone {
display: none !important;
}
Remove this rule and the content will be displayed.
I am redesigning my site for mobile first. I have read a few stackoverflow questions relating to this but none seemed to be a complete answer. I searched the web and came across http://www.smashingmagazine.com/2013/04/03/build-fast-loading-mobile-website/
In the CODE FOR MOBILE-FIRST section, it says the best way to conditionally load images for different screen sizes. What I'm looking for is that, but for html elements.
<div class="social_buttons">
<ul>
<li>google</li>
<li>twitter</li>
<li>facebook</li>
<li>pinterest</li>
</ul>
</div>
I do not want this section of html to be loaded when loaded from a mobile device, however I DO want it when called from desktop computer.
Using the solution from smashingmagazine (conditionally loaded using css) is it possible doing it this way or does it just apply to images?
Thanks for any help =)
one way is to redirect and load different html based on the device.
check this Link.
or use jquery plugin Link.
I suggest using media queries to display respective content but using this method you load the whole HTML but display based on the device.
information about media queries -LINK
like this
<div class="social_buttons">
<ul>
<li>google</li>
<li>twitter</li>
<li>facebook</li>
<li>pinterest</li>
</ul>
</div>
css
#media (min-device-width: 640px) {
.social_buttons{
display:none;
}
}
You can do it with javascript. Just do what you want in case of mobile or desktop.
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// mobile
} else {
// desktop
}
I'm trying to create a fullscreen, mobile friendly theme which displays Featured Images of posts as big as they can be with no cropping. This means in landscape displaying them with height:100%; width:auto;, but in portrait displaying them width:100%; height:auto. (As in many iOS apps.)
Trouble is, I'm having a real bugger of a time getting this to work in WordPress. When I developed the theme as a static HTML test site, it all worked completely fine. But for some reason, when I converted the site to a theme, it started ignoring the width:100% in portrait.
I know it's not the media query itself that is broken/being ignored, because the nav menu which is within the same portrait media query works fine.
Initially I thought WordPress' inline Image sizes had overridden my responsive ones (which would make sense, cascade-wise) but that doesn't seem to be the case as the image displays fine with height:100% in landscape viewports. In portrait, it seems to be listening to the height:auto command.
It's literally just the width: 100%; command that is being ignored.
I've also added in max-width: 100% just for good measure, and tried it with !important in various places. No effect.
Here's the code so you can see it's not a silly missing semicolon.
#content img {
width:100%;
max-width:100% !important;
height:auto;
}
I have also validated my CSS and nothing seems to be wrong there.
And here's the HTML
<div id="content">
<div title="Click to flip" class="sponsor">
<div class="sponsorFlip">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
</div>
<div class="sponsorData" style="display:none">
<?php
if( class_exists( 'kdMultipleFeaturedImages' ) ) {
kd_mfi_the_featured_image( 'featured-image-2', 'post' );
}
?>
</div>
</div>
</div><!-- End div #content -->
& here's some screenshots.
Please, oh please, somebody save me from my portrait problem.
Try this, may be...
Give this in the <head /> part.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
So I've basically solved this now in that I've got it working how I wanted it to - However I don't really understand why it now works.
I've deleted the Portrait Media Query so the default setting is portrait, and then left the landscape stuff in there conditionally. Is there something wrong with putting both a portrait and landscape media query in the same document? I can't seem to find anything about it on the web, and I'm sure I only had this problem when I converted the site to a wordpress template.