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;
}
}
Related
I'm pretty new to coding so it may be that I do not understand what I'm doing. I've tried every bit of code advice given on this website that seems to pertain to my situation and I cannot get results!
My carousel sliders are outside my images and I need them in/on my images. I want them the size they currently are so viewers do not have to scroll up and down to view my entire picture. You can view my predicament at http://mirandarodgers.com/lenoxhouse.html
Like I said, I've tried everything under the sun. Currently my code just says:
.carousel .item{
min-height: 525px; /* Prevent carousel from being distorted if for some
reason image doesn't load */
}
.carousel .item img{
margin: 0 auto; /* Align slide image horizontally center */
position: absolute;
min-width: 100%;
height: 525px;
max-width: none;
}
I'm ashamed of how much of a hack this is, but it might help you out:
.right {
right: calc(100vw / 2 - 374px);
}
.left {
left: calc(100vw / 2 - 374px);
}
So to solve this I gave both the images and the .carousel a fixed max-height (I used 400px).
.carousel .item img,
.carousel {
max-height: 400px;
}
You vertical images will scale to a height of this value.
You can play around with different max-height values and even have the height depend upon the screen size using CSS Media Queries.
Whats happening is that the slider images are aligned to the sides of the actual carousel itself, if you want to restrict the size of the carousel set a max-width on it. This is because the size of your images cannot fit the width/height of the carousel and there isn't any code for resizing the img or the carousel. If you work on the resizing of your elements it should solve the problems you are having and try to find better images that are roughly the same dimensions or the carousel will expand/shrink unexpectedly if it isn't handled correctly.
I added the following to .carousel and it looked much better on the site.
.carousel {
max-width: 70%;
position: relative;
margin: auto;
}
Also i would add an img tag with
img {
max-width:100%
}
And this
.carousel .item {
max-height: 525px;
}
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'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.
I have these CSS rules for my header
margin: 0 auto;
max-width: 1250px;
Having those (in comparison to not having them) causes the vertical scroll bar to appear when the browser window is < 1250px.
What CSS should I have to let users with big screens see the header att 1250px width, and the others with smaller width see the responsive header at their respective browser window size - without having the vertical scrollbar to appear?
Something like this should work:
#header {
width: 100%;
}
#media screen and (max-width: 1250px) {
#header {
width: 1250px;
}
}