Hi,
The Read More tag will only work in the WP editor, not in the ALB, the ALB was intended for pages.
To add a slider to the top of a WP editor post, in the Block Editor, click on the “Classic” block above your post:

then click on the Shortcode Wand Tool to show the elements and choose the slider:

you will be prompted with the element builder, when you save you will see the shortcode:

Then save the post, on the frontend the slider will show below the featured image:

and on the blog page with the Blog Posts element:

Best regards,
Mike

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey Antonio,

Thank you for the inquiry.

You can try setting the map’s height for different screen sizes using css media queries.

Example:

@media only screen and (max-width: 1366px) {

  /* Add your Mobile Styles here */
  #top .av-2x5yv-2e4c878dbdd4546c1985e0573793e047 .av_gmaps_sc_main_wrap .avia-google-map-container {
    height: 700px !important;
  }
}

@media only screen and (max-width: 989px) {

  /* Add your Mobile Styles here */
  #top .av-2x5yv-2e4c878dbdd4546c1985e0573793e047 .av_gmaps_sc_main_wrap .avia-google-map-container {
    height: 655px !important;
  }
}

@media only screen and (max-width: 480px) {

  /* Add your Mobile Styles here */
  #top .av-2x5yv-2e4c878dbdd4546c1985e0573793e047 .av_gmaps_sc_main_wrap .avia-google-map-container {
    height: 455px !important;
  }
}

Best regards,
Ismael

Hi,

We are only able to reproduce this issue when the screen width is around 782px, which is not a standard resolution for mobile devices, so it’s not something to be overly concerned about. If you’d still like to address it, consider reducing the font size of the button, then set the max-width to 100%.

@media only screen and (max-width: 989px) {
  .responsive #top #custom_html-2 button {
    font-size: 13px;
    word-break: keep-all;
    max-width: 100%;
    text-align: center;
  }
}

Best regards,
Ismael

Hey koomo,

Thank you for the inquiry.

Try to add this css code to adjust the width of the mega menu container under the Destinations menu item:

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
  #top #wrap_all #menu-item-35451 .avia_mega_div > .sub-menu {
      width: 750px !important;
  }

  #top #wrap_all #menu-item-35451 .avia_mega_div {
      width: 750px !important;
      overflow: visible;
      max-width: 750px !important;
  }

  #top #wrap_all #menu-item-35451 .avia_mega_div > .sub-menu > li {
      width: 250px;
  }
}

Best regards,
Ismael

Hi,

Add this css code to adjust the background color on smaller screens:

@media only screen and (max-width: 989px) {

  /* Add your Mobile Styles here */
  .responsive #top .av-submenu-container {
    position: absolute !important;
    background-color: #4f5b33a3;
  }

  .responsive #top .socket_color .mobile_menu_toggle {
    color: #ffffff;
    background: transparent;
    border: 0;
  }

  .responsive #top .socket_color .mobile_menu_toggle:hover {
    color: #f3ab29;
  }
}

Best regards,
Ismael

Hi,

Thank you for the update.

You can try setting the png image as the background of the scroll-down link:

#top .scroll-down-link.avia-svg-icon {
    background-image: url('image.png');
}

#top .scroll-down-link.avia-svg-icon svg {
    display: none;
}

Let us know if you need more info.

Best regards,
Ismael

Hi!

Thanks for following up.

We have moved the screenshot to the private field. To adjust the display of the navigation arrows and move them to the top of the testimonials, try to include this css code:

#top .avia-slider-testimonials.avia-testimonial-wrapper {
    overflow: visible;
}

#top .avia-slider-testimonials.av-slideshow-ui.av-nav-arrows-visible .avia-slideshow-arrows a {
    margin: -64px 15px 0;
}

Please make sure to clear the browser cache or history on your phone, or switch to incognito mode temporarily to see the latest changes.

Regards,
Ismael

Hi,

Are you trying to change the color of the menu items on hover? Try to add this css code:

#top .av-submenu-container.av-mfuwd2dc-fbfd62110b190173ec9e1a9c9af59e82 .av-subnav-menu li:hover a {
    color: #f3ab29;
}

Best regards,
Ismael

Hi,

Thank you for the update.

It seems to be working correctly on our end. Please try purging the cache or temporarily disable the Autoptimize plugin before checking the page again.

Best regards,
Ismael

Hi,

You can add this css code to make the background transparent and have the menu float above the slider.

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

  #top .av-submenu-container.av-mfuwd2dc-fbfd62110b190173ec9e1a9c9af59e82 {
    position: absolute;
    background-color: #4f5b33a3;
  }

  #top .av-submenu-container.av-mfuwd2dc-fbfd62110b190173ec9e1a9c9af59e82 .av-subnav-menu li a {
    background-color: transparent;
  }
}

Best regards,
Ismael

Hi,

Thank you for the update.

Try to add the following css code below the first one to adjust the padding around the testimonial container and decrease the font size on smaller screens.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
    padding: 0;
  }

  .responsive #top .avia-slider-testimonials .avia-testimonial-content p:last-child {
    font-size: 0.85em;
    line-height: 1.6em;
  }
}

(moved screenshot in the private field)

Best regards,
Ismael

Hey santanin,

Thank you for the inquiry.

There’s no built-in option for this, but you can use the following css code to apply a white background to the testimonial container and set a border radius of 30px. To adjust the content color of the testimonial item, go to the Styling > Colors section.

#top .avia-slider-testimonials.avia-testimonial-wrapper .avia-testimonial .avia-testimonial_inner {
    background: #ffffff;
    border-radius: 30px;
    padding: 20px;
}

Best regards,
Ismael