Slider images not responsive 4.2


Author Message
Dave B

Posted: 10/27/2013
Quote message 

Anyone else able to confirm this?

None of my sliders created in 4.2 are really responsive. The photos all crop when viewed below the full size. In other words when the slide show window size drops below the original size the images don't resize with the frame they get cropped.
 
Arkymedes

Posted: 10/27/2013
Quote message 

Hey,

I can confirm the bug.

The sliders crop instead of resizing. It's like the container is responsive, but not the actual content.

Cheers,
Arky
 
Nick

Posted: 10/27/2013
Quote message 

Not only that, but sometimes there is a big gap - empty space between the header in the responsive views, and the page content.

There are still issues with the responsive headers. The way I fix this, is by designing my template with Artisteer with the Artisteer slideshow, and then after exporting the template, I manually replace the Artisteer slider with a third party one. All the slider classes get deleted too. Only then, I have perfectly working templates.

It's been over a year since Artisteer introduced responsive design. After a year, and many version releases, there are still problems, especially with the headers. Things got better, like the inclusion of logos, etc..., but I doubt they will have the expertise to fix all the problems. These are things we are reporting for over a year, and they are not fixed. The only thing left for us is to gut out their code, and fix it ourselves.

Those who need proof, I can demonstrate the perfect working templates with external third party sliders.
 
Nemo

Posted: 10/27/2013
Quote message 

Hi nick, I would love to see your perfect demo, I Also have trouble with the slider and responsive design.

Thanks :-P
 
TXASAN

Posted: 10/28/2013
Quote message 

I have the same troube with that and i still can´t fix the trouble with the logo in the header. ¿Will the new version be the answer?
 
Tanya
Artisteer Team

Posted: 10/29/2013
Quote message 

Hi all!

Indeed there are some issues with the slider not resizing properly in the responsive mode. We are working to find a solution, but I can not assure you that it will be available soon.

Meanwhile you can try to add the code like this:

.responsive .art-slide-item
{
background-size:contain!important;
}

That should help a bit.

Best regards,
Tanya
 
Nick

Posted: 10/29/2013
Quote message 

Hi Nemo,

Sorry for the delay... Here are 4 templates that I completely replaced the Artisteer sliders with third party sliders. Besides fixing the issues, I can now edit the slides from the backsite (add/edit/delete), and don't need Artisteer for editing.

http://www.youtube.com/watch?v=i0c_-5ETRNA&feature=youtu.be
 
Robert Lowly

Posted: 10/29/2013
Quote message 

Hi nick, that's a great video!! I saw you used some sort of e-commerce element, and that you had a cart area and such.

How did you succeed in integrating it in artisteer? is it woocommerce or something else?

Great showcase though :)
Thanks and have a great day!
 
Kyle

Posted: 11/30/2013
Quote message 

Hi Nick,

Would you mind sharing what extension you used for the slider which was responsive? It looks good :)

And are you completely bypassing the Slider feature in Artisteer OR do you have to use it and then hack the site to disable it?

Thanks, Kyle.
 
Nick

Posted: 11/30/2013
Quote message 

It is called "responsive slider" - catchy huh? http://wordpress.org/plugins/responsive-slider/

In the video I am using 2 sliders actually. The second one is called Meta Slider, which I really like but I can't put them in themes that are for distribution, since you can create multiple sliders with it, hence the shortcode will vary each time...

http://wordpress.org/plugins/ml-slider/

I prefer the Meta Slider for my own and customer projects, and I use the Responsive Slider for my themes that are prepared for distribution.


 
Nick

Posted: 11/30/2013
Quote message 

Quote: "And are you completely bypassing the Slider feature in Artisteer OR do you have to use it and then hack the site to disable it? "

The second part - use it and then hack the site to disable it. For the simple reason that, Artisteer shows me where to insert the code (substitute would be more accurate).

This is relatively easy and fast process compared to the other things we have to do to make the themes more "Premium". It takes 30 seconds to get this job done - really!
 
Charl

Posted: 2/5/2014
Quote message 

Thanks Nick. Works perfectly now.
 
Rick

Posted: 2/18/2014
Quote message 

Hi, Nick,

I am also struggling with the slider not appearing correctly in my WordPress site. See http://www.julielyonquartet.com. I created an Artisteer slider with six photos. Looks great on a regular monitor but photos are distorted and stretched in the horizontal view of iPhone and iPad.

