Bootstrapemail Gmail-mobile-webapp does not support `display: none` - html

I use bootstrapemail to make my e-mails. But with I have problems with Gmail Mobile Webmail.
The user-icon must not be shown on mobile devices. But here it is shown in the logo in the header.
It doesn't respond to: display: none;. Also it ignores the col-lg classes of bootstrap-email when the header becomes to small. Can eneyone help me?
This is my code:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body class="bg-gray-200">
<div class="container">
<!-- Header Begin -->
<div class="w-full p-4 bg-black">
<div class="row">
<div class="col-lg-10">
<!-- Logo of Voetbalshop.nl -->
<img class="h-12 ay-middle" src="#">
</div>
<div class="col-lg-2 ay-middle ax-right">
<!-- User Icon redirect to login page of Voetbalshop.nl when clicked on -->
<a class="no-underline" href="#">
<img class="w-7 d-none d-lg-inline ay-middle" src="#">
</a>
</div>
</div>
</div>
<!-- Header End -->
In the image below tou can see what it looks like now.

Display:none is not supported on Gmail Mobile Webmail (but that's an extremely tiny percentage of people who use that - it is not the Gmail Mobile Apps): https://www.caniemail.com/clients/gmail/#mobile-webmail
It also doesn't support <style> blocks, along with Gmail IMAP (a type of Gmail account used a lot more): https://www.caniemail.com/features/html-style/. So since Bootstrap Email relies on #media queries in the <style> block for responsive behaviour, you won't be able to get responsive classes working in these clients (basically every other mobile client supports it).
You could try adding your own styles like style="width:0;height:0;" (inline on the image) and then adding a custom embedded style to show it in desktops like <style>#media screen and (min-width:600px) {img .d-none {width:50px!important;height:50px!important;} }</style>. (Caveat: there are a couple of less-used desktop applications that don't support the <style> block, and you'll have to do something about Outlook, but you can use their conditional block for that)

Related

Responsiveness of Bootstrap page [duplicate]

This question already has answers here:
Responsive website zoomed out to full width on mobile
(4 answers)
Closed 4 years ago.
Can you say why do this code is not adapt to different mobile devices? I am HTML beginner and can not figure it out. I'm using Bootstrap 4 framework.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="xxxxx.css">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif|Gloria+Hallelujah|Indie+Flower" rel="stylesheet">
<title>xxxxx</title>
</head>
<body>
<div class = "container">
<hr class = "spec-hr">
<div class = "row justify-content-md-center">
<div class = "col-md-6 text-left name">
xxxxxx
</div>
<hr class = "spec-hr">
</div>
<div class="row justify-content-md-center intro">
<div class="col-md-3 text-center">
Photo
</div>
<div class="col-md-3 text-center">
Kontakt<br>
<p class = "email">xxxxx#gmail.com<br>
mobile: xxxx<br>
facebook: xxxxx</p>
</div>
</div>
<hr class = "spec-hr">
<!--Motto-->
<div class="row justify-content-md-center motto">
<div class="col-md-6 text-center">
<p class="motto">Every day is a chance to get better<br></p>
<p class = "podpis" >(Lukasz Fabianski, goalkeeper Sweansy City)</p>
</div>
</div>
<hr class = "spec-hr">
</div>
</body>
</html>
You use classes such as col-md-6 and col-md-3, these are for medium sized screens., for mobiles, you need classes such as col-6 and col-3. See here for examples and definitions
"Can you say why do this code is not adapt to different mobile
devices?"
The meta tag is wrong. It should be:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
The page will never be responsive without the correct meta tag. Please read the documentation...
"To ensure proper rendering and touch zooming for all devices, add the
responsive viewport meta tag to your <head>."
Also see:
Simple Bootstrap page is not responsive on the iPhone
Responsive website zoomed out to full width on mobile
For design to be responsive for mobile devices, use bootstrap classes like col-xs-3, col-xs-6. "col-xs-*" is used to target mobile devices having width greater than 230 and less than 768. Also use #media screen {} to target specific style to specific width mobile device.

Bootstrap viewports not recognized

In bootstrap, I'm trying to show divs A and B stacked on extra small devices and displayed in one line on small devices and above. (just like in this example: https://getbootstrap.com/docs/4.0/layout/grid/#stacked-to-horizontal)
However, the divs are not stacked on extra small devices (using Firefox ESR 52.4), but stay the same across all device sizes.
Any hint about what I am missing would be great:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>title</title>
<!-- Bootstrap related files -->
<link rel="stylesheet" href="vendor/bootstrapcss/bootstrap.min.css">
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrapjs/bootstrap.min.js"></script>
<script src="vendor/workarounds/ie10-viewport-bug-workaround.js"></script>
<!-- Custom styles -->
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
A
</div>
<div class="col-sm-8 hidden-xs-down"
style="text-align:right">
B
</div>
</div> <!-- /.row-->
(...)
There are other bootstrap elements further down on the page which work, but the layout instructions do not. I have checked that all related js and css files are available, they all return status 200.
Bootstrap grid classes are specific to certain screen sizes and can be used together. (https://getbootstrap.com/docs/4.0/layout/grid/#grid-options) If you want the divs in the row to stack on extra-small (xs) give them the class col-12 to force the columns to take the full width of the row on devices smaller than 576px wide.

Creating a header image with bootstrap

To learn more about web development I am trying to make a webapp.
My first challenge is working out how to interface Django, Bootstrap and custom css.
I am trying to create a nav bar consisting of an image where I can overlay a profile image, a link to your account settings etc. I would like it to look like the following image:
Essentially it would be a responsive nav bar where the height is set at say 200px and the width is always 100% of your browser window.
I have got my custom css as below:
.wide {
width:100%;
height:100%;
height:calc(100% - 1px);
height:200px;
background-size:cover;
}
And I have tried to interface this with the HTML below:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/mapvpage/style.css">
</head>
<body>
<div class="wide">
<img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
<div class="col-xs-5 line"><hr></div>
<div class="col-xs-2 logo">Logo</div>
<div class="col-xs-5 line"><hr></div>
</div>
</body>
</html>
I have got the image into my page. However I cannot work out how to change the image size in any way. I am also a bit confused as to how custom CSS interacts with Bootstrap and Django. Can I just use a mix of Bootstrap and custom CSS as and when I want for different elements?
Many thanks for any help, I have been working on this for a while and getting nowhere so would appreciate some guidance!
Update:
CSS:
#header {
background-image:url("paper.gif");
max-width:100%;
max-height:auto;
}
HTML:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static "mapvpage/style.css" %}">
</head>
<body>
<div class="row" id="header">
<div class="col-md-3 col-md-offset-9">
<img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
</div>
</div>
</body>
</html>
Note I loaded the CSS stylesheet in a different way (as suggested in the other answer). It was working before (as I tested it with simple font sizes etc) so not sure if that was necessary.
First of all I will answer your question about mixing things.
When you use Django, this means that you have a Django application that renders some html and sends it to the client to display it in a browser. This html, uses bootstrap in order to give a consistent and responsive style. What bootstrap does is to apply some css to your html. However, if the functionalities provided by bootstrap are not enough, you can always include your own custom css and there is no problem with that.
About your header, I would do it having a bootstrap row with a background image and a col with padding to include the image:
<div class="row" id="header">
<div class="col-md-3 col-md-offset-9">
<img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
</div>
</div>
Then, you would need to add the background image of the header to the header div:
#header {
background-image:url("paper.gif");
}
You can easily find some more properties to add to the header css in order to center the image, expand it to fill the whole div...

