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.
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 have an html page which I print through different android devices. The height of the page is changing dynamically depending on some labels that I update through Javascript. Then I pass the height of the page to the android so I can set the height of the page that will be printed.(Dimensions are 856x3000ish pixels). My problem is that when I am trying to print the document from a bigger screen mobile device then the device pixel ratio is 200%-300% but when I am trying to print the same document from older smaller devices the ratio is 150%, so in every device(and on different browsers or same browsers with different zoom) the html page gets a different height. This has as a result the printer to behave differently depending on the different height. So for example: if I print from a device with 100% aspect ratio my print is perfect but if I print from a device that has 200% aspect ratio then my document is not printed properly and some centimeters at the end of it are not printed at all. I am pretty confident that the problem is the different aspect ratio of the different devices that make the height of the html page to change. How do I keep the same height of the html page no matter what the aspect ratio of the screen is? Any other suggestion is welcome.
#page {
margin: 5px 5px 5px 5px;
}
#font-face {
font-family: 'customFont';
src: url("../fonts/Roboto-Regular.ttf");
}
html {
transform-origin: center;
font-family: 'customFont';
line-height: 1.2em;
}
#mainBody {
height: 100%;
padding:0px !important;
margin:0px;
}
form {
font-size: 20px;
width: 840px;
padding-left: 5px;
padding-right: 5px;
border: 2px solid;
}
label {
border: hidden;
font-size: 18.5px;
vertical-align: middle;
}
Introduce the next line in the <head> of your html file:
<meta name="viewport" content="width=device-width, initial-scale=1">
Next you can add in css the value of "height": 100vh.
VH stands for “viewport height”. So you always keep 100% of the height no matter what device.
The content would remain dynamic in my example. But if you want just a fixed size no matter what device you have to work with px.
Hope this works for you.
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!
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 am trying to add following mobile specific header but it's not taking effect
#header{
width:100%;
padding:25px 0 20px 0;
border-bottom:1px solid #ddd;
position: fixed !important;
overflow: visible;
top: 0;
left: 0;
margin:0;
z-index: 99;
}
/* Diable border bottom on Mobile Devices */
#media only screen and (max-device-width: 480px) {
#header {
border-bottom:none;
}
}
+++ ADDED +++
I am trying to remove a line displaying underneath Home Services Portfolio on mobile devices (screenshot: http://imgur.com/Q4pTNMG), which works well on computer screens. The website is: modcansolutions.ca
The line isn't just being caused by the border-bottom attribute, but also the boxshadow class which is giving a box-shadow, looking much like a border.
Simply assign box-shadow: none along with border-bottom: none into your css code and it this should fix it.
#media only screen and (max-width: 480px) {
#header {
border-bottom: none;
box-shadow: none;
}
}
Edit: try to remove -device:
/* Diable border bottom on Mobile Devices */
#media only screen and (max-width: 480px) {
#header {
border-bottom:1px solid #ddd;
}
}
Edit #2:
You're actually not assigning anything new. Your styling is the same as the original. border-bottom:1px solid #ddd; is also in the original CSS.