Hi,

Thank you for the update.

We moved the screenshot to the private field. Unfortunately, your screenshot is not accessible. Please try to use freeimage.host or postimages.org and share the screenshot in the private field if you want it to remain private.

Best regards,
Ismael

Hi,

Thank you for the update.

Please create a test page and provide the page URL — screenshots will also help. You can use platforms like Freeimage, ImgBB, PostImages or Dropbox to upload and share the screenshot.

Best regards,
Ismael

Hi,

Thank you for the screenshot.

To adjust the color of the active language menu item and the hover state of the default menu items, add this css code.

.header_color .main_menu ul:first-child > li a:hover {
    color: #ffffff;
}

.menu-item-language-current a:after {
    color: #ffffff;
}

.header-scrolled .menu-item-language-current a:after {
    color: #0e3c63;
}

For the Kontakt menu item, go to Appearance > Menus and set the Menu Style to Button Style (colored).

Let us know the result.

Best regards,
Ismael

Hi,

Thank you for the inquiry.

You can set them as follows:

Background Attachment: Fixed ( this won’t matter on mobile view because it will default to scroll )
Background Image Position: Center Center ( adjust depending on which part of the image you want to focus on )
Background Repeat: Stretch to fit ( set to Stretch to fit (cover) to make sure the image fills the entire container, or Scale to fit (contain) if you want the entire image to remain fully visible )

Hope this helps.

Best regards,
Ismael

Hey Tanja,

Thank you for the inquiry.

The image in the first section seems to be displaying correctly in full on mobile view — screenshot below.

We tried checking your screenshot above, but it’s private. Please make the screenshot accessible or use other platforms like FreeImage, PostImages or Imgur.

Best regards,
Ismael

Hey rixi,

Thank you for the inquiry.

The Text Block element has an option called Fold/Unfold, which can be enabled in the Content > Fold/Unfold panel, just below the text editor. You can use this to hide part of the text, display only a portion and add a “read more” link. Let us know if this works for you.

Best regards,
Ismael

Hi,

Thank you for the info.

We get the following error when we try to access the wp-admin or wp-login page. Did you change the login URL? Please include it in the private field.

Du bist leider nicht berechtigt, auf diese Seite zuzugreifen.

Would you mind posting the screenshot again using freeimage.host? The one above is not loading on our end.

Best regards,
Ismael

Hey schweg33,

Thank you for the inquiry.

Please add this css code to reduce the height of the submenu and apply a border to it.

#top .sticky_placeholder {
    height: 30px !important;
    max-height: 30px !important;
}

#top .av-submenu-container {
    min-height: 30px;
    line-height: 1em;
    border-color: #b1b1b1;
}

#top .av-subnav-menu > li {
    padding: 8px 0;
    display: inline-block;
}

Best regards,
Ismael

Hi,

Thank you for the inquiry.

Yes, you can use the Color Section element instead of the slider if you need to include additional content inside. The image can be applied as a background in the Styling > Background Image panel.

Hope this helps.

Best regards,
Ismael

Hey Tanja,

Thank you for the inquiry.

The font displays normally on our end when tested on mobile devices.

Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, ImgBB, PostImages or Dropbox to upload and share the screenshot.

Best regards,
Ismael

Hey condonp,

Thank you for the inquiry.

This is possible but it will require some custom html and some css modifications. You can start with the following code:

<div class="av-custom-testimonial">
  <div class="av-testimonial-card">
    
    <div class="av-testimonial-left">
      <h3 class="av-testimonial-heading">What our clients say</h3>
      <div class="av-testimonial-stars"></div>
      <p class="av-testimonial-text">“Your testimonial text goes here.”</p>
      <div class="av-testimonial-client">Client Name</div>
      <div class="av-testimonial-client-meta">Client Title</div>
    </div>

    <div class="av-testimonial-right">
      <div class="av-image-wrap">
        <img src="image.jpg" alt="">
      </div>
    </div>
  </div>
</div>

Then add this code in the Quick CSS field:

.av-custom-testimonial .av-testimonial-card {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 24px;
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
  max-width: 880px;
  align-items: stretch;
}

.av-custom-testimonial .av-testimonial-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 0;
}

.av-custom-testimonial .av-testimonial-heading {
  font-size: 1.25rem;
  line-height: 1.1;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
  display: inline-block;
  width: 50%;
}

.av-custom-testimonial .av-testimonial-stars {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}

.av-custom-testimonial .av-testimonial-text {
  font-size: 0.98rem;
  color: #6b7280;
  margin-bottom: 14px;
}

.av-custom-testimonial .av-testimonial-client {
  font-weight: 600;
  font-size: 0.95rem;
  color: #08121a;
}

.av-custom-testimonial .av-testimonial-client-meta {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 4px;
}

.av-custom-testimonial .av-testimonial-right {
  position: relative;
  min-height: 220px;
  overflow: visible;
}

