Hi,
I added !important; to flex-basis: 100%;
please clear your browser cache and check again.
Please see the screenshot in the Private Content area.

Best regards,
Mike

Hi,
On mobile there is not enough room for the buttons next to the logo, so they will need to be smaller and under the logo.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 430px) { 
	.responsive #top #header #header_main .inner-container .widget {
    order: 3;
    flex-basis: 100%;
	}
	.responsive #top #header #header_main .inner-container .widget .avia-button.avia-size-medium {
	padding: 12px 5px 10px;
    font-size: 12px;
    min-width: 60px;
	}
	.responsive #top #header #header_main .inner-container .widget>div {
		padding: 0;
	}
	.responsive #top #header #header_main .inner-container .widget>div>div {
	text-align: center;
	}
}

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

Hey kerrya4446,
Please see our documentation for the blog there are a couple of different ways to set it up.
After reviewing the documentation, if you need further help please explain which way you want to set up the blog and include a admin login so we can help.

Best regards,
Mike

Hi,
Thank you for your patience, I have examined the test page on your site removing & adding the slider and then checked the page shortcode carefully with the Avia Layout Builder Debugger and at one point I thought this might be related to the wp:paragraph tags that I found in some text elements:

but removing them didn’t help, so I copied the page to my test site to see the error would follow but it didn’t, I linked to the test page in the Private Content area so you could also check. This make me think that it was related to your footer widgets somehow, so I copied your to my site and I still couldn’t reproduce the error.
I then disabled the header on your test page and reuploaded the theme and disabled your plugins, but this didn’t help.
I also disabled your File Compression and cleared your Old CSS And JS Files.
So I’m not sure what the issue is from, but it doesn’t seem to be a error in the theme, since I can’t reproduce the error.
Your Site Health report says that your PHP module, imagick, is not installed, I don’t see how that could cause an error like this but it may be worth tring.
You could also try a different PHP version, I’m using v8.0.30, and you are using v8.1.26, perhaps try v8.2 or v7.4

Best regards,
Mike

Hi,
You mean if you are logged in to WordPress or not?
If you don’t see it when you are logged out this means that your caching plugin has not been updated and is not showing the new css, or perhaps your server cache need to be updated, or perhaps your CDN cache needs to be updated.
So if you are using all of these you will need the clear and update all of these.
Typically caching doesn’t show for logged in users, so it proves that this css works. Please try clear and update your caches or disable all of them and check again.

Best regards,
Mike

Hi,
Thank you for your patience and the video, I think I understand what you were hoping to do, but I couldn’t find a way to change this. But I did come up with a solution that may work for you. In your video I noticed that your example post was created with the ALB (Advanced Layout Builder) so I assume all of them are. So I created a couple of test posts, not pages, on my test site and added a couple of images with the Image element and one with the Text element, although I believe you are only using the Image elements.
I set all of the images to medium size.

Then I used this function in my WPCode plugin as a PHP snippet, it will also work in your child theme functions.php:

function adjust_image_attributes_for_single_posts($content) {
    if (is_singular() && in_the_loop() && is_main_query()) {
        $content = preg_replace_callback(
            '/<img(.*?)>/i',
            function ($matches) {
                $new_img_tag = preg_replace('/width=".*?"/i', 'width="auto"', $matches[0]);
                $new_img_tag = preg_replace('/height=".*?"/i', 'height="auto"', $new_img_tag);
                $new_img_tag = preg_replace('/sizes=".*?"/i', 'sizes="(max-width: 1030px) 100vw, 1030px"', $new_img_tag);
                $new_img_tag = preg_replace('/class=".*?size-medium.*?"/i', 'class="size-large"', $new_img_tag);
                return $new_img_tag;
            },
            $content
        );
    }
    return $content;
}
add_filter('the_content', 'adjust_image_attributes_for_single_posts', 99);

It replaces the image class size-medium with size-large, which is not important but I thought it may help with some related css, and it changes the image width & height attribute to auto and changes the size attribute to 1030px so the large image is used from the image srcset.
This worked for me in ALB posts, I also tested in a Classic Editor post and it worked for the images in the post without changing the featured image, which is good because that is a different size and you would not want to change it.
The only thing that I noticed was that on the Classic Editor post the images didn’t seem to change in size even though the source code changed, and this was because to container width of the post was narrow, when I added so css to make the container full width the images showed correctly.

