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 %.
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 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.
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.
So I have a responsive theme and I want the home page to have a few columns that stay centered next to each other while on the computer... but when on the phone I would like them to go one above another... while each still being centered.
Thanks
Can you send the link to your page or set up a codepen snippet may be?
Also, for using on mobile and making them show better, use a width like, say, 31% for each div, with 3% margin on right of each, and make all
float:left
so that it shows better on mobile, and then for lower resolution media queries like, say , 480px or lower, use
width:100%
for these divs. So that they show perfectly on mobile devices with appropriate widths.
Hope that helps.
Are there any wildy used browsers that doesn't support width 1000px plus right scroll?
NOTE: With "support" I mean "if it will support 1000px width without creating a horizontal scroll in the bottom" (sorry for not explaining this in the beginning)
What about IE7 for example?
I don't want to get the bottom scroll...
I know it might look bad on some 1024 screens if there is no space on the side.
I am adding an example so you better will understand:
The reason for asking is beceause I don't want to get a horizontal scroll on my website in widly used browsers. I don't have any old IE version installed, so I cant test it myself.
Note that the 3000px height div will cause a vertical scroll to the right... So the "browser window width" have to be at least 1000px in width for it to work (1024 minus right scroll (minus left border))
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body style="margin:0">
<div style="width:1000px;height:3000px">Will this div creat a horizontal scroll bar in any widly used browser, with window size of 1024 x 768px <? What about Internet Explorer 7 and Internet Explorer 8?</div>
</body>
</html>
They all do, it's more of a matter of which monitors users have. Most sites use 960px-wide, mainly because it works well with 1024-wide monitors, and it is divisible by many factors, making it east to have balanced multi-column layouts.
You can safely go up to about 980px.
I think 960 pixels is the widely accepted standard for website layouts, but 980 is also common. 1000 may be a few pixels too many.
In fact doesnt matter which browser you are using, but the screen resolution and the size of the browser window.
At 1024x768 resolution, with width = 980px (and no side padding) it will not create scrollbar
All browsers support whatever width you want.
What you really care about is screen resolution and the actual viewport width of the current browser window. For example, my 2 screens gives me an effective screen width of 1920+1920=3840 pixels, but I never maximize my browser so the viewport is more like 800 pixels wide.
(I hate 960px grids)
See the article Responsive Web Design for discussion of making a truly width-adaptive layout.
The answer doesn't change with your update to the question. The answer is still:
All browsers support whatever width you want.
If you have enough screen space available to make a browser window wide enough, it will display any width page without scrollbars.
What about IE7 for example?
Since I can stretch my IE 7 window (or IE 8 or 9) to be 3000px wide, IE 7 will display a 1000px wide page without a horizontal scrollbar. Therefore, IE 7 "supports" a width of 1000px without a scrollbar. In that sense, All browsers support whatever width you want.