Hi guys as the title says.. i keep getting this horriable right margin when i go down to ipad viewport size and when i view it on the ipad hence you get horizontal scroll bars.. major issue and quite annoying... But when i get down to the view of iPhone it goes away.. really strange.. can any one please help..... you can check it out here
I've deleted all elements from the page and i still get the problem.. so annoying
Click Here to View Problem
In your css, your section and footer style rules have a negative margin left and right. I took them out and it seemed to fix it for me. Perhaps look to see if you have some in your header as well?
I'm not sure why you have a negative margin here, but if you absolutely need this margin at higher window sizes, look into adding these rules into your ipad breakpoints.
Related
I've made a responsive website using bootstrap and media queries to alter the CSS for various screen sizes.
I have a section which displays incorrectly on the iPad when landscape, but it works fine when I test it on a browser at the same viewport width.
I have a col-md-8 offset by 2 and within it there are 3 col-sm-4 divs with an image in each set to 100% width of parent container (which I have drawn an example of in the linked image). http://pasteboard.co/8J885OF.png
This is how it displays in the browser at both the same viewport with as a landscape iPad and for larger widths and is how it should be. It also resizes fine for narrower widths (the columns collapse etc) in the browser and on mobile.
But on iPad landscape the div/images positioning and width gets completely messed up (and becomes bigger than the viewport) and I can't figure out why. Here is what it looks like. http://pasteboard.co/8Jt4NZo.png
Other random bits of CSS also get ignored in this mode for some reason whilst other stylings are fine. The styling for some of the links for example gets ignored (usually white text and pink background with CSS3 hover effects, but instead becomes plain blue underlined text as if there is no CSS applied to it at all).
Does anybody have any ideas why this is happening?
EDIT:
I'm sorry, I have just found a rogue # in the CSS file and removing this has fixed it. I thought I'd searched thoroughly to make sure it wasn't a typo problem but I must have missed it. Thanks all.
I'm sorry, I have just found a rogue # in the CSS file and removing this has fixed it. I thought I'd searched thoroughly to make sure it wasn't a typo problem but I must have missed it. It's odd that it messed up the CSS only for the ipad and only in landscape mode and not for the browser.
Thanks all, hope I haven't wasted anyone's time.
I'm pretty much as new to CSS as it gets and what I'm trying to do right now is just design a very simple/basic splash or landing page for a small business.
Here is the url for the site: My site
Now if you go on any browser, lets say google chrome and you zoom out or in (ctrl -/+) you will notice that the website layout starts to "break apart" in that all my divs just start shifting around. I obviously dont want this, and just want the site to remain the same when people zoom in or out, pretty much like all good sites haha.
I know it must have something to do with positioning, but I can't figure it our for the life or me. Last night I spent hours browsing similar questions but I can figure it out.
I'm not posting the code as to take up more space, I'm assuming since I gave you the URL you'll be able to retrieve the code from there.
I also have a few more, smaller questions:
1) if you open my site on chrome, or ie you'll notice that after the "terms and conditions" on the bottom of the page, the site ends, like it should. however, if you go on firefox, you'll notice that after the "terms and conditions" the background so to speak continues for a while. why is this and how can i fix it?
2) you'll notice that on different browsers positioning of elements is slightly different.
most noticeably if you look or chrome/firefox and then internet explorer 9 you'll notice that the "terms and conditions" are slightly higher than in chrome or ff and thus slightly touching the main content area. is there a way to fix this?
3) what is an efficient, effective way to center divs? For example, I want to center the "sign up" button perfectly centered relative in the main content area. ive pretty much just been eyeing it out and using relative positioning to center it. what is a more accurate way to center it?
Thanks, and sorry if these questions seem a little redundant. if you need any clarification on anything I'll be monitoring this question like a hawk.
Cheers
When you zoom in or out, you will encounter issues because of rounding and text rendering. It is a good idea to make sure the layout can survive a bit of stretching without breaking down.
Relative positioning is affected by issues mentioned in #1, and therefore unreliable.
Look into using something to remove the properties that the various browsers will apply. You could use a reset to give you something more workable or try to normalize the values to make them more even between browers.
For (horizontal) centering you have some options:
If you have a container with "text-align:center" it will center all child elements that are inline-blocks or inline.
If you want to center a block element, you can use "margin: 0 auto" to center it horizontally and remove vertical margins.
If you want to center an absolutely positioned element, you can use "left: 50%, margin-left: -(width of element/2)".
In addition to attempting to get rid of relative positioning, I would recommend that you do not explicitly set the height of the body element. Generally you want the elements to manage their own size, that way they will be more robust.
If you use "position: relative" now because that is what you know how to use, I would suggest you try using "float: left" (or right), or changing the display type (display: inline-block). That may help you get started in the right direction.
not sure for your points 1 & 2, but as for 3 what i've come to use is the following have the div i want to center and then use width : some-percentage; margin-left : 100-(some_percentage)*0.5 ;, where some percentage is the width I want to use.
a couple suggestions before go into fixing the zoom in and zoom out issue.
Don't use <div> to wrap around text.
Use <h1> tags for header
Store your CSS in a separate css file.
You defined the header section that's great, but do that for container and footer as well.
Comments! That would make the job much easier for people who try to help you.
I'm having a little problem with the auto-resizing feature!
I've already proficiently triple-checked (with the search-tool) that all my width-settings are set to %. There's nothing with a fixed width in the whole website. (Well, in fact yes, but nothing bigger than 100px, and in such case, not more than one per row).
But still, if I reisize the browser's windows by less than 420px width, the width of my body (html-body, of course :P) will stop by 420px and the well-known h-scrollbar appears.
Any ideas? Is there some sort of default-minimun-width? I've tried by setting a smaller body's min-width but with no results.
Just in case that's somehow helpful: the website is composed of an index (in html), two sets of three jQuery-script and one CSS files, which are alternatively wrote to the project when the site loads (one for desktop-browsers, one for mobile). I've already tried building the sites separatedly, with no better results.
I think I resloved problem with Firefox. I think FF allows to shrink website to minimal width which need toolbar with website address, searcher, bookmarks and so on. I was testing on CSS tricks which is great site if comes to mobiles :)
At the first screen at 280px width toolbar stops shrinking as the website. Sometimes I have there also Firebug icon or Fireftp icon which makes my sites stop shrinking earlier.
But right click on toolbar and unchecked Toolbar menu. Menu should hide and site still shrinking on resize. Here is Firefox and Chrome and as you can see they are quite similar as comes to minimal width.
If anyone will notice that this soultion is wrong and didn't work, please give me a feedback :)
I suspect my question may be too general, but I hope someone with expertly knowledge of CSS could help me work out a solution.
My site looks acceptable (to me) in high-resolution monitors (1920X1080) – but on smaller-resolution screens the left site doesn't fit - and even though the horizontal scrolling appears eventually of you make the window smaller, but it appears "too late" and doesn't include anything left of the main content panel.
That's the particularly I'm particularly concerned about. There are other resolution-related problems, too.
Here's the site:
http://www.cybart.com/bscg/
I would appreciate it if you could take a look – and would be grateful for suggestions / recommendations / advice from CSS masters!
Here's how I understand your problem:
If someone goes to your website on a smaller screen, maybe 1024x768 or something, there's no scroll bar's appearing.
You need to set up a minimum width / height for a div container for the page content. Then if the browser is narrower than that you'll get the scroll bar.
I suggest instead that you make one div tag that won't be wider than say, 950 and put a nice background behind it instead. No one wants to scroll left or right in the browser.
Use width and height css tags on a div containing the page content.
I have a lower resolution screen... and I see the issue.
You might consider shrinking the size of the main content section and then shifting over the nav.
Or -- better -- auto center your main section using margin:0 auto; and then position the left nav accordingly.
The scrolling bars issue has to do with page overflow. You might be using overflow:hidden and when the page doesn't fit the browser doesn't show the scrollbars.
So, for a website I've been trying to get a specific layout to work across the IE browsers (FF + Chrome are a plus if they work, but usually they do).
Below you can see the layout I'm trying to achieve;
alt text http://dl.dropbox.com/u/2199846/layout.png
As you can see, this is just a slight variation of a multi-column layout that you can see around the internet. Just with some added extra's.
- no div should ever exceed the page height, if they do, they should just overflow (but normally that will only happen for the middle part)
- the "toggle" link should toggle the div below visible/invisible (got the jquery code and all, no issues there), but that toggle should offcourse expand/decrease the width of the middle div.
I'm at the end of my possibility's here, and tried changing to a full table layout, but that had the problem of always expanding when content got too much...
If any of you CSS heroes out there know how to make this layout, I'll be very grateful!!
EDIT:
What I forgot to add is that certain parts of this design should be fixed width/height. The top part should be 60px height, right and left side should be 200px width. And the small bar (+ toggle bar) should be 30px high.
Of course I'll try to work from the example posted below, but I thought I'd add this edit just in case someone finds it challenging to make (I know I find it challenging, yet I'm not so good yet in CSS for now)
http://jsfiddle.net/YGgTx/1/
this is a mock up of what you are trying to do I believe. As it indicated by the other posters you may want to use hide() to handle the menu effect. If there is anything wrong with this mockup let me know, I do not have IE6 installed but it works on 8.