I'm trying to understand CSS a bit and I'm currently somewhat stuck with #media rules and screen sizes. I want to change the background color depending on the current resolution. Here's the CSS:
section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-right: 10px;
background-color: brown;
}
#media screen and (max-width: 9999px) {
section {
background-color: red;
}
}
#media screen and (max-width: 1000px) {
section {
background-color: blue;
}
}
#media screen and (max-width: 500px) {
section {
background-color: yellow;
}
}
Just using a simple
<section>
bla
</section>
HTML code. Here's a w3schools tryit link since you can easily resize your viewport.
https://www.w3schools.com/code/tryit.asp?filename=FDW9EOFLTCX6
However, it does not work like I'd want it to.
For the yellow background (< 500px), it stays yellow until 500 included.
For the blue background (>= 500px && < 1000px), it stays blue until 1000 included.
For both cases, the color jump occurs at 501 and 1001 respectively. If I adjust the width values to 499 and 999 respectively, however, the color jumps suddenly happen at 499 and 999 instead.
It seems I cannot understand how to get the change to happen at exactly 500 and 1000. Or is it just a problem with the editor I posted?
It depends where you want the 'jump' to happen, but assuming you want the background to be yellow at 500px and blue between 501px and 999px, you can simply use the following:
#media screen and (min-width: 501px) and (max-width: 999px) {
section {
background-color: blue;
}
}
#media screen and (max-width: 500px) {
section {
background-color: yellow;
}
}
Don't forget that you can also use min-width as well as max-width, and that media queries will always take priority sequentially from top to bottom.
Hope this helps!
i thing the perfect responsive media query tag is this one
#media (min-width:1600px) and (max-width:3600px) {
.model-student-gallery .modal-lg {
width: 60%;
}
}
you want to wright to css according to media screen .
Try it it's helpful for creating responsive layout .
Related
I've tried setting width at max-width: 786px to container but it doesn't seem to affect it properly, but affects other elements as well.
#media (max-width : 768px) {
.container {
width: 768px;
padding-top: 200px;
}
}
How can I move the text container "David Kim ... people over profits" down # 967 width (so it doesn't cover his face) & not allow the email join box disappear # 767 width?
The site is at: https://davidkim.socialarts.com
Thanks so much in advance!
You already have this happening at 767px so why not alter that code to be 967?
#media (max-width: 967px) {
.tt-content-wrapper .tt-intro-sub {
padding-top: 433px;
}
}
This is the code that is removing the join now box:
#media (max-width: 767px) {
.banner-joinnow-form {
display: none;
}
}
Simply update this to width that you want it to disappear at.
I am trying to make a responsive webpage with my site here: https://chunzg.github.io/about.html
I have made a flex container for the photo and text.
Have used the media query below to first test on my laptop screen :
#media only screen
and (min-device-width: 300px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2) {
.sidebar {
width: 100%;
}
.photo {
width: 100%;
}
.text {
width: 100%;
}
}
but it doesn't work - nothing changes. I would like the sidebar, photo and text to be stacked vertically on top of one another if I am looking at it on a narrow screen.
I know I must be doing something wrong but just don't have enough experience to know what needs to change
Thanks
Hey I am giving a reference:https://www.w3schools.com/css/css3_mediaqueries_ex.asp
I couldnt understand the exact question but I think it should be like this:
/* On screens that are 992px wide or less, go from four columns to two columns */
#media screen and (max-width: 600px) {
.sidebar {
width: 100%;
}
.photo {
width: 100%;
}
.text {
width: 100%;
}
}
In my code I scripts lets webpage to change width by 100 if the screen size is less than 600 or equal to 600.(Maybe it can be usefull for your ipad or small devices screen)
Also why did you used min and max at the same time?
Note that I am not professional but I have had some experiences with css so that my answer maybe could not be the solution. But lets try this.
Been fussing around with grid for a while trying to figure out if this is possible without much luck.
I'm working on a website in which everything is arranged within a strict background grid of 12px square, which is also used as the base font size, so 1rem = 12px. In order to maintain the vertical rhythm, I need to make sure that all elements, including padding and margin and borders, end up with widths and heights at some multiple of that base grid size.
For text content like paragraphs and headings this isn't super difficult, as long as the line heights are all set to 1rem, 2rem, 3rem, etc. For images, however, I struggle to see how to force it to a multiple of the grid size without a bit of javascript.
Not that I can't use javascript, but I don't really want to.
So say I have an <img> with an original size of 100px by 100px. Is it possible to restrict it to 96px (8rem) or 108px (9rem), or maybe place it within a larger container and enforce the restrictions on the container instead? grid-auto-rows: 1rem doesn't seem to do the job (since the element only ever creates 1 implicit track), and neither does grid-template-rows: repeat(auto-fill, 1rem).
You could use css #media queries to give your images specific sizes at specific breakpoints.
#media only screen and (max-width: 640px) {
img {
height: 6rem;
}
}
#media only screen and (min-width: 641px) and (max-width: 800px) {
img {
height: 7rem;
}
}
#media only screen and (min-width: 801px) and (max-width: 960px) {
img {
height: 8rem;
}
}
#media only screen and (min-width: 961px) and (max-width: 1024px) {
img {
height: 9rem;
}
}
#media only screen and (min-width: 1025px) and (max-width: 1200px) {
img {
height: 10rem;
}
}
#media only screen and (min-width: 1201px) {
img {
height: 11rem;
}
}
I was working on a project and I encountered a problem.
I'll show you with the following demonstration example:
This is css code:
*, *::after, *::before {
box-sizing: border-box;
margin: 0;
border: 0;
}
#media only screen and (max-width: 600px) {
div {
background: blue;
}
}
#media only screen and (min-width: 601px) and (max-width: 1000px) {
div {
background: green;
}
}
#media only screen and (min-width: 1001px) {
div {
background: red;
}
}
So my div should be:
blue from 0px to 600px
green from 601px to 1000px
red from 1001px to ...
Instead it is:
blue from 0px to 600px
white at 601px
green from 602px to 1000px
white at 1001px
red from 1002px to ...
Why? It seems that (min-width:) is not inclusive.
So I tried:
*, *::after, *::before {
box-sizing: border-box;
margin: 0;
border: 0;
}
#media only screen and (max-width: 600px) {
div {
background: blue;
}
}
#media only screen and (min-width: 600px) and (max-width: 1000px) {
div {
background: green;
}
}
#media only screen and (min-width: 1000px) {
div {
background: red;
}
}
So my div should be:
blue from 0px to 600px
green from 601px to 1000px
red from 1001px to ...
Instead it is:
blue from 0px to 599px
green from 600px to 999px
red from 1000px to ...
Why? Now seems that (min-width:) is inclusive.
But If I try:
*, *::after, *::before {
box-sizing: border-box;
margin: 0;
border: 0;
}
#media only screen and (max-width: 601px) {
div {
background: blue;
}
}
#media only screen and (min-width: 601px) and (max-width: 1001px) {
div {
background: green;
}
}
#media only screen and (min-width: 1001px) {
div {
background: red;
}
}
Seems that (min-width:) is not inclusive again:
blue from 0px to 601px
green from 602px to 1001px
red from 1002px to ...
I am confused.
Both 'min' and 'max' prefixes are inclusive. Quoting the spec:
Most media features accept optional ‘min-’ or ‘max-’ prefixes to
express "greater or equal to" and "smaller or equal to" constraints.
The problem is a bit different: while you expect pixel dimensions to be integer, it's not always like that. This article describes the problem in quite a bit of detail:
You might think "Half a pixel? That's not possible", and for the most
part it's not. But if you use Ctrl+ or Ctrl- to change your browser
zoom then you'll often end up with non-integer viewport sizes, and
that non-integer viewport size can be used by the browser when working
out which media queries to apply to the page [...]
On Windows 7 and higher, there is a zoom level used by the operating
system for things like text and icons, and on larger screens (1920px
wide for example) this will automatically be set to a 125% zoom. But IE, Edge and Firefox all inherit this 125% value in their own way and end up applying it as browser zoom, creating the conditions for this bug to appear by default on most Windows machines with decent resolution screens in the past five or
six years.
Check the discussion opened on the similar issue in Bootstrap. A telling quote:
Chrome does not report decimal viewport widths even when zoomed, I
assume it rounds the values when applying media queries.
Quite convenient, I suppose.
In short, I'd drop either max-width or min-width here and go with overlapping rules, letting the latter rule to be a decider.
Hi I'm fairly new to bootstrap and what I'm trying to achieve is to have a jumbotron on top of my page with different paragraph formatting to accommodate for a background image which takes lets say 30% of full width space.
I have offset my text by padding-left: 300px; and it looks fine on desktops but this rule also applies to a paragraph in mobile device mode resulting it being very skinny and tall.
Is there a way where I can set lets say 3 different paragraphs each showing under certain screen size?
Just use media queries:
#media screen and (max-width: 320px)
{
p{
padding-left: 0;
}
}
#media screen and (min-width: 321px) and (max-width:800px)
{
p{
padding-left: 100px;
}
}
#media screen and (min-width: 801px)
{
p{
padding-left: 300px;
}
}