Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have created a mobile header only for mobile devices. My problem now is, if you click on Menü, the menu shows up but you cannot hide the menu again by clicking on Schliessen. Also the function closeExtendMenuMobile() got set with an onclick event.
Also, if you call the function closeExtendMenuMobile() in the console, the menu colapses again. How is that?
Why is the event not clickable and how can I fix that?
Here ist the website I am talking about: https://classymagazin.de/home/
You have to load the website as a 'mobile device'. Means, below 920px!
div#headerHeadingMobile {
position: relative;
z-index: 999;
}
Does the trick.
The element with the Id of extendMenuMobile is overlapping the link so you cannot tap it.
Maybe try giving extendMenuMobile a position of absolute and a top to push it down so that the link is not covered.
OR
Set #extendMenuMobile and .vc_custom_1509619992888 to position relative and give them appropriate z-index's.
I found this using firefox's "Responsive Design Mode" set to a mobile size and the firefox built in "Inspector" both are under the "Developer" section.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 20 days ago.
Improve this question
I used the outline of the code from we3schools. My problem is that the button is not level with the navbar.
I couldn't get the code to align where it would let me publish so here is the github link (it's an html file with just the navbar and a css file with just the navbar portion in it).
LINK: https://github.com/Terrancesky/website/tree/main
Seems everything is fine, You can also check by adding this css
#media screen and (min-width: 600px){
.topnav {
display: flex;
align-items: center;
}
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 months ago.
Improve this question
I have this website that displays 'The Game of Life', showing a canvas with the cells. On mobile, you can touch the canvas and it draws some cells, but it also scrolls the screen a little bit, even if the content of the web doesn't occupy more than 80% of the screen.
I've tried using
body {
overflow: hidden;
}
But it didn't work Webpage
Try this:
body {
overscroll-behavior: none;
overflow: hidden;
}
EDITED!!
I finally solved it. In my CSS i put this:
html, body {
touch-action: none;
}
Maybe it doesn't work for everyone, but solved my problem.
Buttons still work properly :)
EDIT:
I needed to activate the touch action in the rest of the website, so i replaced the code above, applying it only to the canvas
canvas {
touch-action: none;
}
This allowed to zoom or scroll in the rest of the web, while not in the actual game
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have finished a website, and saw that there are white blocks when scrolling - site here. Happens on mobile and on desktop. It happens only on first load. Does it mean the page has not yet fully loaded? If so, I could show longer the loading screen, but need to know, how do I know when the page is loaded. If it's not because of that - what's causing that?
To reproduce: Open it in a browser and after loading screen use the mouse scrollbar to scroll down (using the scrollbar on the screen can't reproduce it).
Open it in a mobile browser, scroll down the page - here we can see it pretty obviously.
Not sure why you cannot reproduce it. Please see attached screenshot from my mobile. This happens when scrolling up and down.
On empty cache, your page makes 34 requests and its total page size is 23.7 MB. Out of which, there are 18 requests for images, and total download size for images is 23.3MB. Are you trying to load this site on user's mobile.
Downsize or web-optimize your images. The white blocks are coming because the container for the images is not completing load as the images are still being downloaded. Also, mobile cache sizes are lesser than computer cache sizes.
Checkout the chrome network tab on first or empty cache load of the site and you can see.
Once images have loaded, and your page is visited again. Its total data transfer is 5.7 KB but there are 34 requests still and stuff is rendered from cache. You can try to add far future expiry to your images if they will remain the same on your site.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
So my webpage appr.co/work/work.html doesn't display correctly on mobile devices. What happens is that the min-width appears to be 960px, and on iPhone 5 where I tested it, the screen width is 568px, and it ends up zooming out to make the page fit, but consequentially everything looks too small, and the navbar doesn't revert to its mobile look.
I've tried
$("*").css({"min-width": "568px"});
As a test to see if it would display correctly, but it still was 960px but now with white space on the right from getting thinner. please help!
You don't need any JS to make your webpage render correctly in mobile devices. Just use #media for that. Look this info for that https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries .
So for 568px you can write
#media only screen and (max-width:568px){
.class{property:value;}
} .
Also don't forget to include meta tag to get working media queries on real devices (Just include <meta name="viewport" content="width=device-width"> in head tag). More info is here http://css-tricks.com/snippets/html/responsive-meta-tag/ .
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am using this javascript, which scrolls pages (divs).
The problem I am having is, when resizing the browser window. A white border appears.
Is there anything I can do to fix this issue?
URL to my slightly modified version here.
Thanks.
In your class .wrapper, mask and itens* try using % values. This works for me!
.wrapper {
width: 100%;
height: 100%;
}
So I'm trying to inspect all yours elements and i notice if you change with property to 100% your animation works good! Instead of the "back div" coming from right is coming from bottom
This is a advice -> If u use 'px' unit you will have serious problem just because your web app isn't responsive!
See the transition with 100% width except the frist one and notice the white border appears!
You need to figure out what its better for you
If you really need the "back div" coming from right you need to do a transition and using 'margins' and 'z-index'
By removing all the height and width variables, I was able to keep the script from modifying my css.
Thanks for all your suggestions.