I am creating a chart that shows keyboard commands overlaid on top of an image of a keyboard. I would like the text to shrink to the size of the container if it is too long to fit inside a key, but remain the default size otherwise. How would I accomplish this in HTML? The solutions I've seen seem to always alter the text size, versus only when the container is too small. Thanks.
Here's an example of what the result might look like:
You can use something like word-wrap or overflow-wrap or adding a variable with css(i.e: a font-size that fits your needs) and only change it when a media queries (that you established) returns true;
Media Queries explanation:
Let's say I established this variable
:root {
--font-size: 16px;
/* this is your regular font size that you will use in your entire document */
}
So in a given screen size like so:
#media screen and (device-width: 320px) and (orientation: portrait) {
:root {
--font-size: 12px;
}
}
You just change the value of the variable and it will change where ever you used that specific variable
If you don't know how this works you can use this css variables like this
.someClass {
font-size: var(--font-size); */ and that's it :) */
/* You can also make calculations like this */
font-size: calc(var(--font-size) - 40%);
}
Reference:
overflow-wrap: https://css-tricks.com/almanac/properties/o/overflow-wrap/
word-wrap: https://css-tricks.com/almanac/properties/w/word-break/
css variables: https://www.madebymike.com.au/writing/using-css-variables/
media queries: https://www.uxpin.com/studio/blog/media-queries-responsive-web-design/
Related
I know that this question sounds similar to this one but it is different. I have two articles in a section and I want to render them side by side if the width of the window is big enough and underneath if the window width is too small.
The width of the first article is always 800 pixel and the second articles width is defined as the rest of the windows width minus all the paddings etc. So if the calculated width of the second article is too small, I just want to set it to a higher value, which will place the second article under the first article. This shouldn't be too hard if there are ifs like in other programming languages. From the question above I created this demo code for an if else statement but it doesn't work:
#if 1 == 1 {
border-color: #fff;
}
#else {
border-color: #000;
}
Setting to 1 == 2 which should trigger the else part still does the if part. So how can I get real if else statements?
There are no real if/else statements in CSS, you can just use media queries and define your css depending on the width of the window like this:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
if the window is smaller than 600px, the background color is set to lightblue. You can use several queries like min-width and max-width to define your CSS. Just have a look at:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
CSS statements overwrite each other. So if you take this example:
body {
background-color: green;
background-color: red;
}
will result in the background beeing red, because it is defined later.
Now you can use this with the already mentioned media queries:
body { // your default case, if the condition is not met --> the else block
background-color: green;
}
#media(min-width: 800px){ // here the condition is met --> if block
body {
background-color: red;
}
}
Tip: you can use SCSS to make the queries way more readable.
I'm looking for a smart way to control fonts sizes depending on browser resolution - as reusable ass possible.
So i have done the following:
<section>
<h1>Contact</h1>
</section>
And in LESS file i've defined:
.h1 {
font-size: 90px;
}
section h1 {
.h1;
}
So, as you see i have .h1 class defined and i can reuse it.
But later i saw that my idea is now working (media queries don't work:)
#media only screen and (max-width: 991px) {
.h1 {
font-size: 20px;
}
}
.h1 class has 90px always and media queries didn't change font size to 20px.
My question: is this possible to tweak to work ?
This way i can have small amount of reusable classes and change their size in just one place instead of many places.
Thanks.
PS: I've benn using REM's for long time but it's not perfect for me.
I use a fluid-typography mixin, as show in this guide. This page links to a codepen showing a less mixin.
Essentially you pass through the font size values you want to scale between and also the screen sizes that the scaling to occur between. Beneath is some code directly from the codepen link:
.fluid-type(#property, #min-vw, #max-vw, #min-size, #max-size) {
#{property}: #min-size;
#media screen and (min-width: #min-vw) {
#{property}: calc( #min-size ~" + " unit(#max-size - #min-size) ~" * ((100vw - " #min-vw ~") /" unit(#max-vw - #min-vw) ~")" );
}
#media screen and (min-width: #max-vw) {
#{property}: #max-size;
}
}
the way I use it:
h1{
.fluid-type(font-size, #mobileSize, #desktopSize, 36px, 72px);
}
credit to Mike
I want to use two different background-image:url() values based on screen size. This is fairly simple to do if the urls are known ahead of time:
#media (max-width: 400px) {
.element {
background-image:url("/Images/1.png");
}
}
#media (min-width: 401px) {
.element {
background-image:url("/Images/2.png");
}
}
However, I do not know my image urls ahead of time - they are based on information from the user. I can set a single background-image:url() dynamically in the code behind like so:
string backgroundStyle = "background-image: url(\""+loginImagePath+"\"); ";
sBodyWrapper.Attributes.Add("style", backgroundStyle);
But I'm not sure how I might go about setting two different background images which alternatively show based on screen width. I could set the two background images on different elements and hide one of those elements, but I really would like this background image to be on a single body wrapping element.
Is there any way to set values inside of media queries? Can conditional css be applied on the element's style attribute?
You could add the conditional CSS via a style tag appended to the document:
var rules = '<style>
#media(max-width: 400px){
background-image:url("Images/1.png");
}
#media(min-width: 401px){
background-image:url("Images/2.png");
}
</style>';
I'm not sure if this is even possible, but I'd like to throw it out there: say I have something like
.this-thing:hover {
/* something magical */
}
in CSS. During Print Preview and Print, I would like to "disable" whatever hover effect is on .this-thing, such that even if the user is hovering over a given element when they decide they want to print the page, the effects from /* something magical */ do not appear on Print Preview or the printed media.
Is there a pure CSS solution to this?
Note that I do not want to found out what the specifics of /* something magical */ is in order to disable it during #media print.
You could use #media only screen to apply the hover effects only to the :hover rules.
So you would do:
#media only screen {
.this-thing:hover {
/* something magical */
}
}
Organizationally, this may be a mess to pepper #media only screen around all of your hovers, but it's one option.
The same way as you use the only and and logical selector, you can use the not to specify that the style rule should not apply to some media type:
#media not print {
.this-thing:hover {
/* something magical */
}
}
This is the second attempt at this question as I have worked on this since I last asked so hopefully I'll make more sense this time.
I'm creating a responsive layout for my coming soon page. The main body header changes depending on the size of the browser and the device.
<h1><span class="main__header--changer">COMING SOON</span></h1>
... and the CSS
#media (max-width: 75em) {
h1:before {
content: "HOLD ONTO YOUR HATS";
}
.main__header--changer {
display: none;
}
}
#media (max-width: 64em) {
h1:before {
content: "NOT LONG TO GO";
}
.main__header--charger {
display: none;
}
}
... and so on and son on, the different variations of coming soon contains less letters as the size goes down, right down to 'nigh'.
The only thing my way of doing this means that screen readers wont read the heading because of the display:none. Is there a different way to hide the heading but not from screen readers but that the content is shown from the css?
Thanks
You can create a hidden effect by bumping the content way outside the screen display area using margins or the text-indent property. These methods aren't what I'd call 100% clean, but they at least keep your HTML markup tidy.
Check out this helpful thread that explains screen reader interactions with CSS-hidden elements.
I also assume that in the second reference in your CSS you mean --changer not --charger.
On a side note, if the statement: .main__header--changer {display: none;} is the same across all your media queries, you should consider just writing it once outside of any queries so it applies universally without duplication in your code.
Hope this has been helpful!