At your suggestion, I installed Meta Slider plugin and unsure where to go from here. I was going to edit the header.php file you mention above. That file, located in my current theme folder, did not have the div "art-pageslider" code.

Meta Slider says to copy and paste this code into the template file.

<?php
echo do_shortcode("[metaslider id=313]");
?>

Any ideas?

Thanks!
 
Henry

Posted: 2/18/2014
Quote message 

Artisteer images and sliders responsiveness is working perfectly well. All we have to do is to add this extra css:

/*resize images*/
.art-article img, img.art-article, .art-lightbox, .art-collage, .art-slider, .art-block img, .art-footer-text img, .art-header-text img
{
margin-left: 0px;
margin-right: 0px;
max-width: 100%;
height: auto !important;
}

place the first image in a container with some padding left and right.
verify that the first image has no horizontal margin
height:auto is important otherwise the pictures are adjusted horizontally but not vertically, and they become distorted.
You can see an example here: www.corfubuddhahall.info/about/the-venue/overview.html
:-)
 
Dave B

Posted: 5/10/2014
Quote message 

For us not using WP this is still a problem. They have given me css that works on one site but not another. Same version of Artisteer.

Henry, you maybe don't notice but your images are all cropped on smaller screens.

They have given me some reasons based on the slides are background images and don't play by normal rules.

I have zero issues with my x10 plus Joomla slideshows that are responsive, not made with Artisteer. None of them crop or mess up the images in there.

Why is this not getting fixed. This is the only dynamic thing in the program you think it would be working.

Argh.
 
Dave B

Posted: 5/28/2014
Quote message 

I am not sure why this is such a low priority for the Artisteer team. None of their custom css is working for me anymore.
 
HelgaD
Artisteer Team

Posted: 6/24/2014
Quote message 

Quote :
Henry - sorry I am a very green coder - where to place this extra CSS?


All custom CSS can be added to the Artisteer Export Options >> CSS Options >> Additional CSS or directly to the end of the exported template.css (style.css) fie.
 
Arif Razzaq

Posted: 11/12/2014
Quote message 

i was create theme in artisteer but when load it on wordpress then my slider is not showing in my site please help me

 
Eileen
Artisteer Team

Posted: 11/12/2014
Quote message 

Hi Arif,
I would recommend that you contact Artisteer support directly at http://www.artisteer.com/?p=support and provide the .artx file and link to live page that demonstrates the issue.
 
Drew Fenwick

Posted: 5/11/2015
Quote message 




Response View Troubles with Slideshow


Quote Henry:

Artisteer images and sliders responsiveness is working perfectly well. All we have to do is to add this extra css:

/*resize images*/
.art-article img, img.art-article, .art-lightbox, .art-collage, .art-slider, .art-block img, .art-footer-text img, .art-header-text img
{
margin-left: 0px;
margin-right: 0px;
max-width: 100%;
height: auto !important;
}

place the first image in a container with some padding left and right.
verify that the first image has no horizontal margin
height:auto is important otherwise the pictures are adjusted horizontally but not vertically, and they become distorted.
You can see an example here: www.corfubuddhahall.info/about/the-venue/overview.html
:-)


I am not a coder just a WYSIWYG guy - web publishing noob .... so getting into the guts is like asking a boy scout with a first aid merit badge to perform micro - neural -brain surgery. The importance of keeping the patient alive is still however vital !!!!

Well the example is long gone - so that doesn't help bought Artisteer so would not have to learn CSS in a two day learning curve - grrrrr.....

I tried to add the above suggestion but ended up with a blank header and no slide show

My CSS Options window had this in it. Should I remove this?

.art-blockheader .t, .art-vmenublockheader .t {white-space: nowrap;}

and then ad the suggested code ?


Secondly I don't understand " place the first image in a container with some padding left and right." In noob English what does that mean.. I read it and almost went looking for a Tupperware thing. Should I resize the image to header or resize the header to image?
 
Sara

Posted: 12/28/2015
Quote message 

Seriously, why hasn't the Artisteer Team fixed this yet?

I bought Artisteer so that I wouldn't have to manually code these things.

This is a basic and prominent problem! It needs to be a priority.
 
robin

Posted: 9/7/2017
Quote message 

It's now 2017 and it still doesn't work right. There is still white space above the header on responsive html designs also slider height won't adjust for responsive, none of the suggested code tweaks work for the responsive height of the slider :(