everything works fine in preview mode but not in published site

preview:

in the preview every view works fine, and the dropdown menu its not affecting anything

published:
but when i published, the view of my gallery/banner got cropped

but when i open the dropdown menu, the gallery is no longer cropped

any solutions to this kind of bug?


here is the code that i used

$w.onReady(()=>{
    initMegaMenu();
});

function initMegaMenu() {
    $w('#megaMenuStateBox,#carrierBtn,#accessoryBtn,#devicesBtn').onMouseOut(() => {
        closeMegaMenu();
    })

    $w('#megaMenuStateBox').onMouseIn(() => {
        $w('#megaMenuStateBox').expand();
    })

    $w('#devicesBtn').onMouseIn(() =>{
        $w('#megaMenuStateBox').expand();
        openRelevantMenu('devicesState');
    })
    $w('#accessoryBtn').onMouseIn(() =>{
        $w('#megaMenuStateBox').expand();
        openRelevantMenu('accessoryState');
    })
    $w('#carrierBtn').onMouseIn(() =>{
        $w('#megaMenuStateBox').expand();
        openRelevantMenu('carrierState');
    })
}

function openRelevantMenu(state){
    $w('#megaMenuStateBox').changeState(state);
}

function closeMegaMenu() {
    $w('#megaMenuStateBox').collapse();
}