After a 30 minutes searching in Stack Overflow i could not find a solution to my problem, so here is it:
I have a static blog, and it's almost 99% responsive. The problem comes with a larger titles with wider words (like "documentfragments", in my case), they make a horizontal scrollbar in screens with a width below 400px.
Here the example:
As you can see, the width is (in that specific case), 320px and the header breaks the layout.
Im not a specialist in stylesheets, i'm learning but whatever i do (adjust the width, font size, etc) i cant give a solution to the problem.
Any idea?
You have a few options here.
1. Make the font-size smaller.
You could reduce the font-size to something that is not likely to result in overflowing text.
2. Hyphen-Wrap your words
Using CSS you can set your element to hyphenate your words so they wrap when they run out of space. Just add word-wrap: break-word to the element in your css.
3. Use Javascript
You could write some javascript that calculates the width that it needs to fit into, then alter the font-size appropriately.
Related
I want to set up a certain CSS layout described by the following:
it is table-structured, so there are a number of rows each having certain amount of cells; cells borders in different rows possibly do not align;
it is fullscreen; not like occupying whole device display, but rather using all the window space present - the window height should be divided in rows and its length should be divided in cells (full-window would be a more precise term)
it is adaptive; meaning, heights and lengths are given as percentage from window dimensions; this also applies to margins, paddings, etc.
More accurately, I am trying to make a web-chat application consisting of message area, list of online users, text input and "send" button. I want each of these components to have space of certain (relative to window dimesions) length between them and between window borders and components adjacent to them (that is, margins). I want this layout to persist precisely after zooming or resizing the window.
I do realize that this could be achieved with Javascript (which I am capable of), but I assume that would be ugly and less efficient, so I would like to use CSS (if possible).
So far I tried:
marking up the window with inline-block wrappers containing the actual visible elements; didn't really work because setting wrapped content's width and height to 100% results in them expanding the wrappers (regarding borders and margins), which ruins the layout instantly; I understand I could try 98%, 97.5%, 97.2%, etc. but this is not precise so it really bugs me
using floating divs (same as above)
using table, table-row and table-cell divs; did not satisfy my requirements because only absolute values work this way
I am really a newb, so I might have missed a number of obvious points here.
Could you use the vh and vw measurments,
they can be used like this:
height 10vh;
width 100vw;
this would make a row that's 1/10th of the screen tall and 100% wide.
Okay, using Javascript looks like the only reasonable option here.
I'm building a phonegap app for IOS, and I have one <p> tag who's contents must be exactly one line across.
These elements have the full width of the device minus a little outer padding. What I want is for the text to scale to as large a font-size as possible without wrapping to next line, without being cutoff by ellipsis or being clipped, or overflowing.
So far I can accomplish this by precisely setting the font-size (which can be done - there are only about 10 devices to think about), but I'd rather have IOS UIWeview display figure it out for me.
Is it possible to achieve this with CSS?
With CSS only, you can achieve this using Viewport Units by setting the font-size to fill up the space, but now with the text size responsive based on the viewport's width.
p {
font-size: 7vw; //set to the preferred size based on length of text
}
Here is a simple demo using vw units: https://jsfiddle.net/gmattucc/mh3rsr0o/
You would have to check if vw, vh units are supported in the device you are targeting: http://caniuse.com/#feat=viewport-units
You might also want to check out this article to learn more: https://css-tricks.com/viewport-sized-typography/
Hopefully this is possible to do in just CSS and not javascript+css.
What I am trying to achieve is say I have a container which has a fixed width of 100px. It cannot be smaller nor larger than 100px. I have text in this container that I want to always be on one line (nowrap) and if the text is too long it will scale the font to fit the container.
Is this possible? I tried setting the width and setting font-size: 100% with whitespace:nowrap. It doesn't quite work tho. The font scales but not enough to stay in the box. Using overflow:hidden wont work because it will cut the text off which I do not want.
I know this is 4 years late,(This is for people searching this problem later on, as this was my number one hit on google) but I was able to do a small work around with {font-size: _vw}. I am not sure if this was back then. but for me personally, I set the vw of my text (with a little trial and error) to find the size I needed and stuck with it. It scales perfectly now. I guess you can come into issues with REALLY big screens and possibly mobile if the text becomes TOO small. But with just that one line of CSS it worked completely for me.
No it is not actually possible to scale a font size according to available space calculated on 'container width and how many characters are in container' with only .css
I'm learning the new "Responsive design", and one of the first things I understood is that we should use percentages in defining whatever we could define, most importantly, the width.
Let's say I have 2 inline-block divs.
<div>
//Left div
</div>
<div>
//Right div
</div>
The first div, has a width:50%, the second div has a width:40%, everything seems good here, they are beside each other, and when you resize the browser they will get smaller.
So that we stop them from resizing too much (where things become unreadable), we should use min-width in pixels.
If I set min-width:200px; for the first div, and min-width:100px; for the second div, and when I resize the window until the second div becomes under the first div, everything seems good.
But if I resize MORE and MORE, the width will stay fixed because the browser size is less than the min-width of those divs, which will lead to the creation of the scrollbar.
I am resizing so I can test how things should look on smaller resolutions (phones, tablets), am I missing something here? Is this where everything stops and the role of media queries begin? or there's more that I can do to fix this?
JSFIDDLE
Is this where everything stops and the role of media queries begin?
Essentially, yes. Media Queries are what you need to use when you feel that your design can no longer squeeze in to the space you're providing it. At the point you're talking about, roughly 300px window size (plus margins?) you would want to use a media query to change the way you display those divs, perhaps so that they were 100% of the width of the viewport, and thus stacked one on top of another rather than side by side. This would effectively over-ride the min-width in practical terms for your example.
What you want to achieve is a design that works regardless of the viewport size, and the moment that making the viewport too small, or too big, means that the layout is hard for the user to use or read, then media queries provide the best way right now to "reset" the layout to re-inject usability for that new set of dimensions.
I would say you don't necessarily have to worry about setting a min-width; though there's a strong argument for using them to take in to consideration internet explorer, as it won't deal with media queries in it's older versions.
What you are looking for is known as responsive layout.
Here are couple of reference links that might help you to achieve responsive layout.
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://www.elementfusion.com/tutorial-optimizing-your-website-for-mobile-devices
I have created my website as a fixed layout, with a width of 1600px,
but the webpage on a smaller resolution looks too big.
What am I supposed to do to make it looks good in every resolution?
Thanks for help
Use relative measures, like width: 100%. You can constrain this even more by using min-width and max-width.
Apart from that, you can use CSS media queries to make styles that only apply if certain conditions are met, like a minimum or maximum width. If you use that, you can change the whole look and feel of your website, for instance by hiding parts on smaller devices or change from a 2 column to a 1 column text presentation on smaller devices.
A percentage-based width would change the width depending on the screen size, but you should also use min-width to ensure the page doesn't become too thin that it ruins your content.
Your options:
Use a narrower fixed width. Staying under 1,000 pixels is fairly safe though not perfect
Use percentages for page width instead, though this is difficult if you need to have a set width for child elements to look right
Do a combination of the above and use media queries in your CSS to make your site responsive. It'll fit every screen width you specify AND you'll have full control over your layout at each trigger point.
Here is a great resource for learning about responsive sites - this is the way to build a modern website, so though it might seem confusing it's worth every minute you spend on it.
http://bradfrost.github.com/this-is-responsive/resources.html
Good luck.