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/ .
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 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'm experiencing some issues with parallax background images.
I'm working with this template. As you can see, in the home page there are 2 divs exploiting stellar.js (i.e., .fh5co-cover and #fh5co-started ). All seems fine with a computer resolution but if I try to visualize the website with a Phone resolution (e.g., simulating the iPhone7 Plus rendering through Chrome) the background image in .fh5co-cover is not centered. Moreover the background image in #fh5co-started displays grey borders when you scroll the page.
Is there a way for centering background images and for avoiding those annoying grey borders at small resolutions?
Set the background position x to 50%:
background-position-x: 50%;
In here:
#media screen and (max-width: 768px)
.fh5co-cover {
heifght: inherit;
padding: 3em 0;
background-position-x: 50% !important;
}
PD: important! because the position is being changed in js by whatever plugin you are using.
About the gray border, couldn't find it so i guess was just a bug on your browser
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.
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.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
Okay, so I'm making a mobile theme to my website, which is based on WordPress. I need to scale the images in articles to fit the screen. Okay, I could do that easily with CSS (width: 100%, height: auto) but that's not working right, because then images which are horizontal would be scaled stupidly.
So let's say the images are sized:
576x432
432x576
100x300
Let's say that the screen resolution is 360x640.
Here's how I wan't the images to scale:
360x270 (same dimension, but scaled down!)
360x480 (same dimension, but scaled down!)
100x300 (not scaled, because 100<360)
With the CSS thing everything would just be scaled to 360xSomething, even the small one which doesn't need scaling. And if screen was like 460x780, number 2 would be scaled up even if not needed!
So here's what I've thought of doing:
Go through all images
Check if image width > screen width
If yes, then scale, if not => skip
Profit!
And the problem: I have no idea how :( So any help guys?
You can achieve that using max-height:100%; and max-width:100%;
See this FIDDLE
I used a wapper div the size of your example screen (360x640) around the images and you can see that only the wider/heigher images are scaled.
.image-responsive {
display: block;
height: auto;
max-width: 100%;
}
Apply this class to images.. Should stretch the image on smaller screens :-)
Thank you,
Rahul Patil
You can very easily achieve that.
Instead of width:100%, use max-width:100%.
To scale any image to browser width, simple idea is to use
width:100%;
height:auto
see this DEMO