#top .fullsize .template-blog .post .entry-content-wrapper {
    max-width: 100%;
}
#top .fullsize .template-blog .post .entry-content-wrapper > * {
    max-width: 100%;
}

I don’t think this will matter for you, but I’m adding it for future readers that have this issue.
So give this a try and see if it helps you.

Best regards,
Mike

Hey HenkN,
To not have double lightboxs please disable the theme lightbox at Enfold Theme Options ▸ Lightbox Modal Window
For the portfolio item try the class av-masonry-item-with-image
The background image for the portfolio item uses av-masonry-image-container, but you said that was not working for the portfolio items.

Best regards,
Mike

Hey rixi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
	#top .avia-icon-list .iconlist_icon {
		margin: 0 0 10px 0;
	}
	#top .avia-icon-list li {
		padding-bottom: 0;
	}
}

then look in your icon list content area, you have a extra empty paragraph tag from a empty line, probably from a “return” key stroke, you may need to look in the “text” tab to remove it.

This adds a empty space under your icon list:

Best regards,
Mike

Hi,
Thank you for the link to your site and your patience, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_remove_hyphen_script() { ?>
  <script>
(function($){
  $('.av-upcoming-event-meta').contents().filter(function() {
    return this.nodeType == 3
  }).each(function(){
    this.textContent = this.textContent.replace(' - ','');
  });
})(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_remove_hyphen_script', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
Thank you for the link to your site, I see that your tab images are large and the title font is also large for all of the tabs to fit on a small mobile screen, the tabs are designed to float off of th screens so the images and text can be large.
But if you want them to all fit on the screen try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
.av-tab-section-tab-title-container .av-tab-section-image {
	width: 80px;
}
#top .av-section-tab-title {
    padding: 10px 5px 0px 5px;
}
.av-tab-section-tab-title-container .av-inner-tab-title {
    font-size: 12px;
    word-break: break-all;
}
}

I tested this on a 425px screen size, please see the screenshot in the Private Content area, if you have a smaller screen feel free to adjust the values smaller to suit your needs.

Best regards,
Mike

Hi,
Thank you for the link to your site and your patience, typically we don’t have any errors with PHP v8, you say that you upgraded from v5.5, that version has been out of date for a long time, so I assume that your Enfold theme was also out of date?
I ask because your child theme has a lot of customized files, so there is a good chance one of those is not v8 ready.
I tried testing by disabling all of your plugins, but then your site crashed because your customizations seem to rely on Advanced Custom Fields & Custom Post Type UI
So I them tested by enabling the parent theme and the “Share This” social media icons and the “You might also like” related posts sections both showed correctly:

So this shows that the theme does work correctly with PHP v8, so I recommend checking your customized child theme files and compare them with the core files in the latest version and update accordingly.

Best regards,
Mike

Hi,
Try disabling all of your plugins. If that resolves the issue, reactivate each one individually until you find the conflict.
I see that you are using Elementor, it often causing conflicts, Enfold has it’s own built-in page builder and other page builders like Elementor are not recommended or supported.
So this could be your issue with the date not showing, I’m not sure what Ismael did as the workaround, but for it to show on the Thai language you will probably need to customize the WPML translation page for the Thai language.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.avia_mobile .av-parallax.avia-full-stretch.active-parallax {
	display: none !important;
}
.avia_mobile #top .av-parallax-section {
    transform: none !important;
}

This was disabled because some older iPhones will not display parallax correctly due to a iPhone limitation.
If you have any trouble viewing this on a iPhone then please remove the css and note that this will not work for you.
I have tested this on my test site with a Android device and this works correctly.

Best regards,
Mike

Hi,
For your blog page your blog page /nos-references/ I posted this css to correct:

@media only screen and (min-width: 989px) {
#footer .container,
.container.template-blog  {
max-width: 1560px;
}
}

Perhaps you have a very large screen, so try this:

@media only screen and (min-width: 989px) {
#footer .container,
.container.template-blog  {
max-width: 2560px;
}
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Or perhap you have a error in your css file, so try adding it to your WordPress ▸ Customize ▸ Additional CSS
After applying the css, please clear your browser cache and check.
Please see the screenshots in the Private Content area.

Best regards,
Mike

Hey Anouk,
Thank you for the link to your site, your settings in the Enfold Theme Options ▸ Advanced Styling for the padding had pushed the arrows outside of the boxes:

I corrected like this:

and now the arrows show inside of the boxes:

Best regards,
Mike