Change CSS on smartphone/tablet

Question

I have a div with a float: right, it works very well on a computer screen, on the other hand on phone / tablet I would like this div to go to float: left. How can I go about integrating this condition into my CSS?

Thank you for any help and explanation.

If you just getting started with responsive and want to learn, I would suggest that you look into some tutorial on how to do [responsive design](https://www.creativebloq.com/rwd/responsive-web-design-tutorials-71410085). There is a mental model that is really good to have when doing so, that is [Mobile first](https://www.invisionapp.com/inside-design/mobile-first-design/). I see a few answers doing `max-width`, don't fall for that approach (please don't). If you want to get standard media queries then I suggest that you look at these from [Tailwind](https://tailwindcss.com/docs/breakpoints) — Dejan.S, Dec 22 '20 at 08:41

score 1 · Accepted Answer · answered Dec 22 '20 at 08:26

1

You are looking for media queries

If the browser window is 600px or smaller, the background color will be lightblue:

body {
  background-color: lightgreen;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>

<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "lightgreen".</p>

</body>
</html>

You can check this link also https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

answered Dec 22 '20 at 08:26

Ahmed Ali

1,908
14
28

1

Thanks a lot, I understand ! – Onyssius Dec 22 '20 at 13:41
I've understood your answers and I thank you for that. So I had : .group-input { display: inline-block; margin-bottom: 0px; float: right; padding-left: 10px; text-align: right; } I add below : @media (max-width: 572px) { .group-input { float: left; !important } } But it's not taken ... How to force it ? – Onyssius Dec 22 '20 at 13:42
use `!important` in end of your styling to override all style to this. If your condition is correct then style will execute.https://stackoverflow.com/questions/9245353/what-does-important-mean-in-css – Ahmed Ali Dec 23 '20 at 07:14

score 0 · Answer 2 · answered Dec 22 '20 at 08:32

0

You need Media Queries :) Useful resources

answered Dec 22 '20 at 08:32

Jj_Ebeling

41
1

Thank you very much ! – Onyssius Dec 22 '20 at 13:22

Change CSS on smartphone/tablet

2 Answers2