• Hello there!

    Please check the page I’ve linked to. The page should ideally look like this but after turning on script merge feature for JavaScript, it looks like this.

    As you can see, two elements get displaced. This is the CSS code for the elements:

    .sliderauthor{
    	margin-top:25px;
    }
    
    .elementor-widget-icon-box .elementor-icon-box-icon span{
    	margin-top:17px;
    }
    
    .elementor .elementor-section-wrap .elementor-element-db7086b .elementor-container .elementor-top-column .elementor-widget-wrap .elementor-widget-posts .elementor-widget-container .swiper-container-initialized .elementor-swiper-button-prev i{
    	margin:auto;
    }
    
    .elementor-widget-posts .elementor-swiper-button{
    	top:89.6%;
    	padding-left:3px;
    	margin-right:-50px;
    	margin-left:100px;
    	height:68px;
    	width:50px;
    	background-color:#20a894!important;
    	margin-top:17px;
    }
    
    .elementor-widget-posts .elementor-swiper-button-next i{
    	margin:auto;
    }
    
    .elementor-element-db7086b .elementor-widget-posts .elementor-swiper-button-prev{
    	position:relative;
    	left:-50px!important;
    	margin-left:0;
    	margin-right:0;
    	margin-top:0;
    	justify-content:flex-end;
    	align-items:flex-end;
    	float:right;
    	top:-35px;
    }
    
    .elementor-element-db7086b .elementor-widget-posts .elementor-swiper-button-next{
    	position:relative;
    	margin-left:0;
    	margin-right:0;
    	margin-top:0;
    	top:-35px;
    	left:50px;
    	justify-content:flex-end;
    	align-items:flex-end;
    	float:right;
    }
    
    .elementor-widget-posts .elementor-swiper-button .eicon-chevron-right{
    	min-height:25px;
    }
    
    .elementor-widget-posts .elementor-swiper-button .eicon-chevron-left{
    	min-height:25px;
    }
    
    .elementor-element-ab8e141 .elementor-widget-posts .elementor-grid{
    	grid-row-gap:0;
    }
    
    .million_box{
    	position:relative;
    	left:-35px;
    }
    
    .elementor-element-db7086b .million_box{
    	top:-190px;
    	max-width:484px;
    }
    
    .elementor-element-db7086b .elementor-widget-posts .swiper-wrapper{
    	position:static;
    	max-width:476px;
    }
    
    .elementor .elementor-section-wrap .elementor-element-db7086b .elementor-container .elementor-top-column .elementor-widget-wrap .elementor-widget-posts .elementor-widget-container .swiper-container-initialized .swiper-wrapper{
    	width:100%!important;
    }
    
    .elementor .elementor-section-wrap .elementor-element-db7086b .elementor-container .elementor-top-column .elementor-widget-wrap .elementor-widget-posts .elementor-widget-container .swiper-container-initialized{
    	width:100%!important;
    }
    
    .elementor-element-db7086b .elementor-widget-posts .swiper-container-initialized{
    	max-width:476px;
    }
    
    .elementor .elementor-section-wrap .elementor-element-db7086b .elementor-container .elementor-top-column .elementor-widget-wrap .million_box{
    	width:100%!important;
    }
    
    .elementor-widget-posts .elementor-widget-container .swiper-container-initialized .elementor-swiper-button{
    	z-index:999!important;
    }
    
    .elementor-container .elementor-top-column .elementor-widget-wrap .elementor-element-e482b45 .elementor-container .elementor-inner-column .elementor-widget-wrap .elementor-widget-wp-widget-wp_mailjet_subscribe_widget .elementor-widget-container .mailjet_widget_front_container #mailjetSubscriptionForm input{
    	transform:translatex(0) translatey(0)!important;
    	border-width:2px!important;
    	border-left-width:2px!important;
    }
    
    .elementor-element-db7086b .elementor-element-0052686 .elementor-widget-wrap{
    	width:100%;
    }
    
    .elementor-element-db7086b .hentry a{
    	width:100%;
    }
    
    .elementor-widget-posts .elementor-widget-container .swiper-container-initialized .elementor-swiper-button-prev{
    	z-index:9!important;
    }
    
    .elementor-widget-posts .elementor-widget-container .swiper-container-initialized .elementor-swiper-button-next{
    	z-index:9!important;
    }
    
    .n2-ss-control-bullet div .n2-style-1b63db3aa0abdb8edd4ab4e9709ae8df-dot{
    	height:0;
    }
    
    /* 767px and smaller screen sizes */
    @media (max-width:767px){
    
    	.elementor-element-db7086b .elementor-widget-posts .elementor-swiper-button{
    		width:40px;
    		height:53px;
    		top:-27px;
    		z-index:99;
    		left:24px!important;
    		display:inline-flex;
    	}
    	
    	.elementor-element-db7086b .million_box{
    		left:-14px;
    	}
    	
    	.elementor-element-db7086b p span{
    		font-size:35px!important;
    	}
    	
    	.elementor-element-db7086b .elementor-widget-posts .elementor-swiper-button-next{
    		left:40px!important;
    	}
    	
    	.elementor-element-db7086b .elementor-widget-posts .elementor-swiper-button-prev{
    		left:-40px!important;
    	}
    	
    }

    Settings for the Script Page can be found here

    Please note that Merge Style is turned off.

    Please guide me as to how I can fix this.

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Breaks CSS With Merge Scripts’ is closed to new replies.