@media screen queries

  • To reduce vertical height on slider i was suggested the following code:

    div#onetone-owl-slider {
    height: 1030px;
    overflow: hidden;
}
#onetone-owl-slider .owl-item .item .inner {
    top: 0px;
}

    It works on my desktop screens; but it (messes up and leaves with space after the slider) on some mobiles, my tablet, online browsers etc. I’ve been playing around with some queries but getting frustrated, as some peers say they see white space; and on my tablet i could not remove it!

    Is there a straightforward way to put queries that reach most devices?
    Cos if not, the best is to leave the slider as it is, even though it needs reducing on the vertical slide to look better.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello johnatanasoff,

    I am hoping to help you out with you question. Though I do have a question in response to your post about a white space appearing after the slideshow when on certain responsive devices.

    Are you talking about a thin almost 2px white line that appears below the slideshow?

    I do have a solution you can try as far as a media query goes that should handle most responsive devices up until the desktop sizes.

    Can try using a media query like this:
    @media all and (min-width: 320px) and (max-width: 1024px) {
    // code to style here…
    }

    That should encompass most mobile and smaller tablets. I hope this helps and please feel free to ask more questions if this is not what you were looking for or in need of another solution.

    Thanks,
    Chris

    Thread Starter johnatanasoff

    (@johnatanasoff)

    @chris3dmaniac

    Hi Chris,

    Thanks for your help. Really appreciate it!

    The 2px line below the slideshow appears when i reduce the screen to a certain size. Don’t know why it’s doing it, but its no biggie anyway!

    What i am talking about is a huge white space that appears below the slideshow, when i use this code to reduce vertical size on 22/24 inch screens as the ones i use home.

    
div#onetone-owl-slider {
    height: 1030px;
    overflow: hidden;
}
#onetone-owl-slider .owl-item .item .inner {
    top: 0px;
}

    You don’t see it as i commented the code! I would like to reduce the vertical size on big screens, but not affect other devices; or if so, to fix other devices!
    I don’t even know if this css code is the right way to do it…

    As for you media query its a good way to reach most devices. What i don’t know is what css to use to fix all other devices once i uncomment the code.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘@media screen queries’ is closed to new replies.