Hi Nikko,

it helps, works great – thank you very much.

In addition, please let me know how to apply the same aspect ratio to the milestones in general/for other devices (computer, tablet) as well.

Thanks a lot in advance,
fkm

Hi Nikko,

thank you very much for your reply/support.

Please see Private Content field.

Best regards,
fkm

Hi Nikko,

thanky you very much for your reply.

Please see link. Sorry.

Best regards,
fkm

Hi Mike,

thank you very much for your quick reply and the css.

In the meantime I realized that the css codes for the navigation (prev, next) not only affected the timeline element, but all the easy sliders on my website.
Now that I´m using the page id for the css/timeline everything suddenly works as it should.
So this topic can be closed as successfully completed.

Thanks a lot.

Best regards,
fkm

Hi Guenni007,

Thank you very much for the detailed instructions.
Unfortunately, I don’t currently have FTP access for this website.
But I’ll take care of it soon and try it then.

Thanks a lot again.

Best regards,
fkm

Hey Yigit,

thank you very much for your reply and the CSS Codes – I was able to make the most adjustments with it. Great.

Is there a way to position the navigation arrows (next, previous, both) for each situation at the very right edge?
Please see screenshots.

Thanks a lot in advance.

Best regards,
fkm

Hi Nikko,

thank you very much for your immediate reply.

I tried around and at some point it worked.
But then I realized that I liked it better before and so I undid it.
I´ll leave it the way it is now and I’m absolutely happy with it.

Please fell free to close the topic as sucsefully completed.

Best regards,
fkm

Hi Nikko,

thank you very much for your reply and the CSS code – it does help, it works great!

I removed the ID as well as the screensize conditions and so it now affects every Easy Slider on my website:
flush on smartphones and 16 Px enlarged on each side on big screens (as requested – according to the screenshots 4 and 7).

.avia-slideshow {
width: calc(100% + 32px);
margin-left: -16px;
}

Is there another CSS code that will make the easy sliders on tablets 100% wide with 16 px spacing on both sides as shown in screenshot 5?

Thanks a lot for another reply.

Best regards,
fkm

Hi, everyone,

thank you very much for your replies (and please excuse my delayed one).

I´m currently using the following CSS to get 16 px spacing on the sides of my website on mobile devices (please see screenshot 1):

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container {
width: 100%;
max-width: 100%;
padding-left: 16px!important;
padding-right: 16px!important;
}
}

If I replace this CSS with any of the CSS above (both from Yigit and Guenni007), each of them works fine but also causes the entire content of the color section to be flush with the edges of the page and the header to be indented.
Please see screenshot 2.

So I’m wondering if there would also be an simple way to only enlarge all of the easy sliders I´m using for the website and leave the other elements untouched?
The pages with easy sliders are all structured in the same way (using color-sections): please see backend example screenshot 3.

It would be great if the easy sliders were flush with the edges on phones (screenshot 4), with 16 pixel paddings on tablets (screenshot 5), and slightly extended on large screens (screenshots 6-7).

Please let me know if and how this could be done.

Thanks a lot in advance.

Best regards,
fkm

Hi Mike,

thank you very much for your reply and the link.

Accordingly, I tired to follow the instructions and (at least) added the provided function to my child’s functions.php.
Unfortunately, I don´t know how to add a new folder to the child theme directory called shortcodes.
I can´t even find it.

Please help me how to proceed further.

Thanks a lot in advance.

Best regards,
fkm

Hi Ismael,

thank you very much again.

Actually, according to the filter in your post above, it already should have been “full” instead of “no scaling” (but it wasn´t, you´re right).
I probably opened several tabs with the backend in the browser and then refreshed the wrong one. My mistake. Sorry.

I hope it’s correct now. Please see screenshot.
However, nothing seems to have changed: the images in the list are still reduced in resolution and the GIF does not play.

Please check again if there is another way to fix this.

Thanks a lot in advance.

Best regards,
fkm

Hi Ismael,

thank you very much for your reply and the code.
Slideshow, gallery and list preview images do now all have the original proportions.

However, they seem to differ in their resolution:
While the preview images in the gallery or slideshow appear as if the full image resolution of 1800 x 1200 is given, the images in the list appear as if the resolution is reduced.

I took some screenshots (please take a look) of the preview images in the browser at 300% magnification to show what I mean:

Jpg-Files:
1. list_jpg.jpg: image a little blurry
2. slideshow_jpg.jpg: image much sharper

A gif file is displayed animated in slideshow and gallery and in the list it´s displayed in reduced resolution and without animation.
Maybe that could be a clue!?
3. list_animated-gif.jpg
4. slideshow_animated-gif.jpg
Please see website for the animation of the gif.

Is it possible to change the images at the list preview according to the others (slideshow and gallery), so that the resolution is increased and also the animation of gif files works?

Thanks a lot for another reply in advance.

Best regards,
fkm

Hi Mike,

I think I had already disabled the page preloading in the Enfold theme options.
Anyway, the css you gave me works fine.

Thank you very much for the quick reply/help and please feel free to close the topic as sucessfully completed.

Best regards,
fkm

Hi Guenni007,

thank you very much for your hint.
Please let me know where to use/replace this line because I can’t find the old function line “$(window).load(function() {” in the script:

add_action(‘wp_footer’, ‘ava_custom_scripts’, 999);
function ava_custom_scripts()
{
?>
<script>
(function($){
// automatically open first portfolio grid item
$(document).ready(function() {
setTimeout( function() {
var grid = $(‘.grid-links-ajax’);

if( grid ) {
grid.find(‘a:first’).trigger(‘click’);
}
}, 100);
});
})(jQuery);
</script>
<?php
}

Thanks a lot in advance.

Best regards,
fkm

Hi Ismael,

thank you very much for your reply.

You’re right, I just found out that I actually set jQuery to load in the footer and in addition I made a few other changes in Enfold > Performance that I can’t even remember (kind of misterious: I wouldn’t have known exactly what I was doing either).
Furthermore I just have reset all settings in Enfold > Performance the way they are set in other Enfold Backends that I have access to.

And I replaced the corresponding line in the script (thanks for your attentive note). Please see screenshot.

Now the Ajax portfolio preview on iPhone displays as intended on page load automatically with no errors.
It also works on desktop (in Firefox and Chrome), but somehow only after refreshing the page several times.
When the page is loaded for the first time, the preview is not opened and the items cannot even be clicked manually.
I have already deleted browser data and cache several times, the problem persists.

I don’t know what else to do, so please help.

Thank you very much in advance.

Best regards,
fkm