The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS responsive issues

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #206834

    Working on a website

    I have made it responsive for mobile and tablets (protrait and landscape). The home page sliders shows up correctly.
    But on my clients 19inch monitor the slider images get cut on both the sides and only the center part of the images show up.
    I assume my client had more of a squarish monitorthan a rectangle one. Any sugestions on how to show the full image on the 19 inch monitor. How do i write media queries for that.


    I suppose the simplest solution would just be to make sure that the content on the slides fit within a more squarish area. If you take a look at slides 3 and 5, you’ll notice that their content is a lot wider than the other slides.

    You could also try removing the text from the slide images, and then make it actual text that overlays the slide image. Then you position that text such that it stays on the screen.


    How about making them background-images and using cover?
    Otherwise, here’s a bit of script to mimic that :

    .tall {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
    var gate = $(window), range, term;
    gate.on('load resize', function() {
    range = gate.width();
    term = gate.height();
    function coverSpace() {
        var tableau = $('#yourimage'),
        proportion = range/term,
        ratio = 1280/720; // image's original dimensions
        if (proportion >= ratio) tableau.css({width: '100%', height: range/ratio}).removeAttr('class');
        else tableau.css({width: term*ratio, height: term}).attr('class', 'tall');
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.