I'm trying to update/add functionality for someone's library that displays a SVG. A demo of the library can be found here: https://rschristian.github.io/preact-github-calendar. Source here: https://github.com/rschristian/preact-github-calendar/blob/b51d41ac92d3b195e14a175248e4c408404830f4/src/index.tsx#L200 . It is (P)react, but the main thing is the SVG I've linked to (I believe).
So this library is a recreation of GitHub's contribution calendar, plus a few things here and there. Currently, the behavior is that the whole calendar is fit into the parent element no matter the screen size. So on bigger parents it scales up on smaller it scales down. The issue I'm trying to fix is that on smaller screens like a phone, fitting the full calendar into the width allowed really compresses the component and makes it rather unreadable.
So how does GitHub do this? It basically hides the left-most x%, so only the most recent (right side) data is shown.
But here's ultimately the problem I can't solve: I want the calendar to be remain dynamic (and I imagine the library's owner will too) but on smaller screens it should be cut off. I believe this means that I want to use the viewbox on desktop+ screens, but resort to height and width on smaller devices in order to actually cut it off. I'm not sure if this is the right idea though, and if it is, how to go about doing that at all.
Now I've tried a bunch of way of doing this, and I believe preserveAspectRatio="xMaxYMid slice" is what I want (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) but I can't seem to get it working. I'm not really understanding how height/width, viewbox, and preserveAspectRatio all line up. It seems like preserveAspectRatio is entirely ignored and I'm not sure why.
Sandbox: https://codesandbox.io/s/elegant-dubinsky-8miml
Related
I am currently trying to build a personal profile page. It's a work in progress, and I know little HTML, but I'm getting there.
I'm having an issue with my webpage with regards to how it scales with changes of the browser window size. On my (quite wide) screen at university, it looks fine. However, reducing the browser window size manually - or simply viewing it in a full size browser window on a smaller screen - appears to mess everything up - it doesn't look very nice. Text goes close to my pictures, and it all looks a bit tatty.
I think this is probably because my design is quite poor.
1. Is it because my design is bad or is there something else I'm doing blatantly wrong?
My current idea for a solution is to resize things so that they would look more reasonable on a smaller screen (i.e. on a normal sized laptop). I'm worried that this might end up making things look a bit odd on a bigger screen, though.
2. Is it possible/within reason for a beginner to have two different designs, one for smaller screens and one for big screens, which could be detected and then utilised depending on what screen size viewer is using? Should my page be designed to simply work with whatever screen size?
3. If I do reorganize the page such that it works better with smaller
screens, is there a way to "lock" this design in place, so that it
doesn't get messed up if someone views my page in a wider window?
Perhaps a way to ensure that only the boundaries of the page increase
in width?
What I'm essentially asking is how I should go about designing my page in order to resolve the evident issue - where the issue is that it looks rubbish when the browser window is any smaller than the max size of my screen at university.
You've created your page using tables. It is not a good practise nowadays exactly due to the problems your are facing. In practise, tables should not be used for layout purposes.
To make your layout fluid it'd be better to develop using div with float and relative positioning.
You can see another discussion related to this topic here
https://webmasters.stackexchange.com/questions/6036/why-arent-we-supposed-to-use-table-in-a-design/6037
You could use css property #media, to handle different styles for different screen width: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I've attached two images showing the effect I'm trying to achieve, and what's wrong with the way I'm currently doing it. The first is displayed on page load, the second when you click on the down arrow.
The second partially obscures the first, currently using a negative margin. My current version has an invisible element underneath the leftmost box containing the icon, which has the same class as it that handles indentation. But At certain screen widths you get the effect below, where you can see the expanded section's border running halfway up the original element.
I've tried a few things to get rid of the glitch, but it's feeling a lot like pressing down bubbles - either they create worse problems, or the same problem at different widths.
I have the strong suspicion that I'm doing this all wrong, but I haven't thought of a better way to generate the same effects - border around the whole thing, text from the expanded element getting pulled up to approx where the original summary text was.
I can afford to use fairly modern CSS for this - our audience tends to be pretty high tech. In case relevant, I'm using a transition animation for the height increase, so it needs to be something consistent with that.
Before:
After:
The simplest fix for your problem is to make the left icon area overlap the rest (using z-index and position:relative) and extending it by 1px (so it covers the border in all cases).
Update your question with a code example and I'll update my answer with the fix, if the principle outlined above is not enough.
The alternative is to empirically determine the widths at which the border is misplaced and adjust the width of your dropdown, using #media queries.
Another rather important aspect which you don't seem to have determined is if the bug is specific to any particular browsers/devices.
As a side-note, I find quite a few questions similar to yours have one (rather silly) common cause: the developer has unknowingly changed the zoom level of their browser, pressing either Ctrl++ or Ctrl+-, viewing the page at 90% or 110%. Make sure you're developing at a zoom level of 100%, by pressing Ctrl+0.
I'd also like to suggest you take a look at How to ask to get tips on improving your question(s), to increase your chances of getting better answers.
I have begun developing a webpage, just playing around, and I noticed an issue. I code with my live site on one half of my screen, with my editor on the other. It was all going fine until I extended my web browser fully and noticed that only part of my site was re sizing how I wanted it too. Sadly my site is not live, however I do have a link to the code: http://pastebin.com/yeWzfsBW
In theory, the image (logo) doesn't scale down when I resize the window, it stays the same size no matter what. I attempted to use percentages instead of pixel width/heights however it seemed to have no effect. I will try to pop this live so you can see what I mean exactly.
Fullsized browser: http://imageshack.us/photo/my-images/585/fullsizen.jpg/
windowed mode: imageshack.us/photo/my-images/42/resizedkl.jpg/ (please put in the http:// I couldn't link more then two links in this post)
Hopefully you can see what I mean, i'd like the logo to scale, like the #info css section.
Thanks!
no need to wrap the image in a div.
set width & height in css.
set max width and max height.
there is a challenge with keeping the aspect ratio on the image.
to get started, below is an example using your code. after looking at this you may provide feedback about exactly you are trying to achieve.
http://codepen.io/seraphzz/pen/thGkI
I am attempting to create a webpage formatted to fit the width of all screen
sizes (or resolutions).
In other words, I want to format the width of my page in such a way that anyone who views it will not have to use a horizontal scroll bar at the bottom of the screen.
So far, I have found no help on this topic.
Well, there are several approaches. One would be to use ems/percentages for your widths thus achieving a fluid design that adopts to your users screen resolution. The other is to have several css sheets for different widths and call them based upon a screen resolution check from a simple js code.
The first one is a bit harder, but yields good stable results. On the other hand, (as a designer) it kinda restricts your creativity a bit.
It seems to me like the latter is more widely used. Nowadays, 3 different stylesheets will suffice for most devices around the world. One around 900px will cover somewhat older screens, one around 1160px will handle the larger and more modern screens, and one for mobile devices(sorry, no idea on approximate width) should do the trick.
The way you're asking this question, not only will the width of the body have to be 100%, but the width of its the child elements will also have to be in percentages.
The only way to achieve a scalable web page is by avoiding fixed sizes. Of course that presents problems with text since it will attempt to wrap it on the following lines, so you must either specify a minimum width or combine it with a pre tag with overflow: hidden so that it won't affect your page layout at the expense of simply not being able to read the text.
Fortunately, you can easily test your page by simply shrinking your web browser to smaller resolutions and seeing how it pans out.
I made a small page (http://www.ovlu.li) using CMS Made Simple (http://www.cmsmadesimple.org/). It looks more or less okay in all browser, but the problem is, if a resize the window to a smaller size, sometimes the layout of the subnavigation layer is destroyed. Instead of getting smaller, all the elements are ordered more or less randomly. Any hints why?
That is most likely because you are using a fixed width for the main container of your page. If you used the percentage instead, it should not behave that way. However, percent-based layouts are very rare.