BlackBerry Email Responsive Queries - media-queries

I'm creating an email template in MailChimp, and I have some responsive code that I want to work for the devices that support it (primarily iOS Mail and BlackBerry Mail apps).
While the template loads the responsive media queries correctly in the iOS Mail app, they don't appear to trigger within the BlackBerry Mail app. I am testing on both a BlackBerry Z10 and Q10 with the same up-to-date OS.
My media query looks like this:
#media only screen and (max-device-width: 600px) {
#templateContainer {
width: 100% !important;
}
.globalLogo {
width: 90% !important;
}
.logoBox {
display: block !important;
width: 100% !important;
}
.imageBox {
width: 100% !important;
display: block !important;
height: 40px !important;
border-left: none !important;
}
.emailTitle {
text-align: center !important;
}
#title {
border-top: 3px solid #FFF !important;
width: 100% !important;
display: table !important;
}
.topImageRow {
display: none !important;
}
.tableofcontents {
margin:0 0 30px 0 !important;
list-style: outside !important;
width: 90% !important;
}
}
I've also added the following viewport meta tag to the header:
<meta name="viewport" content="width=device-width; initial-scale=1, maximum-scale=1">
I've experimented with max-width instead of max-device-width, but it doesn't seem to make a difference. I've also tried 800px instead of 600px, and removing the "only screen and" from the media query.
Any help would be greatly appreciated.

Final Answer:
Send it to a different email account domain. It can sometimes be the security filters at your workplace, so if you're sending it to you#yourwork.com, try hooking up you#yourotheremail.com to your blackberry and checking it there.
Original:
Not really a definitive answer, but hopefully this will get you closer...
Create a really easy media query to trigger (something like max-width:99999px;) and change the color or something really noticeable. Does it work at all?
If it is triggering, step your way down until it stops. If you can't get it to trigger at 99999px, it doesn't support media queries, even though the support charts suggest it does.
Sometimes your server can strip the media queries, so try testing it on different domain also, particularly if you have any sort of corporate server or software.
Another thing you could do is try and view the output code to see if your CSS is still intact. Not sure how to view this on a Blackberry though.

Related

Apple Pay on Blueprint themes

Is a theme modification necessary for blueprint themes in order to properly provide support for apple pay or is it provided through the %%GLOBAL_AdditionalCheckoutButtons%% variable?
To get the apple pay button with white bg/black text, you need to add the following css:
.apple-pay-checkout-button {
background-image: -webkit-named-image(apple-pay-logo-black);
background-color: white;
}
For black text/white bg:
.apple-pay-checkout-button {
background-image: -webkit-named-image(apple-pay-logo-black);
background-color: white;
border: .5px solid black
}
The necessary html and integrations bits are already there with the variable you mentioned

media queries not working for medium range

I'm trying to change my website's body padding depending on the screen size, but the medium range does not work. The website still uses the body padding of the default mobile size. I have tried lowering the min-width from 768px to 767px or lower to see if that will change anything but it didn't. I cannot see what is wrong with the syntax. Have I missed something? Thank you.
body{
padding-bottom: 300px;
margin-bottom: 900px;
}
#media (min-width:768px) and (max-width: 991){
body{
padding-bottom: 300px;
margin-bottom: 500px;
}
}
#media (min-width:992px) {
body{
padding-bottom: 300px;
margin-bottom: 100px;
}
}
#media (min-width:768px){
/*more codes here....... */
}
Should be max-width: 991px
Also, your last query with "more codes..." can override your previous settings. What are they? if you set those properties here, you literally saying "Ok, apply these when the screen is larger than 768px". This is within your previous range and will be overridden.

CSS transitions + absolutely positioned HTML5 video + poster cause flickering

