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);
}
Related
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 creating a home page for a website and I am attempting to copy part of the background img to use as a nav link so i can manipulate it. When i design the page every thing will look good but when i view on different screens the overlay is thrown out of align.
I have tried to implement screen.width and screen.height, from JavaScript, to capture the sizes and pass them as a var into HTML code. Then i use HTML top % and left/right %
to adjust the overlaying nav to match up with the background img.
<script>
//capture the screen size
var w =screen.width;
var h = screen.height;
</script>
<style>
body {
background:url("screen.jpg")no-repeat left top fixed;
background-size: w h;
}
#b1{
background-size: 180px 70px;
background: no-repeat left top fixed;
padding: 130px 50px;
color: white;
text-align: center;
background-image: url("b1.png");
margin: 0;
position: absolute;
top: 55.3%;
left: 11.5%;
transform: translate(-50%, -50%);
Does anyone have a fix for this? is it a HTML or JavaScript issue?
#JohnLiebig a couple of things. When you are working within CSS you should not be using HTML or JS related variables/methods. If you would like to use CSS variables the formatting can be found here.
The below snippet was found on MDN under 'background-size.'
.foo {
background-image: url(bg-image.png);
-webkit-background-size: 100% 100%; /* Safari 3.0 */
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}
how can i modify my head to hide the logo element when we are in mobile view?
<style type="text/css">
/*<![CDATA[*/
.jtpl-logo {
padding: 0 30px;
width: 250px;
transition: all 0,5s ease 0s !important;
position: fixed;
z-index: 1000000;
min-width: 0000px;
overflow: visible;
}
.jtpl-navigation {
transition: all 0.5s ease 0s !important;
position: fixed;
width: 100%;
z-index: 100000;
text-align: center;
padding-left: 300px;
background-color: #e30613;
}
/*]]>*/
</style>
Right now i have used the head to fix the navigation bar and the logo element to stay on top during scrolling. Now it would be perfect, if i could tell the logo container to remove if we are in a mobile view, or lets say when we are less then the screen width of 768px.
Is this possible? I found out that it is quite a hustle to find hints on this in combination with jimdo.
You can use a CSS3 media query to specify styles which apply only under specific circumstances. To hide your logo on screens smaller than 768px:
#media (max-width: 768px) {
.jtpl-logo {
display: none;
}
}
More info about media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Use CSS Media Queries to conditionally use various CSS styles based on the size of the viewport.
Media Queries will likely solve your problem.
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.jtpl-logo {
display: none;
}
}
Hint: I like to use this one, as it has a good and useable collection of breakpoints https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints
To hide in desktop use #media like
#media (min-width:961px) {
.jtpl-logo {
display: none;
}
}
for other than desktop use following tags
#media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
#media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets # 600 or # 640 wide. */ }
#media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
#media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
#media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
#media (min-width:1281px) { /* hi-res laptops and desktops */ }
.jtpl-logo {
padding: 0 30px;
width: 250px;
transition: all 0,5s ease 0s !important;
position: fixed;
z-index: 1000000;
min-width: 0000px;
overflow: visible;
}
.jtpl-navigation {
transition: all 0.5s ease 0s !important;
position: fixed;
width: 100%;
z-index: 100000;
text-align: center;
padding-left: 300px;
background-color: #e30613;
}
#media (min-width:961px) {
.jtpl-logo {
display: none;
}
}
<div class="jtpl-logo">
</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"
I am wondering if there is way, to mark a MAX and a MIN value depending on the max Width of the browser window and min Width of the browser window, and have it dynamically change that MAX and MIN value between that set range?
Example:
I have a button "button" outside a div "divA" (it is part of another div "divB", that lies outside the div being discussed), and I want this button "button" to lie at the bottom right corner of this initial div "divA".
Now, I can get the button to lie at the bottom right corner when the browser window is at is absolute minimum, and at the absolute maximum, but the in between is a bit sporadic since I'm positioning the button absolutely, and then changing the bottom percentage on the two media widths.
Is there a a known javascript or jquery that would allow me to do this?
example CSS:
#divA{
width: 100%;
height:auto;
}
#divB{
width: 100%;
height: auto;
}
#button{
position: relative;
}
#media screen and (min-width: 768px){
#button{
position: absolute;
bottom: 100%;
}
}
#media screen and (min-width: 400px){
#button{
position: absolute;
bottom: 250%;
}
}
example HTML:
<div id="divA"></div>
<div id="divB"><button>CLICK ME</button></div>
demo -http://jsfiddle.net/ogjhef7c/1/
you are setting bottom to by 250% 100% try changing the value, #media works find try resizing theattached fiddleheight`
#media screen and (max-height: 300px) {
#button {
bottom: 0px;
background: red;
}
}
#media screen and (max-height: 100px) {
#button {
bottom: 0px;
background: green;
}
}