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: https://timetakernet.info/luxehotel/ .

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 https://developer.mozilla.org/en-US/docs/Web/CSS/@media :

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
used.

###

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() {
    SyntaxHighlighter.all();
  });
 
  $window.load(function() {
    $('.flexslider').flexslider({
      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 *