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.
Related
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)
Apologies if the title is hard to follow.
Essentially I want the background image to scale relative to the screen size, but only above a certain point, so if you shrink the screen small enough, the image will not shrink with it.
I've done it with my divs with this:
.row{
width: 100%;
min-height: 70px;
min-width: 1000px;
}
Is there something similar I can do with the background?
This is what I have at the moment.
.body{
background-image: url('../static/banner.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
Media queries can do this for you, just use a breakpoint where the background has stops to scale.
For example, this CSS will apply styles only if your browser's
viewport width is equal to or narrower than 12450px:
#media (max-width: 12450px) { ... }
Take a look at:
https://developer.mozilla.org/en/docs/Web/CSS/Media_Queries/Using_media_queries
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 currently working on a project where we use a slider with images. This slider is displayed with width 100%, and currently we're adjusting the height to make the slider responsive, in case the user resizes the browser window or visits the website using their phone.
However, the website is for an artist who obviously does not want the image to be altered in any way, especially not altering with the aspect ratio. So what we're looking into is having height: auto to adjust the image height correctly according to the width: 100%, without altering the image (aspect ratio) itself.
This does not work like intended however, using the following code:
#media (min-width:1600px) {
#header{
height:auto;
width: 100%;
min-height: 630px;
background-size: 100% auto;
}
#slidershadow {
height: 630px;
}
}
We need to have some min-height, otherwise we cannot display the slider controls correctly. Here is a picture of our current situation (first image) and the expected behaviour (second picture).
Is there a way to resize our slider responsive, but keeping the following in mind:
The aspect ratio of the image cannot be altered;
We cannot crop images too much (only slightly);
There is a minimum height to keep in mind;
If it helps, all images in the slider have the same size.
You have to give a max-width:100% to your img.
Plus background-size only works when you are working with background-images.
Since you are applying max-width to your img there is no need to apply max-width to its parent #header
Last, but not least try not use min-height and height:auto at same time in the same selector.
Below is a working snippet according to the above comments:
img {
max-width: 100%;
height: auto
}
#media (min-width: 1280px) {
#header {
min-height: 500px;
}
}
#media (min-width: 1600px) {
#header {
min-height: 630px;
}
}
<div id="header">
<img src="http://placehold.it/1920x630" />
</div>
I have configured a page so that the table headers are stationary while the rest of the page scrolls. Looks great in 1920x1080, but in other resolutions it does not. This is my css;
.scroll
{
max-height: 945px;
overflow: auto;
}
Is there a way to configure it so that the scroll bars automatically adjust to the height of the screen based on its resolution, or do I need to set it up as a fixed height?
You should be able to use a media query for that
#media screen and (max-height:945px) {
.scroll
{
max-height: 700px;
overflow: auto;
}
}