I'm using CSS #media to adjust my website depending on the screen resolution
Whether i switch to a resolution with the height of 768 or 720 it will still act as if i'm my screen resolution has a height of 720px
.group-container{
min-width:1210px;
max-width:70000px;
width:1210px;
margin-left:2.5%;
height:87%;
margin-top:1%;
}
#media only screen and (max-height: 768px) {
.group-container{
margin-top:150px;
}
}
#media only screen and (max-height: 720px) {
.group-container{
margin-top:3px;
height:90%;
}
}
For the first media query you should use also a min-height set to 720px and max-height set to 768px
And if you try to use (max-width: ...px) instead?
#media only screen and (max-width: 720px) {
.group-container{
margin-top:3px;
height:90%;
}
}
This way you won't rely on your height, but the width of the window it's being displayed on. example:
your resolution is 900x1600.
Resizing the height of the window wouldn't have much effect. If you where to use max-width, that way if you resize to 600x1200 for example, it would have more effect.
EDIT: The reason why I think you should use is, the height doesn't really matter when it comes to responsive design. The height might change but it will always be scrollable, so using the height will have little to no effect.
The width of the device DOES matter, the width is important when it comes to responsive design (assuming your website isn't horizontally scrollable). It would be better to create query's based on the width of the display, then to rely on height for that matter.
Related
By the way, I would like my cards in the most popular ones to stop decreasing in size from a resolution of 400px I tried to add a min-width on the card container but with all that the result is nothing.
#media screen and (max-width: 400px) {
.aside-container {
min-width: 400px;
}
}
I don't want my card to decrease in size from 400px
You are using a media query that will only work when your screen is less than 400px wide. You might want to remove that, or maybe you meant min-width?
Notice, that actual rule that is applied to your .aside-container is (max-width: 786px).
I believe that rule #media screen and (max-width: 400px) { is placed before (max-width: 786px) rule in your queries.css. Try to move code down to end of file so needed rule will be last applied to element.
I have no time to verify it right now but I'll get to computer later so I'll check it.
Please look at this website http://www.grupottc.com/ scroll down until the section that says "VALOR AÑADIDO" when you resize the whindow you'll see that the blank parts from the sides are shrinking with the window, how to make that effect, thak you.
Look at the media queries. A website must implement some media queries to match specific max-width or min-width in order to fit the screen size. You may search for some of these queries in the website such as those below, which are only applied as long as the screen width is not more than 767px.
#media (max-width: 767px)
.elementor-column {
width: 100%;
}
#media (max-width: 767px)
.elementor-96 .elementor-element.elementor-element-8g5lbx9 .elementor-icon-box-icon {
margin-bottom: 16px;
}
In general, I want my body div to be 60% width of the window size. But there are some exceptions.
On a large monitor, this gets too big, so I have set a max-width of 800px, like so:
#lbp-text-body {margin-top: 100px; width: 60%; max-width: 800px; text-align: justify}
This works pretty good, the text adjusts within a certain range, but at certain max threshold holds it shape.
Now I want to do something similar for small window sizes.
I've added 'min-width: 300px;' and this seems generally seems to override the width 60%, However, if the screen size is less than 300px, the user will have to scroll horizontally to see part of the text.
I would prefer for the actual width size to change 90% or 100% after the viewer size hits the 300px threshold.
Any ideas on how I could do this?
You can use a media query to achieve this: JS Fiddle Example
#media only screen and (max-width: 300px) {
#lbp-text-body {
// Whatever Styles you want to have at 300px or less
}
}
You can also use media-queries to have specific styles if the window is greater than a specific width using min-width.
#media only screen and (min-width: 800px) {
#lbp-text-body {
// Whatever Styles you want to have at 800px or more
}
}
As a side note, you will want to be sure you have the correct viewport meta tag for media queries to work properly on each device: Viewport Meta Tag
I woul use a media query to determine the size of the screen, and change the % width based on that:
#media (max-width: 300px) {
width: 90%;
}
The browser will read through your existing CSS and apply the styles you described in your question. The media query tells the browser to apply this new width to any screens that fit the criteria - a screen that is at most 300px wide. If you have other breakpoints (in this case, widths) that you would like to target, you can definitely use more than one media query at a time.
See: detect browser size and apply css for every resolution
also: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
our site is not responsive, and one of the requirement is to render the images on mobile devices so they fit the screen and we are running into a problem, becasue different sized images are uploaded to a web page
And this is what our CSS code looks like
#media only screen and (min-width : 320px) and (max-width: 640px) {
.article-body div img:not(.logoOP){
width: 320px !important;
height: 214px !important;
}
}
So this works fine for 600 X 400 images, because the aspect ratio is the same. However, when we have a different size images, say 400X578, the above CSS code won't work and the images look really stretched and distorted.
What is a good solution here, since I am no front end Dev.
Any help is appreciated.
Thanks
Modify your CSS to the following:
#media only screen and (min-width : 320px) and (max-width: 640px) {
.article-body div img:not(.logoOP){
width: 320px !important;
height: auto;
}
}
This will allow you to specify the width of the image and the height will automatically adjust itself proportional to the width.
Is there a pure css way to make images fit in a row across a container with variable size?
I have a row of images I want to fit.
There are 2 ways I know of to fit images in a row. If I set the image width as a percent ie, width: 20%, then if the screen is wide then the images becomes very large or if the display is small the images becomes very small. If I set the images as absolute width ie, width: 100px;, then the images are shown with the size I want it to. But the container isn't totally filled and there's unseemly left over space at the right.
Right now I'm using javascript to adjust the percentage width based on the user screen width.
Is there a pure css method of controlling the way that images are shown, such that if the screen is wide more images fit into a row rather than blowing them up but still ensuring that all the images fit snuggly into the container with no left over space.
you can add float property to each of your image container (float: left). see http://css.maxdesign.com.au/floatutorial/tutorial0407.htm
I'm using media queries like this:
#media all and (max-width: 900px) and (min-width: 600px)
img
width 50%
#media all and (max-width: 1050px) and (min-width: 900px)
img
width 33.3333%
#media all and (max-width: 1280px) and (min-width: 1050px)
img
width 25%
#media all and (max-width: 1910px) and (min-width: 1600px)
img
width 16.6667%
I think there's a better answer.