How to change css according to the size of the display

Question

Im so new in CSS and trying to fix the following code.. I want a simple thing where the screen size is smaller than 400 change the image size.. it should work but it doesn't.. I tried to make

* {
    box-sizing: border-box;
} 

body, html {
    background: #fff;
    height: 100%;
    margin: 10px;
}

.left__img2 {
    position: absolute;
    float: left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border-radius: 20px;
    width: 600px;
    height: 400px; 
} 


@media screen and (max-width: 500px) {
.left__img2 {
    width: 10px;
} 
}

Possible duplicate of [Media Queries: How to target desktop, tablet and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) — Kamalesh M. Talaviya, Jan 18 '19 at 04:51
your code is working fine : https://jsfiddle.net/jqwoa6zu/ ... please check if you have something else involved, or the question should be close as "cannot reproduce" — Temani Afif, Jan 18 '19 at 08:54

Maarti · Answer 1 · 2019-01-18T14:17:57.640

-1

Your code works well in the following example (resize your window), maybe it comes from a side effect of the rest of your code, can you show us the rest of your code?

.left__img2 {
    position: absolute;
    float: left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border-radius: 20px;
    width: 600px;
    height: 400px; 
    background-color: red;
} 


@media screen and (max-width: 500px) {
.left__img2 {
    width: 10px;
    background-color: yellow;
}

<div class="left__img2"><div>

edited Jan 18 '19 at 14:17

answered Jan 18 '19 at 02:41

Maarti

3,600
4
17
34

*Your code works well* isn't a valid answer. Either add a comment or vote to close as "typo or cannot reproduce" – Temani Afif Jan 18 '19 at 08:55

Jonny · Accepted Answer · 2019-01-18T14:10:07.160

-1

Media queries at the top of the CSS need !important to over rule the media query. Media queries at the bottom do not need !important. I placed the query at the top so I used !important to over rule any other style after.

@media screen and (max-width: 500px) {
.left__img2 {
width: 10px !important;
} 
}

* {
box-sizing: border-box;
} 

body, html {
background: #fff;
height: 100%;
margin: 10px;
}

.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px; 
}

edited Jan 18 '19 at 14:10

answered Jan 18 '19 at 03:11

Jonny

1,319
1
14
26

both what you said are wrong ... too bad the OP was so fast to accept and use this *wrong* way. By the way his code is working fine – Temani Afif Jan 18 '19 at 08:54

score -1 · Answer 3 · answered Jan 18 '19 at 04:06

-1

I think this will work.

@media screen and (max-width: 500px) {
.left__img2 {
    max-width: 10px;
} 
}

answered Jan 18 '19 at 04:06

tdrsam

527
1
8
28

Worked! Thank you!! – Ak2019 Jan 18 '19 at 04:16

How to change css according to the size of the display

3 Answers3