I was wondering if I could use css-grid or something as simple to limit the width of my content in a superwide screen but then allow it to show full width in smaller screens.
I don't want to use media queries.
Here is my jsfiddle
My idea is something like
grid-template-columns: minmax(1fr, 40em);
But this is invalid css. Is there something valid and equivalent?
One very simple way is to just centre an element with a width: 100% and a max-width:
#example {
background-color: #009;
width: 100%; /* Fill 100% width */
max-width: 1000px; /* Unless it's larger than the maximum */
height: 100px;
margin: 0 auto;
}
<div id="example"></div>
(Click the "Full page" snippet button to see this working)
Related
I'm just starting with flex layout and encounter one problem. I have the following code:
wrapper {display: flex; width: 100%; }
graphic {flex-grow: 1; flex-shrink: 1; text-align: center;}
graphic img {width: 100%; max-width: 400px;}
nav {width: 200px;}
<wrapper>
<nav><img src="http://lorempixel.com/200/200/" /></nav>
<graphic><img src="http://lorempixel.com/200/100/" /></graphic>
<nav><img src="http://lorempixel.com/200/200/" /></nav>
</wrapper>
Left and right are fixed width; center grows and shrinks when resizing the browser window - OK so far. However I would like to prevent the center image from exceeding it's natural size. I expected that max-width would do the job but it doesn't. Can you explain why and how to do in a correct way?
My browser is Opera. PS: Sorry for the selfmade tags, I got this code from another forum and didn't correct it yet.
By looking at your code it looks like the max-width: 400px should be applied to the parent element of the image, in this case <graphic> this will prevent the image container from being larger than 400px.
graphic {
flex-grow: 1;
flex-shrink: 1;
max-width: 400px;
text-align: center;
}
graphic img {
width: 100%;
}
I have few divs on my page, which serve as a containers. Here is a sample CSS code of one of the divs:
header {
background-color: #fff;
height: 153px;
width: 97%;
min-width: 1084.06px;
margin: 15px auto;
position: absolute;
left: 0;
right: 0;
border-radius: 20px;
}
This is a centered container for my header. There are several other containers which I have styled simillar way (absolute, centered and width in %).
Problem is, when I resize the window, all these containers hit the left side of the browser window. I want to save some margin on particular window width. How can I achieve that?
P.S. If I add margin-left it breaks my center position of the div
You can use media queries, media queries are only applied on specific conditions, such as a specific width.
For example the following background-color rule won't apply for screens wider than 480px:
#media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
For more info about media queries see this w3schools page
Add another margin-right
then straighten it out depending on what you use
I don't know if the title is quite correct, but what I want basically is to create a div element that stays proportional to the resolution of the screen. For example, if the width is 1900px I want that the div have:
width: 1115px;
height: 775px;
But if the width of the page is 1050px I want:
width: 620px;
height: 430px;
What should be my CSS to allow this?
So I want that the width is a percentage of the screen, let's say, and the height is based on the width.
There are two solutions to make the element proportional to the screen, one which depends on your setup.
You can use percentage
width: 20%;
But this only defines a percentage of the parent element, and does not make both your width and height proportional
You can also use viewport units. This defines a percentage of the viewport. If you use viewport width vw you can get a height which is dependent on the width.
height: 10vw; /*10% of viewport width*/
width: 10vw;
You do have to be aware that this is relatively new, so do not forget to check "known issues" on caniuse.com
You can also setup media queries to handle smaller or bigger screens.
#media (max-width: 300px) {/*10% of 300px is very small, so we change it to 90%*/
.selector {
width: 90vw;
}
}
Here is the solution, simply you should calculate the desired aspect ratio, i.e. width/height:
Maintain the aspect ratio of a div with CSS
You can use CSS media queries, like this:
.selector {
width: 1115px;
heigth: 775px;
}
#media (max-width: 1050px) {
.selector {
width: 620px;
height: 430px;
}
}
I'm trying to make my site a little more mobile-friendly. I have some graphs that look best when they can be pretty wide (800px), but I would prefer for them to shrink on mobile instead of having a scroll bar. I've added this to a stylesheet:
#media screen and (max-width:600px){
div.graph {
max-width: 100%;
margin: auto;
height:400px;
}
}
#media screen and (min-width:601px){
div.graph{
max-width: 800px;
margin: auto;
height: 400px;
}
}
And included that in my master page:
<link href="~/Styles/ResponsiveDesign.css" rel="stylesheet" type="text/css" />
Here is one of the divs that holds a graph:
<div class="graph" id="myDiv" ></div>
The problem is when I view the page with the browser full-size now, the graph is huge--far more than 800 px. Even if I change the max-width to something ridiculous like 25px, it's still huge. Any thoughts?
Do like this (and make sure custom CSS is loaded last if you use a library)
Update based on a comment
Since inline style work, add !important like this and it should work
width: 800px !important;
max-width: 100% !important;
and if it does work, you do have another rule overriding these or else they would have worked without the !important
div.graph{
width: 800px;
margin: auto;
height: 150px;
background: red
}
#media screen and (max-width:800px){
div.graph {
max-width: 100%;
}
}
<div class="graph" id="myDiv" ></div>
In this particular case you actually don't need the media query at all
div.graph{
width: 800px;
max-width: 100%;
margin: auto;
height: 150px;
background: red
}
<div class="graph" id="myDiv" ></div>
i think you should set it in percentage.
Ok, so if I understand it correctly you are trying to set the max width to 800px if the screen's width is bigger than 600px. How bout concretely setting the width of the div to 800px if the screen is bigger than 800px?
Alright, than the only other thing I can think of is its calling the other css block where you set the max-width to 100%. Maybe since its the same class name it is doing this I dont know. You could try commenting out that line and just trying it to see what happens. And sorry Im editing and not commenting I just started so I cant comment...?
I think the problem might be with the graph size itself, could you inspect element and check the size of the contents of the graph? My guess is that the div is the correct size, the graph isn't. We'd need to know how you are creating the graph for more specifics. Could you screen or put a demo of the graph?
Possibly also try a more specific selector? Ex:
body div#id div.graph{}
(I can't comment, sorry if this is not an answer)
I'm using the following CSS to adjust the height of a scroll box:
.scroll
{
//max-height: 750px;
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
}
I would like to use 750px, but this is too tall for screens with smaller resolution. 400px works with smaller resolutions, but looks bad on larger screens. Is there a way to specify something like this by percentage? When I try 100%, it breaks my scroll box and uses the entire screen.
One solution would be to use CSS media queries:
#media(max-width:767px){ /* change the max-width to suit your needs */
.scroll {
max-height: 400px;
}
}
#media(min-width:768px){ /* change the min-width to suit your needs */
.scroll {
max-height: 750px;
}
}
I think you should use JS or create two CSS files - one for PC and second to another small devices.