I found how to force the horizontal orientation under a certain resolution, and on android work fine, unfortunately it also rotates on the desktop when the window falls within the specific resolution.
#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;
}
}
I'm also looking for a way to send mobile phone users to another page where to use this system, but it's also based on the resolution of the device:
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>
How can i get forced horizontal orientation only on android and ios (i'm especially for Android)?
or
How can i send these users to another page with forced orientation?
Thanks!
Related
I have a problem, that when i view my site from mobile devices, it shows the default logo of the theme, I have updated the mobile logo in theme options, but also the logo is not changing..
So is there any way to find the default logo in theme coding and then replace it with my custom logo in mobile devices...or any other way!
I tried to hide the deafult logo and use custom logo for mobile devices by this code:-
#media (max-width: 480px) {
.site-title a {
background: transparent url("http://logo.png") no-repeat scroll 0 0 !important;
overflow: auto;
}
}
}
#media (min-width: 480px) and (max-width: 768px) {
.site-title a {
background: transparent url("http://logo.png") no-repeat scroll 0 0 !important;
display: block;
}
}
The above code does not work..
In desktop devices the logo is working fine, only problem with in android devices..
Wordpress does create a lot of problems.
I would suggest clearing cache for a proper update of the website. If you are using wordpress and any page builders, you can create the header in your Elementor Theme Builder and in there you can change from the Responsive tab anything you want to show in the Mobile and not in the Desktop.
Try This:
#media (max-width: 480px) {
.site-logo {
background: transparent url("http://logo.png") no-repeat scroll 0 0 !important;
background-size: cover;
padding: 0px;
margin: 0px;
width: 150px;
height: 50px;
}
.site-logo img
{
display:none;
}
}
I am trying to hide the sidebar for mobile devices in my WordPress site with the Divi theme. I have tried to use media queries to do this but it hasn't worked.
My media query:
#media (max-width:480px) {
.menu-decoglobofx-container {
display:none;
}
}
I have also tried the plugin Hide Widgets and the sidebar still displays when I test the page on my mobile device try it yourself and see. Does anyone know how to get this to work properly?
Change this in css:
#media (max-width: 479px)
.et_pb_section .et_pb_row .et_pb_column.et_pb_column_1_4 {
width: 100% !important;
margin: 0 0 30px 0;
}
with:
#media (max-width: 479px)
.et_pb_section .et_pb_row .et_pb_column.et_pb_column_1_4 {
width: 100% !important;
margin: 0 0 30px 0;
display:none;
}
This should do good .. just use it with proper page_id
#media all and (max-width: 479px) {
.et_pb_sidebar_0 {
display:none !important;}
}
I'm testing my website on mobile devices, but, while on iOS it works great, on Android it doesn't: the site is zoomed in and it is unresponsive.
In my tag I have:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
while in my CSS there is:
#media only screen and (min-width: 979px) {
.isStuck {
background-color: #000;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
}
}
#media only screen and (max-width: 979px) {
#stuck_container {
position: relative !important;
box-shadow: none;
}
.pseudoStickyBlock {
height: 0 !important;
}
}
The Android stock browser changed extensively as of Android 4.4, so if limiting your application to that version is possible, you may find it works fine, according to a Google code issue here.
I would advise targeting handheld rather than screen however, as many mobile devices identify themselves as being handheld devices.
#media handheld, screen and (min-width: 979px) { ... }
A previous question also suggested targeting the device resolution instead.
I am trying to develop a responsive site.
I've been testing several #media on my PC and so far so good.
The problem started wen I passed to my Android Smartphone.
For some reason, the site is presented as it should be in Landscape orientation, but in Portrait orientation a blank page is presented.
I have tested in Firefox and Chrome and the problem is the same.
I do have noticed that if I chose the "reader view" the content of the page can be read, so the page is being loaded, plus, I installed a HTML source code viewer and the page is fully loaded.
I have tested on two different Android Smartphones, with the same resolution: 540 x 960 px
You can find the page here:
http://www.chazard.eu/teste/cspreguengogrande
and here is my css:
#charset "utf-8";
/* CSS Document */
* { padding: 0; margin: 0; }
html,
body{
min-height:100%;
width:100%;
z-index:-10;
}
#Background{
position:absolute;
position:fixed;
top:0px;
left:0px;
height:100%;
width:100%;
display:block;
z-index:1;
}
#Background_Left{
float:left;
width:50%;
height:100%;
background:url(images/background_left.jpg) fixed;
background-repeat:no-repeat;
background-position:left;
background-size:contain;
}
#Background_Right{
float:right;
width:50%;
height:100%;
background:url(images/background_right.jpg) fixed;
background-repeat:no-repeat;
background-position:right;
background-size:contain;
}
#mainDIV{
position:relative;
margin: 0 auto;
width:1000px;
min-height:100%;
z-index:10;
}
#BotoesContainer{
position:relative;
height:200px;
background:url(images/banner.png);
background-repeat:no-repeat;
background-size:contain;
}
#ConteudoContainer{
position:relative;
padding-bottom:70px;
}
/* --------------------------------------------------
Smartphone / Tablet View Port < 960 px width Horizontal
--------------------------------------------------*/
#media (max-device-width: 960px) and (orientation: landscape){
#mainDIV{
width:600px;
}
}
/* --------------------------------------------------
Smartphone / Tablet View Port < 540 px width Horizontal
--------------------------------------------------*/
#media (max-device-width: 540px) and (orientation: portrait){
#mainDIV{
width:520px;
}
#Background{
display:none;
}
}
I have removed some non-essencial css.
Any advise?
Use max-width instead of max-device-width. Also, you need to probably use the media query with max-width: 980px, if its a desktop site.
Reason:
max-width refers to the width of the viewport and can be used to target specific sizes or orientations in conjunction with max-height.
max-device-width refers to the viewport size of the device regardless of orientation, current scale or resizing.
I have an android app which runs on tablet and phone. My content is loading html files from the assets folder. My problem is I want different image sizes on tablet and phone.
here is the code for the image on phone.
<img src="check_yes_tick_parent.png" width="8%"/>
However this is too wide on tablet and ideally I would like the width to be 3%.
I know I could make two html files for each one. i.e one for phone and one for tablet. But is there an easier way?
You can use css and media query for this then you don't need to have 2 or more html file.
For example:
At html:
<div id="image"></div>
At css:
#media screen and (min-width: 1024px) {
width: 100px;
height: 100px;
background-image: url(check_yes_tick_parent.png);
}
#media screen and (width: 768px) and (height: 1004px) {
width: 50px;
height: 50px;
background-image: url(check_yes_tick_parent_for_pad.png);
}
You can refer to CSS3 #media Rule