I have div which has height and width of 15360px respectively which is the designated area to drag my elements around. It is working fine on the desktops and laptops where the scroll bars will appear.
I have been using the media queries to work it on IPAD too, but when the site is viwed in IPAD the page gets shrinks because of the particular div which has the width and height of 15360px.
Can anyone suggest what can be done to make the Mammoth div to fit in IPAD so that page looks fine.
Any help is appreciated.
Thanks in Advance
You should play around with the viewport meta tag. See the documentation on MDN here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag.
I think you're looking for no scaling and fixed width instead of device-width.
Related
I made this single web page and when I view it my mobile device, and I thumb to the left, the width of the website shifts over slightly, like the left and right edges are not completely contained within the device screen. It doesn't shift around on the DuckDuckGo browser, but it does on Safari. Is anyone aware of how to correct this?
I've used Bootstrap Grid and tried to set the correct element width specifications with CSS.
i think it's about the width of you div with the ID "spinningDial".
She's to big on small device.
Remove it for a test. Then the page width will be perfect on mobile device.
Or you can juste try to change the width of this div for a test (100px for example).
Thanks for the help, everyone. I changed the width of the spinning image and everything seems to be working. I had also forgotten that the corners of the transparent div extend further than the circle... whoops.
I am trying to convert a poorly designed template to a responsive design, found here:http://www.crhinc.com/about-mobile.html
Im having an issue where on desktop browser sized to mobile the template looks and works great, but on android and iphone, the page is larger than the viewport. i know i must be missing something, but as you can see, i have outlined the elements just to get try and see if i can find out whats in there that is stretching it outside the viewport and cause mobile phones to scroll from side to side but not desktop browsers.
i set the body up for 300px width just to see if i could find the rogue element, but put it back because it did not work. there are a few tables in the content, but all set to 100% width.
for some reason, it almost looks like the width in the desktop and on mobiles or not actually the same.
Jeff
Do you actually think it is the viewport? Do you have the viewport set with the right content?
Maybe this link could help.
Or is it just the CSS? In that case I would recommand you searching for width and such. Trying to find big numbers..
Setting a specified width should be for specified screen sizes. Otherwise make it max-width.
My form elements are larger on the Ipad and therefor breaks my design. My Ipad is adding its default form styles to my contact form, and so their width is larger than the div I have them contained in which has a width of 60%.
Here is the page with the issue :
http://jussbuss.tv/testing/kpat/contact/
Any Advice?
Thank you in advance,
Best,
Andrew
Don't use a percentage on your <div class='cpagetemp'> it's not just an ipad problem, shrink your browser. Use px or em, not %.
I'm working on this website and I can't figure out how to fix the problem.
if you use a fullscreen browser window you will see it perfectly (any major browser) but if the window is smaller, it shows the horizontal scrollbar plus cuts the website on the right of around 50px.
I can't change the design to make it more easy to do.
here's the link, you can see both html and css
http://www.ircm.comunicazioneimmagine.eu/
Using fixed size layout will cause problems with different screen resolutions. You should use fluid layouts to resolve the problem.
Fluid Layout Guide
Responsive Design
If you don't want to use fluid layouts.
Put all the content into a div with margin: 0 auto and add text-align: center to the body (IE explorer compatible). Choose a background that looks nice with the page and you're done.
But if the screen resolution is less than actual page size there won't be any solution but resizing the page manually.
the horizontal scroll bar is there cause your page exceeds the innerheight of the browser... my current res is 1920x1080 and I cannot see the bottom of the page. Perhaps try reducing the size of the big IRCM at the bottom.
So I have images that I would like to take up the full screen in my HTML5 code. I have their height and width set to 100% which I assumed should have done resizing.
If I place images in that are 3240x480 they fit my phone just fine, but on the iPad the stretch the height it seems to fit but the width seems to stay at 320.
If I place in images that are 768x1004 they fit the iPad perfectly, but on the phone they display to large. I thought the 100% would do rescaling, but I guess I'm wrong.
So I tried setting the images with 768x1004 to width="window.innerWidth". That shrinks it down on the phone pretty well, except it still stretches past the bounds of the screen a bit. As for the iPad it shrinks the width down some so now there is a gap between the image and the wall of the screen.
Any ideas how to get a clean and simple auto resize to adjust to the screen preferably with just the 1 image. Or else how would I set it so there are multiple images and it puts in the image for the iPad size if its an iPad being used other wise the phone sized images if its a phone being used?
Thanks
I´m pretty sure, that you can´t, without really ruin the quality of your picture resize the image. But I do know that you can use a script to redirect your user to the site that fits for their screen. See this site http://www.dynamicdrive.com/dynamicindex9/info3.htm or Google "Screen redirect" and a several alternatives appear infront of your eyes! :))