Title: Breaks CSS With Merge Scripts
Last modified: May 27, 2021

---

# Breaks CSS With Merge Scripts

 *  [Anshuman](https://wordpress.org/support/users/likelylife/)
 * (@likelylife)
 * [5 years ago](https://wordpress.org/support/topic/breaks-css-with-merge-scripts/)
 * Hello there!
 * Please check the page I’ve linked to. The page should ideally look like [this](https://ibb.co/vZhfySL)
   but after turning on script merge feature for JavaScript, it looks like [this](https://ibb.co/vZhfySL).
 * 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](https://ibb.co/WvkN2rt)
 * 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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fbreaks-css-with-merge-scripts%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  Plugin Author [swte](https://wordpress.org/support/users/swte/)
 * (@swte)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/breaks-css-with-merge-scripts/#post-14701020)
 * It seems you linked the same image for the with/without merge scripts 🙂
 * However probably there is a javascript issue. Here is a short video how can you
   find and fix js issues: [https://www.youtube.com/watch?v=DfzgLIAkIbQ](https://www.youtube.com/watch?v=DfzgLIAkIbQ)

Viewing 1 replies (of 1 total)

The topic ‘Breaks CSS With Merge Scripts’ is closed to new replies.

 * ![](https://ps.w.org/swift-performance-lite/assets/icon-256x256.jpg?rev=2388229)
 * [Swift Performance Lite](https://wordpress.org/plugins/swift-performance-lite/)
 * [Support Threads](https://wordpress.org/support/plugin/swift-performance-lite/)
 * [Active Topics](https://wordpress.org/support/plugin/swift-performance-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/swift-performance-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/swift-performance-lite/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)

 * 1 reply
 * 2 participants
 * Last reply from: [swte](https://wordpress.org/support/users/swte/)
 * Last activity: [4 years, 10 months ago](https://wordpress.org/support/topic/breaks-css-with-merge-scripts/#post-14701020)
 * Status: not resolved