html – How to fix-up images on a flexslider to be responsive?-ThrowExceptions

Exception or error:

So I have an HTML template I got off the internet. I have edited it and made a website in the way I want it to be, however I am facing problem with FlexSlider.

On a mobile device, the images (“slides”) show up in about half their real size. If I switch to the desktop version, the slider image loads fine.

On a computer, it looks okay.

Is there any real way to make the image resize properly on a mobile device?

The site is: .

My apologies if its a duplicate question, but I was not able to find a working solution.

How to solve:

I think what you are looking for is the @media css rule. Here is the definition from :

The @media CSS at-rule can be used to apply part of a style sheet
based on the result of one or more media queries. With it, you specify
a media query and a block of CSS to apply to the document if and only
if the media query matches the device on which the content is being


Please use this code to responsive your flexslider

(function() {
  // store the slider in a local variable
  var $window = $(window),
      flexslider = { vars:{} };
  // tiny helper function to add breakpoints
  function getGridSize() {
    return (window.innerWidth < 600) ? 2 :
           (window.innerWidth < 900) ? 3 : 4;
  $(function() {
  $window.load(function() {
      animation: "slide",
      animationLoop: false,
      itemWidth: 210,
      itemMargin: 5,
      minItems: getGridSize(), // use function to pull in initial value
      maxItems: getGridSize() // use function to pull in initial value
  // check grid size on resize event
  $window.resize(function() {
    var gridSize = getGridSize();
    flexslider.vars.minItems = gridSize;
    flexslider.vars.maxItems = gridSize;

otherwise you can visit this site click here

Leave a Reply

Your email address will not be published. Required fields are marked *