class: fitvidsignore pada code module, untuk menampilkan booking engine seperti aslinya

QUESTION:

I have a booking engine script. When viewed in the back-end, the layout appears correctly, but when displayed on the front-end, the design changes and looks messy. Could you please help me with what settings I should check or adjust in Divi to fix this issue?

ANSWER

I fixed the issue for you by adding the "fitvidsignore" class to the Code Module: 👇

The fitvidsignore class is used to exclude specific iframes or embeds from being processed by FitVids.js or similar libraries. FitVids.js is a jQuery plugin that makes videos responsive by maintaining their aspect ratio. However, sometimes it can apply incorrect padding, leading to unwanted spaces around the video.

By adding the fitvidsignore class to an iframe or any other parent element like the Code Module in this case, you instruct the library to ignore this particular iframe/content, preventing it from applying any automatic padding or wrapping it with additional divs that could cause layout issues. This is particularly useful when you want to maintain custom styling or when the automatic adjustments by FitVids.js are not needed or cause issues.

The result is: 👇

=========

Kelas fitvidsignore digunakan untuk mengecualikan iframe atau sematan tertentu agar tidak diproses oleh FitVids.js atau pustaka serupa. FitVids.js adalah plugin jQuery yang membuat video responsif dengan mempertahankan rasio aspeknya. Namun, terkadang plugin ini dapat menerapkan padding yang salah, yang menyebabkan spasi yang tidak diinginkan di sekitar video.

Dengan menambahkan kelas fitvidsignore ke iframe atau elemen induk lainnya seperti Modul Kode dalam kasus ini, Anda menginstruksikan pustaka untuk mengabaikan iframe/konten tertentu ini, mencegahnya menerapkan padding otomatis atau membungkusnya dengan div tambahan yang dapat menyebabkan masalah tata letak. Ini sangat berguna ketika Anda ingin mempertahankan gaya khusus atau ketika penyesuaian otomatis oleh FitVids.js tidak diperlukan atau menyebabkan masalah.

Hasilnya adalah: 👇

===================

 apologize, but after checking again, I noticed that the installed widget does not appear when viewed on the mobile version. Could you please update and fix this issue? Thank you very much for your assistance.

Hi Hery! 👋

Mayur here from the Technical Support Team!

Thank you for your patience. 😊

It is disabled in your code because it is not responsive. If you want to show it on the mobile, Please add the following code to the Custom CSS field under WP Dashboard > Divi > Theme Options:

---------

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

    .calcal {

        display: block !important;

        max-width: 100% !important;

    }

}

---------

I have already applied the CSS code, but it still does not appear on the mobile version. Could you please help check and advise further? Thank you.

I added the code directly in the code module:

<style>

.containerrr {

width: 900px;

margin: auto;

}

.calcal form .box input[type="submit"]{

    background: #7D6F4B !important;

    border-color: #7D6F4B !important;

}

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

    .calcal {

        display: block !important;

        max-width: 100% !important;

    }

}

</style>

-----