Jump to content

Archived

This topic is now archived and is closed to further replies.

norbert

Islider height

Recommended Posts

norbert

i have a problem that my pictures are cut off (the bottom part is missing) when I use Islider in the desktop size. When i decrease the width of my browser to mobile device size, the complete pictures is shown again. 

How can it modified so I can always see the complete picture?

Share this post


Link to post
Share on other sites
Danny

Hi,

Can you provide a link to the site in question please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny

The slider has a max height of 500px, your image exceeds that and therefore, that is why the image looks how it does. You can override this by adding the following:

.section-islider .islider .slides>li {
  max-height: 100%;
}

In my opinion, I would reduce your image size, there shouldn't be a need to have an image that has a height of over 700px in a slider, as it will likely be taking over much of your visitors screen.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • dario
      By dario
      For some reason I am unable to target an iSlider link's text.
      Chrome inspector shows this:
      .section-islider .content.element-dark h2, .section-islider .content.element-dark p, .section-islider .content.element-dark a { color: #333; } But I cannot seem to change the link's color, even when I specify the particular instance of the iSlider section.
      Caching is off, Cloudflare is in dev mode, server Cache is clear, viewing in Chrome incognito mode, etc.
      What am I missing?
    • Toolshed
      By Toolshed+
      >>@Toolshed Please dont comment on year old threads, unless it has something to do with the original post authors problem, your last support request to the desk was +10 months ago, unless you are using another account?
      >>Your site, the slide seems to work exactly as it should.
      >>If you still have an issue please start a new topic.
      Hello Simon - I did actually email you directly about this on Nov 22 from my email dhuey@toolshed.biz, got no response from you. So I looked for a thread directly related (iSlider not sliding) and found the other one. Apologies, but it seemed the right way to proceed.
      To the current point: I'm not seeing the slider "working exactly as it should". It does not auto-advance (and it used to) on the most recent Safari or Chrome browsers on Mac OS. Are you using the same browser and OS that I am? The opening image stays on the slider and does not change unless I manually advance it.
      My website URL is: http://www.toolshed.biz
    • brady
      By brady+
      can't upload images to the islider images are 2000 x 800 jpg. smaller than 2mbs. what else to i have to check?

    • margie
      By margie
      Good Morning...or good afternoon:-)   I am using iBlogPro6, version 1.2 and WP, version 4.  I have changed the placement of my left and right arrows on my iSlider, thanks to your great response from before.  My css is below.  It looks great, except when I change the screen size.  The arrows then move to the bottom of the picture instead of staying centered vertically.  Is there a way to modify the css below so the arrows will remain centered even as the screen size changes?  Thanks so much for your help and have a wonderful weekend.   #site .flex-prev {   left: 3%;   top: -5%; } #site .flex-next {   right: 3%;   top: -5%; }  
    • margie
      By margie
      Hi-
       
      I am using the iSlider to display pictures on each page.  I have adjusted my images to a 2000X600 px dimension (I know recommended is 2000X800px but I wanted to make more of the image visible).  I would just like to adjust the arrows to be more centered now.  I am thinking I need to add custom CSS to:
       
      .section-islider .flex-direction-nav a { }
       
      Is this the correct class to manipulate and what would I change the position to?  The current attribute is position: absolute;
       
      If it is not the correct class to manipulate, what would it be and what would the CSS need to be?
       
       
      Thanks so much for any help.
       
×