.av-custom-testimonial .av-image-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 160px;
  height: 280px;
  overflow: hidden;
  border-top-left-radius: 140px 72px;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 12px;
  border-top-right-radius: 12px;
  background: #f3f4f6;
}

.av-custom-testimonial .av-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 760px) {
  .av-custom-testimonial .av-testimonial-card {
    grid-template-columns: 1fr;
  }

  .av-custom-testimonial .av-image-wrap {
    position: relative;
    width: 100%;
    height: 220px;
    border-top-left-radius: 48px 26px;
  }

  .av-custom-testimonial .av-testimonial-right {
    min-height: auto;
  }

  .av-custom-testimonial .av-testimonial-heading {
    width: 70%;
  }
}

Best regards,
Ismael

Hey viannay,

Thank you for the inquiry.

Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, ImgBB, PostImages or Dropbox to upload and share the screenshot. Here are the steps to follow:

1.) Visit the website of your chosen platform, such as Savvyify, ImgBB, PostImages or Dropbox.
2.) Locate the option to upload a file or an image.
3.) Select the screenshot file from your computer or device and upload it to the platform.
4.) After the upload is complete, you will be provided with a shareable link or an embed code.
5.) Copy the link or code and include it in your message or response to provide us with the screenshot.

Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.

Best regards,
Ismael

Hi,

Thank you for the update.

The images in the masonry seem to be displaying in their original sizes now. Have you tried adjusting the width of the container so the images display the same as on the previous site?

.page-id-1562 #section-width .container {
    max-width: 1350px;
}

Adjust the max-width value as necessary.

Screenshot:

Best regards,
Ismael

Hi,

Thank you for the update.

We just tested the code again and it seems to be working as it should.

Have you tried removing this css code?

#top #header.header-scrolled a {
    color: #ffffff !important;
}

Please provide a screenshot of the element that you’d like to change. You can use platforms like Savvyify, ImgBB, PostImages or Dropbox.

Best regards,
Ismael

Hey ti2media,
Try adding this snippet to your child theme functions.php:

function add_sticky_info_box() {
    ?>
    <style>
        .sticky-info-box {
            position: fixed;
            bottom: 120px;
            right: 20px;
            width: 300px;
            height: 300px;
            background: #ffffff;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            padding: 20px;
            box-sizing: border-box;
            transition: opacity 0.3s ease;
        }
        
        .sticky-info-box.hidden {
            display: none;
        }
        
        .sticky-info-box-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        
        .sticky-info-box-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin: 0;
            flex: 1;
        }
        
        .sticky-info-box-close {
            background: none;
            border: none;
            font-size: 24px;
            color: #999;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s ease;
        }
        
        .sticky-info-box-close:hover {
            color: #333;
        }
        
        .sticky-info-box-message {
            flex: 1;
            color: #666;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px;
            overflow-y: auto;
        }
        
        .sticky-info-box-button {
            background: #0073aa;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            transition: background 0.2s ease;
        }
        
        .sticky-info-box-button:hover {
            background: #005a87;
        }
        
        .sticky-info-toggle {
            position: fixed;
            bottom: 120px;
            right: 50px;
            width: 50px;
            height: 50px;
            background: #0073aa;
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 9998;
            display: none;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
        }
        
        .sticky-info-toggle:hover {
            background: #005a87;
        }
        
        .sticky-info-toggle.visible {
            display: flex;
        }
    </style>
    
    <div class="sticky-info-box" id="stickyInfoBox">
        <div class="sticky-info-box-header">
            <h3 class="sticky-info-box-title">Important Information</h3>
            <button class="sticky-info-box-close" id="closeInfoBox" aria-label="Close">×</button>
        </div>
        <div class="sticky-info-box-message">
            <p>This is your information box! You can customize this message to display any content you'd like to share with your visitors.</p>
        </div>
        <a href="/your-page-url" class="sticky-info-box-button">Learn More</a>
    </div>
    
    <button class="sticky-info-toggle" id="infoToggle" aria-label="Show information">ℹ</button>
    
    <script>
        (function() {
            var infoBox = document.getElementById('stickyInfoBox');
            var closeBtn = document.getElementById('closeInfoBox');
            var toggleBtn = document.getElementById('infoToggle');
            
            // Close the info box
            closeBtn.addEventListener('click', function() {
                infoBox.classList.add('hidden');
                toggleBtn.classList.add('visible');
            });
            
            // Show the info box again
            toggleBtn.addEventListener('click', function() {
                infoBox.classList.remove('hidden');
                toggleBtn.classList.remove('visible');
            });
        })();
    </script>
    <?php
}
add_action('wp_footer', 'add_sticky_info_box');

Then adjust the title, message, buttone text & link to suit. You can also adjust the CSS to change colors, etc.
It places the box & info button 120px from the bottom so they are above the scroll-top button, ratio than have them move if the scroll-top shows, which would not be so good.

Best regards,
Mike

Hi,

Please continue here: https://kriesi.at/support/topic/color-section-not-showing-color-or-image-background/#post-1492088

Best regards,
Ismael