responsive issues

[chauhanheena]

Working on a website
http://www.vnc-horizon.com/wordpress

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.

[bearhead]

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.

[Shikkediel]

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();
coverSpace();
});

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');
}

[Author]

Posts