index-corporate-3 Swiper slider with full image witdh

Hello,

By default, the Background Image is resized according to the Slider's Height. You can consider using the CSS Code below to make the Slider's Height according to your needs to what suits your Image best:

.device-sm #slider { height: 400px !important; }

.device-xs #slider { height: 300px !important; }

This will definitely work fine. The Responsive Classes are as follows:

.device-xl – Class for Large Devices >=1200px

.device-lg – Class for Medium Devices >=992px to 1199px

.device-md – Class for Tablets

.device-sm – Class for Landscape Mobiles or Phablets.

.device-xs – Class for Portrait Mobiles

You can add these Custom CSS codes in the css/custom.css File. Additionally, make sure that you have checked out the Documentation > Start > Customization Section for complete details on how to use the css/custom.css File.

The Slow Loading issue is almost never an issue with the Template but the Amount and Size of the Media Files or the Server Configurations and Speed. Please consider checking out the Documentation > Start > Optimization Tips Section and consider implementing the tips provided as these should definitely help speeding up your website.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Thanks for your Patience! Allow us a maximum of 1 Business Day to reply to you.

Regarding you issue, we have checked out your Page and the issue is appears to be with the errors in your HTML Validation: https://validator.w3.org/nu/?doc=http%3A%2F%2Fsuperbig.id%2Fao%2F. Please consider fixing all the errors and if you are still facing an issue with the Slider Heights, please let us know. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

Thanks for your Patience and more information about the issue.

We have checked your codes further and please consider following the points below:

1. Since you are using a Custom Height for your Slider, remove the .full-screen Class from your #slider Element.

2. Remove the occurrences of the following related Classes from the css/responsive.css File:

.swiper_wrapper:not(.force-full-screen),
.swiper_wrapper:not(.force-full-screen):not(.canvas-slider-grid) .swiper-slide

Now your Slider's Height should work as expected. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

We have checked out your Website and now the Sliders are resizing properly according to the Responsive Heights set in your css/custom.css File:

/* Screen Size */
.device-xs #slider { height: 576px !important; }
.device-sm #slider { height: 400px !important;  } 
.device-md #slider { height: 768px !important;  }
.device-lg #slider { height: 992px !important; }
.device-xl #slider { height: 1200px !important;}

You can adjust these height according to your needs.

However, we found an error in your CSS:

.swiper_wrapper:not(.full-screen):not(.canvas-slider-grid),
/*.swiper_wrapper:not(.full-screen):not(.canvas-slider-grid) .swiper-slide { height: 400px !important; }*/

.sidebar-widgets-wrap {
	position: relative;
	margin: 0 -20px -40px -20px;
}

which is incorrect. Make sure that you completely delete/comment the above 2 lines as mentioned in our previous replies to you. Example:

/*.swiper_wrapper:not(.full-screen):not(.canvas-slider-grid),
.swiper_wrapper:not(.full-screen):not(.canvas-slider-grid) .swiper-slide { height: 400px !important; }*/

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Currently, the Device Breakpoints are set according to the Bootstrap breakpoints which is very widely used and recommended. You can consider using Media Breakpoints like these for setting Custom Breakpoints for your Slider Heights:

@media (max-width: 991.98px) {
	/* Slider Codes */
}

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Thanks for your Patience.

You will need to change the Media Query Value according to the Width of the Device in which you want to apply the Slider Heights. Please update the Live URL with the codes we had provided earlier, so that we can check and provide you with more assistance.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.