Objects in HTML

I am currently redesigning a site using svg. However I have run into several issues that I have yet to solve. This is a three part question.
How do you make an object which is an svg file dynamically change to fit on screen that are smaller than the viewbox without the file getting cropped. The svg file in this case is diagonal arrow.
How do you keep text in the same location based on this dynamically changing image, so that the arrow always points to the text no matter the screen size, without using vague #media queries throughout the css file (eg. min-width:15 to max-width:40...). Example of the arrow with the apple
When using objects in html, how do I replace an object with another object based on screen size. For example I have an svg of an apple above the arrow and when the screen resolution hits 1000px it shows this arrow and when its below it shows a flipped version of this arrow. It would have been easy using srcset with img, but because I have the to change color of the arrows using svg styling I can't use img.
Thank you for all your help.
Dropbox file of website
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://orgrune.com/style.css">
</head>
<body>
<div class="container">
<header class="clearview col-xs-12 col-md-12 col-lg-12 col-md-12 text-uppercase">
<h1>Home</h1>
<hr class="hr-cl">
</header>
<div class="clearview col-xs-12 col-md-12 col-lg-12 col-md-12">
<div class="svg-container">
<object type="image/svg+xml" data="http://orgrune.com/Untitled-3.svg" class="svg-content "></object>
</div>
</svg>
<a class="photography text-uppercase" href="\" alt="photography">photography</a>
</div>
</div>
</body>
</html>

Material Design Lite responsive CSS not working on a Mobile/Tablets or in the Chrome DevTools emulator

When experimenting with the responsive features of Google's Material Design Lite, this code hides messages as expected when resizing the browser window, but when I look at my page in Chrome DevTools device emulator or on an actual device, it only shows the "Desktop" version. How do I fix my HTML?
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.indigo-pink.min.css">
</head>
<body>
<div class="mdl-cell--hide-phone mdl-cell--hide-tablet">
You are on a desktop
</div>
<div class="mdl-cell--hide-desktop mdl-cell--hide-tablet">
You are on a phone
</div>
<div class="mdl-cell--hide-desktop mdl-cell--hide-phone">
You are on a tablet
</div>
</body>
</html>
To fix MDL not scaling for different devices, add this line inside your HTML's <head> :
<meta name="viewport" content="width=device-width, initial-scale=1.0">