I want to use abbreviation of days in small screen size.
For example when screen is shrinked I want to change 'Saturday' to 'Sat'.
How can I do this?
Select 'Display'. Select the 'Change display settings' link towards the top of the window on the left-hand side. In the 'Resolution' section, select the pull-down bar, and a slider bar should appear. Move the slider bar down to make the text larger, or move it up to make the text smaller.
To change the size of your text with inline CSS, you have to do it with the style attribute. You type in the font-size property, and then assign it a value.
Syntax: font-size-adjust: number|none|initial|inherit; Below are the examples that illustrates the use of font-size-adjust property.
Have 2 spans with full and short strings, then when below target resolution, swap between them using a media query:
HTML
<span class="full-text">Saturday</span> <span class="short-text">Sat</span>
CSS
// Hide short text by default (resolution > 1200px) .short-text { display: none; } // When resolution <= 1200px, hide full text and show short text @media (max-width: 1200px) { .short-text { display: inline-block; } .full-text { display: none; } }
Replace 1200px with your target resolution breakpoint.
More on CSS media queries
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With