Is it possible to use CSS' calc() function together with viewport sizes to determine a maximum and minimum for a property or should I use another approach for this?
I managed to get some kind of max or min but not both for a certain value. Here is how I set a minimum value of roughly 32px for the font-size property.
.selector {
font-size: calc(32px + 2vw);
}
Unfortunately at enormous resolutions the font size would be enormous as well, what will not look as pretty as expected. Vice versa when setting a maximum size. That's why I'm looking for a solution what helps to set a both max and min value for the property.
The code above is actually pretty close to what I want but I would like to know if you guys found a better approach. The main objective is to make the "selector" to about 1/4 of the wrapper it's size at either small and big resolutions. Consider the wrapper, a parent element of the selector element what has the following properties:
.wrapper {
width: 100%;
margin: 0 auto;
padding: 0 40px;
max-width: 1200px;
box-sizing: border-box;
}
You need to set the viewport with media queries, there is no automated way to set max-fontsize unfortunately.
.selector {
font-size: calc(32px + 2vw);
}
#media (min-width: 900px) {
.selector {
font-size: 70px;
}
}
#media (max-width: 400px) {
.selector {
font-size: 40px;
}
}
Related
My website is designed on a larger monitor and has a screen width of 2560px (Samsung 32"). Therefore it must be scaled down to appear properly on any smaller screen; for example, a common laptop with a 17" screen has a pixel width of 1366px. So, by dividing 1366 / 2560 we get the right scale percentage of .53 for use in a CSS transform:scale(calc(1366 / 2560)); formula.
The entire page is wrapped in a div that I have called .omniScale
.omniScale {
display: table;
margin:0 auto;
transform-origin: top left;
transform:scale(calc(1366 / 2560));
}
This works just great, however the 1366 has to change dynamically on page load to the width of the user’s device no matter if it may be a tablet, laptop, mid-size desktop monitor or larger on up to a large television.
Using 100vw instead of the hardwired number does not work. I don't want to use JavaScript, if avoidable, so has to work for those who have js turned off.
Welcome to Stack Overflow :]
Sadly at this moment there is no mechanism to calculate integer ratio of two length values in pure CSS (calc(100vw / 2560px) won't work, because you can divide length only with integer to get other length, not with other length to get integer).
So if you want to get ratio of your reference element to actual viewport, JavaScript seems to be the only option. Reasonable approach would be use JS just to set CSS custom property and let styles do the rest:
function setScaleRatio() {
viewportWidth = document.documentElement.clientWidth;
fullWidth = 2560 + 200;
// (2560 is reference size, +200 just to make sure we'll see right border in this example)
scaleRatio = viewportWidth / fullWidth;
document.documentElement.style.setProperty('--ratio', scaleRatio);
};
setScaleRatio();
window.addEventListener('resize', setScaleRatio);
[style]::before {
content: attr(style);
}
<div style="
width: 2560px;
transform: scale(var(--ratio));
transform-origin: top left;
font-size: 100px;
background-color: black;
color: white;
"></div>
I don't think this is the right approach. to make something responsive to all screens it is best to use percentages and #madia.
for more info: https://blog.froont.com/9-basic-principles-of-responsive-web-design/
example:
.container {
width: 2560px;
}
#media only screen and (max-width: 2560px) {
.container {
width: 1366px;
}
}
#media only screen and (max-width: 1366px) {
.container {
width: 900px;
}
}
#media only screen and (max-width: 900px) {
.container {
width: 500px;
}
}
In my class we are starting to use Media Queries and I am having a little trouble with an assignment. For a previous assignment we were tasked with remaking a website called "the Toast" as best we could, which I have here. Now for this assignment we are to use media query to do a few things:
This assignment is all about media queries and getting your site to be
responsive. We will be using the website The toast again for this
assignment. You will be laying out two columns for the content area.
When the screen size hits 960px the right column must disappear. The
articles in the left column must adjust to the width of the screen.
The images must get bigger and fill the article at 960 px as well.
At 760 px the support us button, love the toast text and the social
media must disappear.
In the code I have two columns, a "bigColumn" and a "adColumn". Now to my understanding to make the adcolumn disappear and adjust the bigColumn I simply have to add:
#media only screen and (max-width: 960px) {
.main {
.bigColumn {
width: 100%;
}
.adColumn {
display: none;
}
}
}
However this is not working. The ad never disappears and the rest of the content doesn't do anything in terms of filling the rest of the page when shrinking the window. If I change the background color in the .main the color changes, but changing anything in the two divs has no effect that I can see. I can get the social media icons to disappear at 760px just fine, so am I just missing something with the media query for the columns? Or could something else be interfering with it?
EDIT: Guess I should mention that yes, I am indeed using SASS in the project.
Here is the styling I have for the columns before I started the media query:
.main {
width: 90%;
display: flex;
min-height: 200px;
margin: 0 auto;
//column for main-page content
.bigColumn {
width: 800px;
height: 100%;
margin-top: 20px;
margin-right: 9%;
margin-left: 13%;
}
.adColumn {
margin-top: 20px;
position: relative;
min-height: 120px;
}
}
I don't believe you can nest your CSS like that unless you are using a preprocessor like LESS or SASS. Try taking the .bigColumn CSS out of the .main brackets and leave it on its own.
#media only screen and (max-width: 960px) {
.bigColumn {
width: 100%;
}
.adColumn {
display: none;
}
}
Based on your css I think you're close, but there appears to be a an error in the way you've structured your css. Give this a try. I'm assuming .bigColumn and .adColumn are children of .main:
/* All screens 960px or less */
#media only screen and (max-width: 960px) {
.main .bigColumn {
width: 100%;
}
.main .adColumn {
display: none;
}
}
Intro
this is similar to this question but unfortunately the answer only applies to greasmonkey (which only works on firefox). Further, this was asked on the stylish forum but the answer was ambiguous.
Question
I want to remove the left column in the azure help page and
expand the main body to make it cover the widht of the screen.
The first part can easily be done by this
#sidebarContent {display:none}
How ever the second part must conver this
media (max-width: 1199.99999px)
to this
media (max-width: 100%)
But I have no idea how to do that using stylish.. ideas?
To override a media query you just need to load another media query - that also applies to your device - after it.
Well...you want a blunt media query that applies to everything. The best way is to use #media (min-width: 1px) since that includes all devices.
Now, put it all together - along with some other CSS cleanups like padding and margin removal and setting a new width for .mainContainer and you get this
#sidebar {
display: none;
}
#media (min-width: 1px) {
.mainContainer {
margin: 0 auto;
width: 100vw;
padding: 0;
}
body>.container {
padding: 0;
}
}
New code: (with different selector for width)
#sidebar {
display: none;
}
#media (min-width: 1px) {
.mainContainer { /*example styles*/
margin: 0 auto;
width: 100vw;
}
body>.container {
padding: 0;
}
body>.mainContainer>main {
max-width: 100vw!important;
}
}
You still have to adjust the padding to your preference as setting the padding to 0 breaks the design a little bit but this should be good starting point.
Before:
After:
I want to solve my issue only using pure CSS.
Here's the problematic code that I have:
#if (100vh > 830px) {:root { --cwv:100vh;}}
#else {:root { --cwv: 830px;}}
What I'm trying to do: if browser window size is smaller than 830px, the "- -cvw" (custom width variable/ unit) should be relative (another problem that my code probably has) to 830px rather than 100vw (built-in viewport "vertical width" unit), as the elements on the page get too small.
I know I can use multiple other ways to solve this problem using other languages, but I am just wondering how to make the CSS code work - as it is supposed to - according to the places that I have researched:
CSS custom properties (variables) - states that variables are declared in the following manner: :root{--variable-name: variable-value;}
CSS Conditionals (if/ else statements)
What am I doing wrong? I expect that I have multiple syntax errors in my code (that I've provided above) too... :/
Use media queries max-width.
Example:
Default --cwx set to viewport width:
:root{
--cwv: 100vw;
}
In case where viewport width is lesser or equal 830px, set --cwx to 830px:
#media all and (max-width: 830px){
:root{
--cwv: 830px;
}
}
Finally, example's black bar will be set to ½ of --cwx, thus ½ of viewport width, but not less than ½ of 830px (=415px):
:root{
--cwv: 100vw;
}
#media all and (max-width: 830px){
:root{
--cwv: 830px;
}
}
body{
margin: 0;
}
:root::after{
content: "";
display: block;
background: black;
height: 10px;
width: calc(var(--cwv) * .5);
}
use media queries for window size like this below
#media screen and (min-width : 830 px) {
/* your code */
}
I am looking for a solution where I define 1 variable globally and than overwrite it inside a media query - without putting the entire code in it (like LESS CSS set variables in media query?).
I thought something like that(defining):
#media (min-width: 768px) {
#BWInputHeight: 40px;
}
#media (max-width: 768px) {
//responsive screens
#BWInputHeight: 20px;
}
And using it like that:
.dataTables_filter input {
.form-control;
max-width: 135px;
display: inline-block;
height: #BWInputHeight;
padding: 1px 6px;
margin-right: 15px;
}
The problem here, "#BWInputHeight" is a undeclared variable. How can I solve this with LESS ?
You can sort of achieve this by using list arrays for each property and screen-width (like the below sample):
#BWInputHeight: '20px','40px','60px'; // Height of the button for min-width=320 and min-width=768 respectively
#minwidths: '320px','768px','1024px'; // The widths for which you need the media queries to be created
.loop-column(#index) when (#index > 0) { // Loop to iterate through each value in #minwidths and form the corresponding output
.loop-column(#index - 1);
#width: extract(#minwidths, #index); // extracts width based on array index
#media (min-width: e(#width)){
.dataTables_filter input{
height: e(extract(#BWInputHeight,#index)); // extracts button height for the corresponding screen width
max-width: 135px;
display: inline-block;
padding: 1px 6px;
margin-right: 15px;
}
}
}
.loop-column(length(#minwidths)); // calling the function
Demo in Code-pen - Modify output area width to see difference and click the eye icon in CSS tab to see compiled CSS.
Note: As per this Stack Overflow thread, both dotless and less.js should be 99% compatible and hence I have given this answer. In case this doesn't work for you, I will happily have this answer removed.