I try to lock screen orientation on a portrait for mobile and iPad devices. I can use CSS snippet I found on css-tricks.com
#media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
This original CSS won't work because some small-size laptops could be considered as iPad or iPad won't fall under (max-width: 767px).
As well, in my code, I use the CURRENT-DEVICE module to detect the type of device in the code. I want to use this module to detect mobile and tablet and apply the CSS snippet I showed above. I can detect device on JS like:
if (device. Tablet()) {
do something
}
But how to trigger CSS?
On the current-devise github page, they have CONDITIONAL CSS. But I cannot understand how to use them. I googled but couldn't find more information. I hope somebody worked with this module and can help me.
You could use JavaScript to insert a stylesheet like this:
if (device. Tablet()) {
var newStyleSheet = document.createElement('style')
document.head.appendChild(newStyleSheet);
var sheet = newStyleSheet.sheet;
sheet.insertRule(`
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
`, 0);
}
The mobile nav icon disappears just fine to reveal the desktop nav when I expand the window, but the mobileNavSections div doesn't disappear when it's greater than the specfied screen width. The toggling function works as intended.
function displayMobileNav(){
var x = document.getElementById("mobileNavSections");
if (x.style.display == "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.mobileNav {
display: none;
}
#mobileNavSections {
display: none;
background-color: white;
position: fixed;
z-index: 1;
margin-top: 60px;
width:100%;
height: flex;
}
#mobileNavSections a {
display:block;
color: black;
margin: 5%;
text-decoration: none;
font-size: 17px;
opacity:0.5;
}
#mobileNavSections a:hover {
opacity: 1;
}
#media only screen
and (max-width: 768px){
.mobileNav{
display: block;
}
.mobileNav img {
height: 30px;
}
.mobileNav:hover {
cursor: grab;
}
}
<nav>
<div class="mobileNav" onclick="displayMobileNav()">
<img src="images/menuicon.svg">
</div>
</nav>
<div id="mobileNavSections">
About
Contact
中文
</div>
Adding this css media query should finish hiding the nav part that you are not covering with the JS
#media screen and (min-width: 769px){
#mobileNavSections{
display:none;
}
}
I would definitely recommend more of a mobile first when putting together the css. Media queries and overrides can quickly become a headache. Here are some tips and further reading:
Mobile first CSS is written like this:
Styles for mobile and styles that are common to all screen sizes
(no media query)
[icon name=icon-arrow-down]
Media query with a smallish min-width breakpoint
e.g. #media (min-width: 400px)
[icon name=icon-arrow-down]
Media query with a slightly larger min-width breakpoint
e.g. #media (min-width: 600px)
[icon name=icon-arrow-down]
Media query with a larger still min-width breakpoint
e.g. #media (min-width: 960px)
One way to think of it is that you start with a mobile base and build up (or out, if you think in terms of widths).
https://www.mightyminnow.com/2013/11/what-is-mobile-first-css-and-why-does-it-rock/
I have implemented "Toast" from materializecss. And I want to give some fix position to "Toast" message.
For workaround, I have added class and updated position, but with different screen resolution, it's appearing different location.
Materialize.toast('Success Message', 6000, 'success');
Any one have tried to change position of "Toast" message.
Is there any other way to make it consistence in every screen resolution.
Override default toast css with what you need:
#toast-container {
display: block;
position: fixed;
z-index: 10000
}
#media only screen and (max-width: 600px) {
#toast-container {
min-width: 100%;
bottom: 0%
}
}
#media only screen and (min-width: 601px) and (max-width: 992px) {
#toast-container {
left: 5%;
bottom: 7%;
max-width: 90%
}
}
#media only screen and (min-width: 993px) {
#toast-container {
top: 10%;
right: 7%;
max-width: 86%
}
}
I am using Bootstrap to display a random tweet and a static image alongside it.
It looks great, but the text is always vertically at the top, instead of center of the image.
How do I resolve this so no matter the length of the tweet, it'll display in the middle vertically?
Demo: https://jsfiddle.net/9wwuznpL/
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
background:black;
margin: 10px;
color:white
}
img {
float:left
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
img {
float:none
}
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6 text-center col-md-push-3">
<div class="tweet">
<!--<i class="fa fa-twitter fa-5" aria-hidden="true" style="font-size: 4em;color:white"></i>-->
<img src="http://placehold.it/100x100">
<blockquote>
<p>
RT #thetomzone : Seriously, drop everything you're...
</p>
</blockquote>
</div>
</div>
</div>
I would say the easiest way is to set some css like this:
.tweet {
display: table;
width: 100%;
}
.tweet blockquote {
display: table-cell;
vertical-align: middle;
}
Or you could use display: flex; if the browser support is enough: http://caniuse.com/#search=flex
Demo: https://jsfiddle.net/9wwuznpL/4/
Give
img, blockquote {
float: none;
display: inline-block;
}
JSFIDDLE
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
background: black;
margin: 10px;
color: white
}
img,
blockquote {
float: none;
display: inline-block;
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width: 1200px) {}
/* Medium Devices, Desktops */
#media only screen and (max-width: 992px) {}
/* Small Devices, Tablets */
#media only screen and (max-width: 768px) {
img {
float: none
}
}
/* Extra Small Devices, Phones */
#media only screen and (max-width: 480px) {}
/* Custom, iPhone Retina */
#media only screen and (max-width: 320px) {}
.tweet:after {
clear: both;
display: table;
content: '';
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 text-center col-md-push-3">
<div class="tweet">
<!--<i class="fa fa-twitter fa-5" aria-hidden="true" style="font-size: 4em;color:white"></i>-->
<img src="http://placehold.it/100x100">
<blockquote>
<p>
RT #thetomzone : Seriously, drop everything you're...
</p>
</blockquote>
</div>
</div>
</div>
You need to change the default display of both elements, image and blockquote, to inline-block. Then you can use vertical-align css property and set its value to middle. You should set a width or max-width to the blockquote element, because if you don't do this the blockquote could place itself below the image.
I modified your fiddle: https://jsfiddle.net/9wwuznpL/1/
img {
display: inline-block;
vertical-align: middle;
width: 100px;
}
blockquote {
display: inline-block;
vertical-align: middle;
width: calc(100% - 110px);
margin-bottom: 0;
text-align: left;
}
As you could see you can use calc for the quote width value, e.g. if the image is 100px wide the quote must be calc(100% - 110px). You must know that inline-block elements work as typography, so an empty space will work as a nbsp; so you should add around 4 extra pixels. In my example I added 10 more pixels, but with only 4 this should work properly.
You can achieve your effect in a few different ways: Flexbox, absolute positioning with transformations, and display: table/table-cell with vertical-align. Since the other answers have already covered the other types, here's the Flexbox version:
.tweet {
border: 1px solid black;
/* Use .tweet as flexbox container */
display: flex;
/* Align all items in the middle of said container */
align-items: center;
}
.tweet__avatar, .tweet__body {
border: 1px dotted red;
}
.tweet__body {
margin: 0;
/* This instructs the browser to stretch .tweet__body all the way to the end.
Otherwise it would stop at the end of the content. */
flex-grow: 1;
}
<div class="tweet">
<div class="tweet__avatar">
<img src="http://placehold.it/100x100" alt="">
</div>
<blockquote class="tweet__body">
<p><cite>RT #thetomzone</cite> Seriously, drop everything you're...</p>
</blockquote>
</div>
I have a clickable javascript link (Trustwave) on my desktop website theme which I'm trying to disable on mobile screens:
In footer.tpl:
<div style="position:absolute; margin-left:100px; margin-top:50px">
<script type="text/javascript" src="https://sealserver.trustwave.com/seal.js?style=invert"></script>
I now know how to remove a clickable image link on mobile screens (Remove image link in mobile screen) for example:
In footer.tpl:
<div class="column">
In stylesheet.tpl:
#media all and (max-width: 480px) {
.hide {
display: none;
}
}
#test {
display: block;
background-image: url('../image/myimage.png');
background-repeat: no-repeat;
position: absolute;
margin-top: 10px;
margin-left: 20px;
width: 75px;
height: 75px;
}
but I've no idea how to re-create the javascript link so that it does not display on mobile screens. Thanks in advance!
You can use the media queries properly by putting the media query on the end as max-width is most probably getting confused of the context
`
Here is an easier way.
#media all and (max-width: 1500px) {
.hide {
display: block;
}}
#media all and (max-width: 480px) {
.hide {
display: none;
}}
OR
You can use window.innerwidth() to detect the width of the viewport and store it in a variable say x
And then use
var m = document.getElementById("column")
If (x>800)
{m.style.display='block'}
else
m.style.display="none"