Hi,
Unfortunately, we don’t have a way to make the image swipe left & right to see the whole image when it is enlarged on portrait.
The app that is installed for swipe adds javascript for the swipe, if you don’t install the app you can not swipe. I don’t have a way to add this to your page, try reaching out to superpwa for advice to enable it for WordPress.
To have the image show the left side instead of the center on portrait remove the “left: -200% !important” from the css.
With the above css the user can turn their phone to landscape and see the whole image

Best regards,
Mike

Hey newmediologo,
I see that you have a 400 error and Refused to display frame because it set ‘X-Frame-Options’ to ‘deny’
these two errors could be linked.
I’m not sure what would cause this, but Safari and most AD blockers now block FB, so I recommend creating a image from your FB like box and linking it to your FB page, since most people will not see it otherwise.

Best regards,
Mike

Hi,
Thank you for your patience, when using the Row Screen Options ▸ Column Behaviour in the first column in a row:

and then choose Advanced ▸ Mobile Breakpoint Position to choose a position:

this will only work for that row, and it does now in my test.
But you are using two rows and this will not move an item from your second row into the first row, each row is separate.
While you could use javascript to do this, your customer probably won’t be able to maintain this either.
If you want to use javascript, please let us know.

Best regards,
Mike

Hey Marc,
I see that each of your cam images has a ID so this css will only target those images:

@media only screen and (max-width: 767px) { 
#refresh1, #refresh2, #refresh3 {
	height: 100vh !important;
}
}

Another way would be to add a class to each code block, like “cam”

and then use this css:

@media only screen and (max-width: 767px) { 
.avia_codeblock.cam img {
	height: 100vh !important;
}
}

The issue that I see is on mobile devices in portrait mode your images will be stretched unless you only what to see the center the image in portrait mode, in that case add this css with the above css:

@media only screen and (max-width: 767px) and (orientation: portrait) { 
.avia_codeblock.cam {
	height: 100vh !important;
	width: 400vw !important;
left: -200% !important;
position: relative;
}
}

add the css to your Quick css, it will only target these code blocks with the custom class “cam”.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks, now I see the form, but the datepicker is center on the screen for desktop:

and mobile:

Try the login you posted for us and check “Kriesi”

Best regards,
Mike

Hi,
When I check your middle image looks like this:

and I see this on moblie:

Best regards,
Mike

Hey westefan,
This was added a while back and works on my install without any added code. Ensure that you add a custom ID to each tab:

and use a link with the ID “elements/tabs#tabthree” the page will scroll up and open the tab”

If you are using the sticky header and the tab is too close to the header, you can add this code to the end of your child theme functions.php file in Appearance ▸ Editor to adjust the position:

function custom_script() { ?>
  <script>
(function($) {
$(document).ready(function() {
    $('a[href^="#"]').click(function(e) {
        var targetHash = this.hash;
        setTimeout(function() {
            $('html, body').animate({
                scrollTop: $(targetHash).offset().top - 100
            }, 500);
        }, 100);
    });
    
    if (window.location.hash) {
        $('html, body').animate({
            scrollTop: $(window).scrollTop() - 100
        }, 500);
    }
});
}(jQuery));
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

Best regards,
Mike

Hi,
Also the other five images are all 80px in height, only the first green image is smaller, please add a new image that is the same height as the others, even if you add transparent space to the top and bottom, if you want it centered, or just to the bottom it you want it top aligned.

Best regards,
Mike

Hi,
When I check your elements on desktop and mobile, they look correct:

because the lines of text is the same
only between 768px-1240px does the screen size change the number of lines in the text:

Try adding a custom class to each of the headings, like “heading” and another custom class to each content under it, like “content”
Then I believe that we can help with some javascript to help for these screen sizes.

Best regards,
Mike

Hi,
Thanks for the login, I tested in Chrome, Firefox, and Brave, as playertest13 on desktop & mobile, and in all cases the date picker showed in the middle of the screen and did not scroll under the header as in your first screenshot, it is centered like your second screenshot:


perhaps you have already solved this.

Best regards,
Mike

Hi,

Thank you for the inquiry.

As mentioned by @Guenni007 above, the preview image should be clickable by default. Could you provide a link to the page with the post slider element?

Best regards,
Ismael

Hi,

Thank you for the inquiry.

We added this css code to reduce the default padding of the main container and the color section below the image.

#top #main .avia-section .template-page {
    padding-top: 0;
}

.template-page.content.av-content-full.alpha.units.av-enable-shadow {
    padding-top: 0;
}

Please note that this modification will be applied globally and will impact all color sections.

Best regards,
Ismael

Hey Antonio,

Thank you for the inquiry.

We updated the script and the style modifications a bit so that they only apply on desktop view:

Script:

function next_slide_on_image_click() { 
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
    if (window.matchMedia("(min-width: 1024px)").matches) { // Apply only for screens wider than 1024px
        (function($){
            $('.avia-slide-wrap img').click(function() {
                $(this).closest('.avia-slideshow').find('.avia-slideshow-arrows a.next-slide').trigger('click');
            });
        })(jQuery);
    }
});
</script>
<?php 
}
add_action('wp_footer', 'next_slide_on_image_click');

CSS:

@media only screen and (min-width: 1024px) {
  .avia-slideshow-arrows.avia-slideshow-controls {
    height: 100% !important;
    width: 100% !important;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  #top .avia-slideshow-arrows a {
    width: 50% !important;
    height: 100%;
    top: 0;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
  }

  #top .avia-slideshow-arrows a.prev-slide {
    left: 0;
  }

  #top .avia-slideshow-arrows a.next-slide {
    right: 0;
  }
}

Best regards,
Ismael

Hi,

You don’t need to edit the functions.php file because the Custom CSS Class name field is already available in every element. However, if you need to enable the Appearance > Theme File Editor, make sure that the DISALLOW_FILE_EDIT directive in the wp-config.php file is set to true or is not present at all.

I do not understand why the images are scaled even though the screen resolution for both is 1080×2408 pixels.

Please note that the value (max-height: 800px) depends on the browser viewport size, not the screen resolution, which includes calculation for the device pixel ratio (DPR) or pixel density. For example, a phone with a screen resolution of 1024×2048px and a DPR of 3 will have a viewport size of approximately 360×802px.

We recommend leaving the setup as it is since it would require a significant amount of modifications to account for all possible screen sizes. Making sure that the image is fully visible in the viewport might be unnecessary because users can still scroll to view the entire content.

Best regards,
Ismael

Hey Enfoldfanatic,

Thank you for the inquiry.

This is still not possible with the color section element, so you will need to apply a fallback image. If playing background videos on mobile devices is necessary, consider using the Layer Slider element.

Best regards,
Ismael

Hey Aron,
The circle loading is from Vimeo site waiting for the video to load, there is not a way to stop this.
You could try adding a fallback image to the color section to show before the video loads, such as the first frame of the video.

Best regards,
Mike