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;}
}
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 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 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 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.
I have been searching for two days now for a solution and nothing has really worked for me. I was wondering how I would go about changing the size of text in a webview for Android in relation to screen resolution. Since targetdpi from viewport no longer works, how can i solve this?
I don't have an Android device to test this on, but you should be able to do this with CSS media queries, e.g. within your CSS file.
jsFiddle Demo
p {
font-size: 14px;
color: #c00;
}
#media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
p {
font-size: 16px;
color: #0c0;
}
}
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi){
p {
font-size: 20px;
color: #00c;
}
}