I have a wordpress site running an ET Divi child theme and on mobile the main menu does not scroll on touch, instead the background (website) scrolls. I've been trying several media queries and such to fix but cannot figure it out, anyone have thoughts or run into this before? Here is my child theme stylesheet add-on code:
the website is wptemp.thereverendmichael.com (make sure to adjust width for mobile viewing only)
#media (max-width: 980px) {
#main-header {
position: fixed !important;
}
}
#media (max-width: 980px) {
.et_fixed_nav #top-header {
position:fixed !important;
}
#mobile-menu {
overflow-y:scroll!important;
-overflow-scrolling:touch!important;
-webkit-overflow-scrolling:touch!important;
}
}
.et_mobile_menu {
margin-left: -30px;
padding: 5%;
width: calc( 100% + 60px);
}
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}
Sorry, I figured it out with a bit more playing. Here was the solution
EDIT: Future Divi versions have changed .et-mobile-menu to .et_mobile_menu just thought I'd give a heads up.
.et_mobile_menu {
overflow-y:scroll!important;
max-height:80vh!important;
-overflow-scrolling:touch!important;
-webkit-overflow-scrolling:touch!important;
}
Related
Is there a way to do this with html and css or can I only do it with javascript/bootstrap? I'm fairly new to coding so detailed explanations if possible would be nice!
You can do that with css media query. If you are begineer here is a small tutorial on that CSS media query.
According to mobile device size you can hide the navbar.
EXAMPLE:
#media only screen and (max-width: 600px) {
.navbar{
display:none;
}
}
You can hide show with the help of #media screen to show or hide the code in different devices sizes.
Examples:
#media screen and (max-width: 767px) {
.hide_on_mobile {
display: none;
}
}
#media screen and (min-width: 768px) {
.hide_on_mobile {
display: block;
}
}
Yes you can.
There several approaches to do that
Detect device is touchable (e.g. with Modernizr like tools) - I do not recommend, cause nowadays event laptops provided with touch displays.
By device's viewport - here's the good table list with most popular devices viewports by Adobe
I prefer second approach
So the solution comes in hand with CSS media-queries
And read about mobile first techniques
Example (press the Full page button after running snippet to look how it's gonna look in desktops)
<style>
#navbar {
display: none;
}
#media (min-width: 640px) {
#navbar {
background: lightblue;
height: 60px;
}
}
main {
background: #ccc;
min-height: 40vh;
}
</style>
<div id="navbar"></div>
<main></main>
The homepage/index.html seems fair enough to launch as-is for the time being. But when I look at it from chrome on mobile, all the lettering is too small - particularly in the navbar - and my parallax effect doesn't work on mobile either.
I tried making changes to the scale within the viewport, but I honestly just don't know what I'm doing. I would be so grateful if someone could possibly take a look at the website on mobile (and desktop too, if you'd like) and maybe make some suggestions on a quick cheap fix for making it more readable while maintaining its look of 'prettiness'. And if you know how to keep the parallax intact on mobile that would be amazing too!
Here are the links to the website, and to the code on github:
https://ido-weddingsandevents.herokuapp.com/index.html
https://github.com/if-true/i_do_weddings_and_events/blob/master/index.html
To make your navigation larger and your image titles on mobile you can try this CSS:
#media (max-width: 860px){
.navigation li a {
font-size: 80px;
}
.parallaxImage h2 {
font-size: 56px;
line-height: 94px;
}}
In Bootstrap you have to insert <div class="row">...</div> inside the class="container" . Better use a percentage in .navigation { width: 100%; max-width: 500px; } for mobile compatibility. Font-Awesome, PT Serif, and Delius Swash Caps are not used. Loading them is not good for performance.
If you are using #media, setup like this, for example
.navigation li a { font-size: 24px; }
#media (min-width: 768px) {
.navigation li a { font-size: 36px; }
}
#media (min-width: 992px) {
.navigation li a { font-size: 60px; }
}
#media (min-width: 1200px) {
.navigation li a { font-size: 72px; }
}
Important to use
<meta name="viewport" content="width=device-width, initial-scale=1">
I am creating an animated logo for website running on WordPress and I want to know if it is possible to make the css animation possible only for desktop resolutions. I think the animation would not work for mobile version and I want to have different css for mobile versions.
Is it possible to put the #keyframes into #media screen and (min-width: 1000px){...} ? Just combine it somehow?
Thank you.
Just use the animation property inside a media query.
#keyframes myKeyframe {
from { top: 0; }
to { top: 100px; }
}
#media screen and (min-width: 1000px) {
#myDiv {
animation: myKeyframe 1s;
}
}
I used everything already and I have no idea, why my #Media Queries doesnt work. "viewport" is already added to HTML head, #media are in the end of CSS document.
CSS code:
#media only screen and (max-width: 768px) {
.bio_img {
width: 50%;
}
.bio_photo {
width: 30%;
}
.youtube {
margin-left: 20%;
}
}
Your problem is the // comments.
CSS cant read that. you need /* comment goes here */
in this case you should use
/* Tablet diagonal width:768px */
here is a link with your code and the test.
https://jsfiddle.net/Willox_san/e68of5sL/2/
good luck!
EDIT : read further then the next 5 lines! My problem is not the logic of doing different css for mobile, tablet and desktop (#media query) - the problem is to change the IMAGE.SRC attribute FROM INSIDE CSS.
I'm trying to make a new fluid website and I'm trying to create 3 different header images:
Mobile header image (low res)
Tablet header image (medium res)
Desktop header image (high res)
(all the images also vary in aspect ratio)
How do I get this to work?
Currently I've tried to simply change the SRC in CSS for each CSS SECTION (mobile, tablet, desktop)
Like this:
#img_header {
src: url(img/header_m.png);
}
We all know that this doesn't work :D also I don't want to use background-image instead.
What is the proper way to do this?
Should I hack into the generated javascript code from Adobe Dreamweaver CS6 and change the .src from there ?
I'm sure there is a css way, so tell me guys. Thanks
UPDATE: I should have said that I already use media queries...
Here is my css:
/* Layout für Mobilgeräte: 480 px oder weniger. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 97.826%;
padding-left: 1.0869%;
padding-right: 1.0869%;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header_m.png);
}
/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 93.451%;
padding-left: 0.7744%;
padding-right: 0.7744%;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header_t.png);
}
}
/* Desktoplayout: 769 bis maximal 1232 px. Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 89.1614%;
max-width: 1232px;
padding-left: 0.4192%;
padding-right: 0.4192%;
margin: auto;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header.png);
}
}
NOW that you have read everything, you should imagine that I can't change the img.src from inside css..., I think the only way to do so is to hack into the unformatted auto generated javascript from adobe DW cs6, isn't it ?
You can use CSS3 media queries for your desired results.....
And I think you should read this article it will help you :-
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
You can do different images by using media queries
Mobile
#media only screen and (min-width : 320px) and (max-width : 480px) {
Your image for mobile
}
Tablet
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
Your image for tablet
}
If you are using single image in diff resolution then you need not to do take 3 images. Take the bigger image (for desktop size) and write the below css
<header><img src="img/header_m.png" /></header>
CSS
header img{max-width:100%}
I believe you are aware of media queries http://css-tricks.com/css-media-queries/
To change foreground image
If you want to change foreground images for different devices then try z-index
.header{
background-color:red;
position:relative; height:auto}
img:first-child{
position:absolute; top:0; left:0;
z-index:-1; width:200px
}
img{
position:absolute; top:0; left:0;
z-index:10; width:200px
}
Change the z-index value for respective device width.
Demo here http://jsfiddle.net/5vpG7/70/
......................
Now used to media query css
#media screen and (min-width: 500px) and (max-width: 800px) {
// your css code here
}
more info about this
i've now set another div inside the div_header, and give that child div a background image and a hardcoded width and height ( matches the individual images ), so i've faked a tag that now have ability to define (backgound-) image source via css instead of defining attribute of image source ;)
thanks anyway for your answers