How can I make a css style detect it in a single format (mobile or pc)

0

I need to make a CSS style active only when I open the web from a desktop PC, either on tablets or mobile I can disable it.

I know it's an attack on responsivity, create a carousel, but I wanted to start with the web in the middle of the image. What gives an effect type the one of the cover of facebook

for this place in the carousel div:

<div id="carousel-example-generic" class="carousel slide altura-carousel" data-ride="carousel">


.altura-carousel{
    height: 300px;
}

but when I get smaller devices the height remains fixed and it leaves me a gray void So I want to know if I can set parameters when that style is activated

    
asked by Cidius 24.09.2016 в 14:12
source

2 answers

2

That's what media queries in css are for, to give styles depending on the resolution:

Here is an example:

@media (min-width: 768px) {
    h1 {
        font-size: 1.5em;
    }

    h2 {
        font-size: 1.2em;
    }
}

This example if the resolution of the visitor is greater than 768px the styles will be applied to the elements that you have indicated, in this case to h1 and a2.

In this way it is very easy to put different styles to the different resolutions of the visitors.

Now you only have to modify the classes you want within the media queries that you personalize

    
answered by 24.09.2016 / 15:22
source
4

Complementing the above, you can be more specific by specifying the orientation of the device, the maximum width it can have and the minimum. Here below are some examples.

- edit

@media all and (max-width: 360px) and (orientation: portrait) { 
    /* Tú estilo aquí */
}
@media all and (min-width: 361) and (orientation: landscape) { 
    /* Tú estilo aquí */ 
}
    
answered by 24.09.2016 в 17:42