Hi,
Often when a page is corrupt in this way, you can not correct it and save again, the error just returns, typically using the page Revisions will also not work, but perhaps if you go back far enough it might work, it might be worth a try. But please note to might not be able to recover if it breaks this page.
I would recommend creating a staging copy of your site first to test on.
I would draw your attention to the av_fullscreen shortcode in the beginning of the text elements, this is your full screen slider at the top of your page, but it shows in the text element below the slider:


and it also shows in the last text element on the page:


so this doesn’t match the frontend of your site, as you don’t have more than one full screen slider on your page, thus this page is corrupt and I don’t see a way to correct it,
this is why I recommend either recreating the page in a new blank page, or using your server backup. I know you said that you would have to go back years, but it sounds like you have not been able to update the page in years, so the backup should be the same as the last time you edited the page. In my guess.

Best regards,
Mike

Hi,
I don’t believe that there is a issue with backward compatibility, we would have also experienced this on our sites and seen other users post this, but I have seen shortcode in the text element become corrupt as in this screenshot:
https://img.savvyify.com/images/2024/07/21/Enfold_Support_6362.md.jpg
I also note that you seem to have put your ALB shortcodes in a text element, instead of adding the elements to the page, do you recall building your pages like this, it is unusual.
You could try rolling back to the older version, or restore your server backup to before you updated.

Best regards,
Mike

Hi,
When you write:

top:27%; is my live view in my smartphone good, but the view in the browser development is bad.

it sounds like you are referring to this custom css:

because it is the only one that is a percentage, but this one should not change your device vew because it has the max-width of 736px, which is smaller than your device.
This custom css should be the one that works on your device:

because it’s max-width is the same as your device, but I not sure if you are changing the top:16px; to top:27px; or 27%
If I’m correct about this, change this css to:

@media only screen and (max-width: 373px) {
    .inner-container {
        position: relative;
        top: 16px;
    }
}

so it stops working at 373px and then add this css for your device:

@media only screen and (min-width: 374px) and (max-width: 379px) {
    .inner-container {
        position: relative;
        top: your-value;
    }
}

and adjust the your-value to what looks good on your device.
This way other devices will still look correct, it get tricky when a single device doesn’t display correctly, but I think this will work for you.
When I check with my iPhone 7 which has a screen width of 320px, the logo looks just like it does in the browser development tool for the same width.

Best regards,
Mike

Hi,
kwanumzen108 it looks like you have pasted theme shortcode into a text element, but you have extra HTML before and after the shortcode, typically this will cause breaks:


sometimes this occurs when a page is saved as a default WordPress builder page, and then converted back again.
cws0827 I’m not sure what you mean by scenery theme package, please open a new thread with the url to the page in question and an admin login so we can be of more assistance. It gets confusing when we are working on more than one site per thread. Thanks for understanding.

Best regards,
Mike

Hi,
Glad to hear, we will close this then, thanks for using Enfold.

Best regards,
Mike

Hi,
I would need to see the page to see why it’s not working.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

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

#socket #avia3-menu .avia-menu-text {
	color: #000;
}
#socket #avia3-menu .avia-menu-text:hover {
	color: #ccc;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
There is no limit to the page size, but unfortunately access is still blocked.
Have you tried to disable all of your plugins, this could be a plugin conflict.

Best regards,
Mike

Hi,
Glad Guenni007 could help, thank you Guenni007, shall we close this thread then?

Best regards,
Mike

Hey navindesigns,
Thank you for the link to your site, it looks like the burger menu color is black on a black header background, so it is not seen, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field to make it white:

.header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
    background-color: #fff;
}

For the table height, Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_table_script() { ?>
  <script>
(function($){
  $(window).load(function(){
  	$('.page-id-2333 .avia-pricing-table-container').each(function(){  
     var $columns = $('.pricing-table',this);
     var maxHeight = Math.max.apply(Math, $columns.map(function(){
         return $(this).height();
     }).get());
     $columns.height(maxHeight);
});
});
})(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_table_script', 99 );

and this css in your Quick CSS:

.page-id-2333 .pricing-table li.empty-table-cell {
    display: block;
}
.page-id-2333 .avia-pricing-table-container .pricing-table li:nth-child(6) {
	height: 62px;
}

Best regards,
Mike

Hey dweddell,
Thank you for the link to your site, but I didn’t find the jQuery code on your page or the console.log messages, are you sure that you added it to your functions.php file?

function toggle_on_click() {
?>
<script>
jQuery(window).on('load', function(){

jQuery(".toggle-button a").on("click", function(e) {
	console.log(" toggle section");

	jQuery("#toggle-section").toggleClass("hide-me");

	console.log(" Prevent default ");

	e.preventDefault();

});
});
</script>
<?php 
}
add_action('wp_footer', 'toggle_on_click');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
If you did, please include an admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike

Hi,
I’m not seeing this this on my Mac, but you could try adding this css:

.togglecontainer * {
	border-left: none;
	border-right: none;
	border-left-color: transparent !important;
  border-right-color: transparent !important;
}
.togglecontainer .av-inherit-border-color {
	border-left-color: transparent !important;
  border-right-color: transparent !important;
}

then clear your browser cache, Please note that testing with Safari can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

Hi,
Try this HTML:

<div class="nav-container">
<div class="navigation">
<a href="#" class="nav-link left-link"><img src="https://w-bullinger.com/wp-content/uploads/2024/06/WB-Nav-Arrow-Left.svg" alt="Left"></a>
<a href="#" class="nav-link close-link"><img src="https://w-bullinger.com/wp-content/uploads/2024/06/WB-Nav-X.svg" alt="close"></a>
<a href="#" class="nav-link right-link"><img src="https://w-bullinger.com/wp-content/uploads/2024/06/WB-Nav-Arrow-Right.svg" alt="Right"></a>
</div>
</div>

and this css:

.nav-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 300px;
}

.nav-button, .nav-link {
    display: inline-block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
    color: #333;
}

.nav-button:hover, .nav-link:hover {
    background-color: #e0e0e0;
}

.nav-link img {
    width: 20px; /* Adjust the size of the image icon */
    height: 20px;
}

For this result

Best regards,
Mike

Hi,
Thank you for the link to your site and the screenshot, I don’t know what the plugin style is meant to look like, but from your screenshot it looks like the border around the elements is the issue. I don’t think that disabling the theme style would be a good solution as I doubt the plugin includes the css required for all of the elements on the checkout page.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field to remove the borders and slightly adjust a couple of elements for a better view:

.woocommerce-checkout td,
.woocommerce-checkout tr th:first-child, 
.woocommerce-checkout tr td:first-child,
.woocommerce-checkout tr:first-child th, 
.woocommerce-checkout tr:first-child td,
.woocommerce-checkout .flux-checkout__content-right #order_review tr.cart_item td, 
.woocommerce-checkout .flux-step #order_review tr.cart_item td {
    border: none;
}
.woocommerce-checkout div table.shop_table td {
    padding: 0;
}
.woocommerce-page .button {
    margin: 0;
}
.woocommerce form p.form-row input[type=text]#coupon_code {
	padding-right: 0;
}
.woocommerce-page .coupon-form td .checkout_coupon.woocommerce-form-coupon p.form-row-last {
    width: 41%;
}
.woocommerce-page .coupon-form td .checkout_coupon.woocommerce-form-coupon p.form-row-first {
    width: 50%;
}

Please see the screenshot in the Private Content area of the expected results.

Best regards,
Mike