I have a grid that filled screen and each it's cell contain some text as labels. What should I write in CSS to resize this text to fill container without overflow? Keep in mind it may be restricted by height or by width.
Now it is just
label {
display: flex;
justify-content: center;
align-items: center;
font-size: 150pt; /*must be adaptive*/
}
Jsfiddles: grid 3x3, grid 1x10
Or if there is no ideas...
At the moment I have two formulas as alternate variant that can calculate desired font-size relative to height (first) and width (second). I would use min() of them if it was supported. So if there is no elegant solution on CSS, the other question: will it be effectively to define CSS variable and set to it min of formulas with js in window.onresize?
I'm pretty sure there's no "pure css" way to accomplish this.
I wrote a js script that checks the container for overflow/scroll-height. Either you start at something small, say 1px font size, and continually increase it until the container has overflow, then shrink it back down 1 notch.
Alternatively, have a really large font size, say 200px (or whatever your MAX is). And do the reverse until there's no longer overflow/scrolling on the container.
You could optimize this by jumping "half way" each time, instead of 1px at a time. So...
200px ? scrollHeight > height || scrollWidth > width : true
100px ? scrollHeight > height || scrollWidth > width : false
150px ? scrollHeight > height || scrollWidth > width : true
125px ? scrollHeight > height || scrollWidth > width : true
... etc etc.
A couple other points:
Check scrollHeight AND scrollWidth (a long word that doesn't wrap)
hide the container while it's calculating to prevent flicker
test, test test, lots of potential issues with this, but I've found it works quite well
There's probably a library, just use that if you're lazy ;)
Try this. It would scale the fonts to each container
label {
display: flex;
justify-content: center;
align-items: center;
font-size: 150pt;
font-size: 9vw;
}
Related
On our cover page we want to display a title on a big font but if the title is too long it overflows and isn't displayed properly.
I came up with this js solution to resize the font when it overflows:
/** Checks if an element overflows. **/
let isOverflown = e => e.offsetWidth < e.scrollWidth || e.offsetHeight < e.scrollHeight;
/** Resizes an element's font size until it no longer overflows. **/
let resizeFont = $e => {
let fontSize = parseInt($e.css('font-size'));
const parent = $e.parent()[0];
while (fontSize > 0 && isOverflown(parent)) $e.css('font-size', --fontSize + 'px');
}
resizeFont($('.title'));
And it does work for horizontal overflow, like in this case when you have a very long single word with no whitespaces. Just tweak the max width in the .container and you'll see the resize function at work.
However the same is not true for vertical overflow. Why isn't the overflow check function evaluating this case as no overflow when it obviously is overflowing?
edit: if I add $e.css({'height': '100%'}); after the resizing function is run it does work but for some obscure reason the text is no longer aligned to the bottom on mobile. I tried using flexbox with align-items: end on the parent but then that messes up the resize function. Plus, mobile seems to ignore the flex alignment rule.
Inspect element shows the font-size changing and the height and width are constant for .title. Please recheck.
I fixed it by adding height: 100%; width: 100%; to .title and then using flexbox after the font resizing is finished in order to align the text to the bottom:
$e.css({'display': 'flex', 'align-items': 'flex-end'});
I have been attempting to create a grid of movies, exactly like http://www0.yesmovies.net/
this is my first project using responsive design (rather than a simple minmax usage) and it is stopping me from moving forward.
if someone could take some time out to help me achieve this and tell me the correct way to go about it, it would be highly appreciated believe me.
i have tried using css grid (im pretty sure its the way i need to go) but i cannot get my head round the responsive side.
Thankyou.
I think you can play around with the viewport of the website by resizing your browser's width/height and identify what about the movie grid feels responsive. I gave you a starting point of some of things I noticed:
The movie cards grow smaller as I resize my viewport from larger to smaller.
At a certain set of dimensions, the movie cards go from being 8 smaller cards per row to 6 slightly larger cards.
As I keep shrinking, the site continues to resize the movie cards and change the number of cards per row.
You can achieve this level of responsiveness by using:
either Flexbox or CSS Grid and using their properties
media queries, which looks like #media only screen and...
using percentages or other scalable units for your width and height dimensions on your movie cards
using min-width and min-height to prevent your movie cards from getting too small
alternatively, you can also use max-width and max-height to do the opposite
I have included a snippet that demonstrates a rough implementation of how Flexbox might be used to achieve responsiveness for your site.
const createMovieCard = color => {
const div = document.createElement('div')
div.classList.add('movie__card')
div.style.background = color
div.innerHTML = 'Example movie'
return div
}
const container = document.querySelector('.container')
const colors = ['red', 'blue', 'yellow', 'green', 'orange']
for (let i = 0; i < 50; ++i) {
const color = colors[i % colors.length]
container.appendChild(createMovieCard(color))
}
.container {
width: 100%;
text-align: center;
/* By setting this div's display to flex,
I get access to Flexbox's properties.
I can now use these properties to manipulate
the children of this div. */
display: flex;
/* This is will center this div's children to the left. */
justify-content: left;
/* flex-wrap acts much like a code editor's soft wrapping feature. */
flex-wrap: wrap;
}
.movie__card {
margin: 1em;
background: lightgrey;
/* Children whose parent has `display: flex` also gain access to Flexbox
properties. */
flex: 0;
/* By setting width as a percentage and having a min-width property, you
enable your movie cards to have a larger width when the viewport is
larger and prevent them from getting too small when the viewport
is smaller, such as on a mobile viewport. */
width: 15%;
min-width: 100px;
height: 150px;
}
<div class="container"><!-- The movie cards are generated here using JS. --></div>
I have a page with absolutely no interface at all. It is literally just a string of text (it grabs text every X seconds that could be of various lengths in terms of characters and words.) I need this text to fill exactly 100% of the browser window height and width. Basically the window would be just this string (using whatever Google Font I need) and nothing else (I suppose it could have a bit of a margin but not much)
The text cannot spill over length-wise or height-wise to where scrolling is needed, as there is not user interface to scroll (this is being displayed on a monitor with no keyboard or mouse)... sort of like a sign, but digital.
I have tried everything I know, I am not a UI person, I know very generally how to make a page responsive. I also can use a lot of JQuery if needed. No Angular, etc.
(This will be on a desktop browser, but I assume it would work on mobile too. Again, 100% height and width and no more or no less)
you can set height and width as 'auto' because it will take automatically screen height and width. So, your text should spread according to the screen width and height.
You can use vh unit like this
.textclass {
font-size: 100vh;
white-space: nowrap; /* add this line if you want to text in single line */
}
you also need to remove padding margin of body and html
body, html {
margin: 0;
padding:0;
}
Consider the basic HTML below:
<body>
Random HTML content
<div class="container">
<!--Some content loaded via ajax or the like -->
</div>
Other random HTML content
</body>
I want the width of the "container" div to be the MAXIMUM of three potential values:
100% of the window
1024px (for best visual appearance)
the width of the content
I have been able to accomplish #1 and #2 by using the CSS properties width:100% and min-width:1024px. I can also accomplish #2 and #3 by setting display:inline-block and min-width:1024px. However, I haven't been able to get all three: if I add in the width:100% to the display and min-width properties, it overrides the child content sizing effect of the inline-block display and gives me only 100% width, even when that means the content overflows.
I know I can hide overflow or give the div itself scrollbars, but what I want is for the div to expand as needed, or to the full width of the window, whichever is greater - but never narrower than 1024px.
Edit: Note that the content loaded in the div may be less than 1024px. The div itself, however, should never be less than that, as it would no longer blend nicely with the look and feel of the rest of the page.
You can achieve this by adding another div on top of first one:
<div class="container2">
<div class="container">
</div>
</div>
css:
.container2{min-width:100%; display:inline-block;}
.container{min-width:1024px; width:100%;}
http://jsfiddle.net/om10t3gn/4/
You can augment your second proposal with a virtual pseudo-element to achieve the dimensions you want without using javascript
.container {
min-width: 1024px;
display: inline-block;
}
.container::before {
width: 100vw;
display: block;
content: ' ';
}
Basically, it's adding a zero-height element to the top of your container that has the same width as your viewport, which is 100% of the width of <body>. So it adds #1 to your existing solution that already achieves #2 and #3.
And it doesn't use any javascript, and will stay correct with resizes.
I am not very skilled with CSS, but I think I have a solution for this problem.
To have a max-width in pixels and a max-with in percent at the same time, you could first calculate the width with the clamp-method (this includes the first of your two max-widths) and then add a normal max-width. The clamp-method is relatively new and not supported by old browsers unfortunately.
<div class='container'></div>
CSS:
.container{
width:clamp(400px,250px + 25vw,100%);
max-width:700px;
}
This should set a max-width both at 100% and 700px.
I have tested it on a notebook with Firefox and Chrome.
Use javascript to pick the largest value, use jQuery to assign that value to the width of the container div.
var window_width = $(window).width();
var container_width = $('.container').width();
var default_width = 1024px;
var max_width = Math.max(window_width, container_width, default_widht);
$('.container').css('width', max_width);
I set a div to height:100px; width:50px, but when the content of the div is changing dynamically, I want to let the height adapt to the change.
What should I do?
Easiest way is to do
min-height: 100px;
this will set the minimum height of the div to 100px but allow it to grow as the content grows.
Like others have said min-height and min-width is what you need. It's a css rule and applied like this:
#someDivName {
min-height: 100px;
min-width: 50px;
}
Now your div will be 100px by 50px but if the content inside is bigger, it will adapt to the change. Like others before me have mentioned, min properties do not work in IE6 but who cares about IE6 anymore anyway. Even major sites like youtube has discontinued support for it.
min-height is a good practice. Also, rather than expressing the height in "px," use "em" which will scale with the current font.