CSS: Stop applying styles from a certain width

Question

CSS: Stop applying styles from a certain width

Navigation

#1 by (5 votes)
#2 by (3 votes)
#3 by (2 votes)

1

The problem I have is that I have used a bootstrap template and modified part of the CSS.

Then I have it responsive from 1920px to 1024px, but from 992 the styles change a lot and everything is bundled, so I would like from 1024 to apply horizontal scroll:

body{min-width: 1024px;
     position:relative;}

I would like all styles from 1024px to the minimum not to apply, that only horizontal scroll will apply.

css bootstrap

asked by Lluís Puig Ferrer 21.09.2017 в 09:45

source

3 answers

Sending String data between Activities, using them on onClick () Why does it return zero value?

score 5 · Answer 1

5

Use the media queries:

@media max-width: 1023px{
  //Aplicar estilos que quieras       
  body {
    //Estilos
  }
}

So for screens smaller than 1024px show the css you want.

answered by 21.09.2017 в 10:04

score 3 · Answer 2

Reusing @Camilo's response.

You have to use the @media provided by css.

With them you can:

Define styles for different screen sizes (example at the end of this response).
- Use @ min-width and @ max-width to define the size ranges {It is advisable that you get oriented with real screen sizes and their possibilities.
Define styles for different visualizations! It is clear that if you prepare a page to print it should not look the same as in the browser.
- You can place print or screen for example.

Check out this section of w3schools

I leave you a practical example with changing sizes and colors.

body{
  width:100%;
  height:100%;
}

/*mobile-portrait: min:320px - max:479px;*/

@media (min-width:320px) and (max-width:479px) {
  div{
    width:15%;
    height:15%; 
    overflow: scroll;
    background-color:red;
  }
}

/*mobile-landscape: min:480px - max:599px;*/

@media (min-width:480px) and (max-width:599px) {
  div{
    width:30%;
    height:30%; 
    overflow: scroll;
    background-color:green;
  }
}

/*small-tablet-portrait: min:600px - max:799px;*/

@media (min-width:600px) and (max-width:799px) {
  div{
    width:45%;
    height:45%; 
    overflow: scroll;
    background-color:pink;
  }
}

/*small-tablet-landscape: min:800px - max:767px;*/

@media (min-width:800px) and (max-width:767px) {
  div{
    width:60%;
    height:60%; 
    overflow: scroll;
    background-color:blue;
  }
}

/*tablet-portrait: min:768px - max:1023px;*/

@media (min-width:768px) and (max-width:1023px) {
  div{
    width:75%;
    height:75%; 
    overflow: scroll;
    background-color:yellow;
  }
}

/*tablet-landscape: min:1024px;*/

@media (min-width:1024px) {
  div{
    width:100%;
    height:100%; 
    overflow: scroll;
    background-color:orange;
  }
}

<body>
  <div>
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Integer vulputate sem a nibh rutrum consequat. Maecenas lorem. Pellentesque pretium lectus id turpis. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Fusce wisi. Phasellus faucibus molestie nisl. Fusce eget urna. Curabitur vitae diam non enim vestibulum interdum. Nulla quis diam. Ut tempus purus at lorem.</p>
    <p>Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante orci, molestie vitae, vehicula venenatis, tincidunt ac, pede. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Etiam commodo dui eget wisi. Donec iaculis gravida nulla. Donec quis nibh at felis congue commodo. Etiam bibendum elit eget erat.</p>
  </div>
</body>

score 2 · Answer 3

You must use the media queries that provides css

@media (max-width: 1024px) and (min-width: 992px){
    /* Acá todos tus selectores con sus respectivas propiedades y valores */
}

Definition of concepts:

max-width = All resolutions smaller than the specified size

min-width = All resolutions greater than the specified size

I hope you serve, greetings!