I have a very specific scenario which I spent a decent amount of time replicating in an MCVE. As far as I can tell, these are the requirements:
Something on the page animates using the standard CSS transition property (not transform)
The HTML5 video has a poster that I provide with a url (the video still generates its own poster from the first frame anyway)
The video is absolutely positioned (used to hack a scaleable ratio)
I'm using Chrome 50 on Mac OS, but this issue has been duplicated on Windows. It does not appear to be an issue in Firefox or Safari on Mac OS.
Here is a JSFiddle illustrating the problem. Notice how when you hover over the div that says "Hover," the video switches between my poster and its own auto-generated poster. This only appears to occur before the video is played.
.anim {
width: 50px;
height: 50px;
background: grey;
transition: all 0.2s linear;
transform: rotate(0deg);
color: white;
display: flex;
align-items: center;
justify-content:center;
}
.anim:hover {
background: black;
transition: all 0.2s linear;
transform: rotate(90deg);
}
#video-container {
position: relative;
height: 0px;
padding-bottom: 56.25%; /* 16 x 9 */
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="box" class="anim">
<div>
Hover
</div>
</div>
<div id="video-container">
<video controls poster="https://pbs.twimg.com/profile_images/447374371917922304/P4BzupWu.jpeg">
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm">
</video>
</div>
Why is this happening? If I can't easily fix this, what would be the best way to maintain the scaleable aspect ratio of a video on a page that has a CSS transition?
Such situations with transitions/translates on page you can very often resolve using "magic" transform: translateZ(0) for parent or children elements (depends on situation).
In your case it is enough to add this transform to the #video-container:
#video-container {
position: relative;
height: 0px;
padding-bottom: 56.25%; /* 16 x 9 */
transform: translateZ(0);
}
Applied solution jsFiddle
This appears to be a bug in Chrome. I have submitted a Chromium bug report (Issue 617642) in hopes that it will be fixed.
In the meantime, I discovered that this issue only occurs if the element with the transition effect appears earlier in the HTML than the video. Using flex-direction: row-reverse or flex-direction: column-reverse I can switch the order of some elements in the HTML and again in the CSS so they appear in the right place but the transition does not affect the video thumbnail.
UPDATE: As of Chrome 77, this issue appears to be fixed.

How to change entire header on scroll

I have a client that wants a header like on this site http://www.solewood.com/
I have found a few questions here but they are geared only for a certain element of the header. Here is the site I am working on http://treestyle.com/ The password is vewghu
They are both shopify sites. Any help would be greatly appreciated.
If you inspect the solewoood website you can get an idea of how they've implemented the header.
When the page is at the top, there is this CSS for the header div:
<div class="header">
.header {
position: fixed;
transition: all 500ms ease 0s;
width: 100%;
z-index: 1000;
}
And when you scroll down, the .header_bar CSS class is added to the div as well:
<div class="header header_bar">
.header_bar {
background-color: #FFFFFF;
border-bottom: 1px solid #E5E5E5;
}
.header {
position: fixed;
transition: all 500ms ease 0s;
width: 100%;
z-index: 1000;
}
There are a few other things that are also changed when the user scrolls down from the top (logo, text colour, etc.), but you get the idea.
If you are unsure how to detect if the user is at the top of the page, see here.
EDIT:
In response to your comment, try using jQuery's .toggleClass() with 2 parameters.
For example:
$(window).scroll(function(e){
$el = $('.header');
$el.toggleClass('header_bar', $(this).scrollTop() > 0);
});
This shows it quite nicely: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_shrink_header_scroll
I used this technique to turn the background-color to white on scroll, then back to transparent when back at top.
And if you wanted to completely swap out headers. You could duplicate the headers, then use this to turn display on and off for those.

CSS blocks side by side

Is that possible to do with CSS.
I tried this:
#gallery_ul {
display: inline-block;
list-style: none outside none;
margin: auto auto auto auto;
width: 986px;
}
#gallery_ul li {
float:left;
margin:10px;
padding:10px;
text-align:center;
border:1px solid grey;
width:274px;
}
#gallery_ul img {
padding-bottom:5px;
}
If yes then how? Thank you.
You can either do it with CSS-columns or with javascript. I would suggest javascript, unless you don't need to worry too much about browser support/quirks.
See the masonry plugin for the most popular way to do so: http://masonry.desandro.com/
You can. But i think you have to be more specific.
One approximation is to create each block and set "float: left" property, then the squares will organize automatically or you can create three vertical columns and then put the squares inside.