When trying to make websites responsive I quite often get horizontal scrollbar on small widths. But often it is quite not obvious which element introduces it and it might take quite some time to pin down. It is even worse when it is interaction of multiple elements... So maybe someone can give some advice, of how to reliably find which elements flow incorrectly?
You get a horizontal scroll bar when some element has width greater than its parent.
If problem is occurring in responsive design, elements which has width in px or em are probably the ones causing issue. Give them width in % and that might solve your issue.
Related
This is a tough question and I've struggled with it long enough - time to ask people who probably know more than I about CSS layouts and why my layout is such a nightmare.
Consider this image:
The blue line represents the viewport. The layout is forced by the application to be horizontal / landscape. The user understands this, so not an issue.
The constraints... The column on the left can occupy no more than 30% of the available viewport space. That's easy enough. The tic-tac-toe grid to the right will occupy the remainder. Between the left column and the grid, there is about 12px space (margins, padding, whatever gets it done). The grid on the right, in this example, has 9 boxes, but can have less and needs to flow accordingly. The widths of the columns in the grid must be equal. The heights of the rows in the grid must be equal. The text in each box in the grid cannot force the size to become unbalanced (width or height), meaning overflow: hidden is acceptable or truncate and add ellipsis.
This can be displayed on a desktop computer, phone, tablet, etc. The layout should adapt, but that's not a huge issue. Maintaining the ratios/sizes is.
So, that's about it. Tricky. I intentionally haven't posted code because my code for this has become such a monstrosity as to become useless and likely to taint any ideas the enlightened folks here might have.
Thoughts? Help? Thank you so much in advance!
You can do it pretty easy using flexbox . Here's a complete tutorial on flexbox
Also, you can do it by using javascript, getting the wrapper width and height and divide by 3, and assign the values to the tic tac cells
It would be great if u have included your code
Try using Flexbox for this. That would help you solve your probelm easy.
Hope this links help you to solve your problem.
1.Link 1
2.Link 2
I have a <header> that is position: fixed; to the top of the display.
The natural consequence of this is that <main> ends up going underneath the fairly sizeable <header>.
I've faced this problem before and have solved it with a simple margin-top assignment on <main>. Here the issue is a little different though.
The height of the <header> is variable and unknown. It has top and bottom padding of 5px and a bottom margin of 5px. It has no explicitly set height of its own; it is decided by the content within.
The largest element in the <header> is an image that is assigned its height as 20vh. There is also an <h1> and <h3>, again sized using <vh> units. I know of no way that allows me to offset <main> so it is always below this dynamically-sized, responsive <header>.
I've been browsing SO but have found no single accepted solution to solve this. Many ideas rest solely on catching window resizes with JavaScript, getting the computed height of the header and assigning the top of main to match. I fear this approach will decrease performance and also introduce annoying page jumps/leaps etc. as JS catches up with the scrolling.
How this is kind of problem usually tackled in responsive design? Ideally, I'm looking for a pure CSS solution to this problem, or some kind of workaround for `position: fixed;'. Failing that, an elegant and versatile JS solution that doesn't hinder performance. This issue is causing me problems, because none of my usual attempts to resolve absolute/fixed positioning headaches are able to help.
Any advice would be much appreciated.
-Ilmiont
I would check this post. They mention pushing the content down with a second header or using javascript.
My guess is javascript would be a cleaner approach so you don't have extra content and unnecessary requests being made to the server.
As the title suggests, I'm working front-end trying to make a website where I noticed that letting content overflow in some situations is beneficial to the user experience. I'm just not sure if there's any programmatic issues with letting the content of a div live outside of its parent, and it is working out pretty well for me. The content in never overlapping, just occasionally exceeding the parent div's width.
Is there anything that could go wrong? Any accessibility issues?
It's probably a bad approach. Content should not overflow. Also, div's should be flexible in height and fixed in width, or with a percentage width.
You could set overflow-x: auto; to get a scroll bar.
Accessibility issues might occur on mobile devices.
I swear I've done this before, but maybe it was in the pre-standards bad old days. Now I can't even figure out the keywords to find possible workarounds.
So I have a table that is in a wrapper so that the x-overflow is inside the wrapper instead of expanding the window. Let's say each column is hard-set with css to be 150px. I want it so that when horizontally scrolling the wrapper, the scrollbar "jumps" 150 pixels so that the right edge of the next column is aligned with the left margin of the wrapper. In other words, you scroll by column, not by pixel, so that the left-side of the viewport is never a partial column.
By extension, it would be ideal if this could be variable-width jumping so that the columns aren't forced to be a unified width, and I'd like to have this and all of the above for vertical scrolling as well.
I thought this was a standard but overlooked option for css or at least a deprecated html style attribute, but like I said, now I can't even find the idea/concept when I Google they keywords that come to mind.
Any help (even somewhat hackish ones that get me started) is appreciated.
This ain't exactly CSS, but you can use the DOM attribute scrollLeft (and also scrollTop if you need that direction).
For more information and a bit of an example, you can refer to this page.
I'm having a slight problem. Whenever I hover over the "SEO" option on my navigation in IE, the navigation breaks & moves to the side. This doesn't happen in Firefox. Changing the navigation to position:absolute fixes it, but then the main content becomes merged with the navigation. It all validates. Any help would be much appreciated!
http://www.joemarketeer.com
http://jsfiddle.net/eoJ1/Ra4tR/
Thanks loads!
The navleft and navright divs are resizing independently, which is to be expected given your design structure. But it looks weird as it comes down on top of the content below:
One suggestion I can give you is not to set the navigation bar width in %, which you have done for these two divs. If you set a fixed width (in px) or remove the width specification completely (in which case it will take the width of its inner content), a horizontal scrollbar will appear below the page when the width is small, which I suppose is fine. Also, use as few floats as possible as they break the flow of content in the document and are more prone to breaking layouts. Both these divs have a float:left, which can be dumped for more stable solutions. I'm saying all this because I think the breaking of the layout on hover is occurring due to these reasons. If you can take care of this, your problem might disappear.
So my suggestion is to have a single nav div with width: 100%. Inside this put two divs: navleft and navright with display:inline and widths a.) specified in px or not at all, or b.) specified in % but with some min-width in px. If you don't specify any width for navright, it will expand to fill all of the space on the right.
This way these two divs will not reflow independently.
Basically, toy around more until you get better command over CSS; I think more experience will automatically help you sort out issues like this.