Canvas Support

Slider Medical Theme

13 replies · opened Apr 3, 2021

Rrofo62Apr 3, 2021

Hi, I would like to change the position of the caption that is displayed on the slider in the homepage.
I would also like to change its size and, if possible , to know how to change its behavior (fade, slide etc...)
I have lowered the height using these instruction I've found in another post:
... data-height-xl="450" data-height-lg="450" data-height-md="450" data-height-sm="450" data-height-xs="450"
It seems working , is that correct ?
Thank you
Roberto

SSemicolon WebSTAFFApr 4, 2021

Hello,

  1. You can simply use the .slider-caption-right Class or .slider-caption-center Class to change the Position of the Caption. Example:
<div class="slider-caption slider-caption-right">
  1. To change the Font Size, you can consider using the following CSS Code:
.slider-caption h2 {
	font-size: 4rem;
}

.slider-caption p {
	font-size: 1.5rem;
}
  1. This is fine if you want setup specific heights for your Slider. Meanwhile, you can also consider checking flexible heights: http://docs.semicolonweb.com/docs/utility-classes/heights/ .

This will definitely work fine. Hope this Helps!

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

Rrofo62Apr 5, 2021

Thank you for your help.
I have improved my home page but there’s a thing I don’t
understand.
The images in the slider works well only in landscape mode (ipad and mac)
but when I turn the ipad or the iphone in portrait mode the right side (where the image is placed)
disappear.
How can I fix it ?
Thank you
Best regards
Roberto

SSemicolon WebSTAFFApr 5, 2021

Hello,

By default the Image Background is set to background-position: center center;. You can consider using the following code to make this differently positioned on Mobile/iPad Devices:

@media (max-width: 991.98px) {
	.swiper-slide-bg {
		background-position: right center;
	}
}

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.

Rrofo62Apr 6, 2021

I apologies for keeping on with questions but I don't succeed in doing what I'd like.
I have set the slider height at 50 percent of the original size.
I don't understand wich size of the image i need to upload to be sure that nothing is cut off.
Eventually , for mobile i could consider to have a fixed size image that could fit more or less all devices.
If you look at my site https://www.dentarius.it/htmlde/demo-medical.html you'll see that the tooth and the
stethoscope become too big and half cut or completely hidden (in mobile vertical).
I tried what you suggest but I did not succeed.
Thanks for your patience,
Roberto

SSemicolon WebSTAFFApr 7, 2021

Hello,

Since the Background Image is used, it is required for the Image to use background-size: cover; to properly cover the slider area without causing white-space.

Additionally, you are using background-position: left left; which is an Invalid Value. Make sure that you are using correct values: https://www.w3schools.com/cssref/pr_background-position.asp . Moreover, make sure that you are not editing the style.css File and instead use css/custom.css File to add your Custom CSS Codes: http://docs.semicolonweb.com/docs/getting-started/theme-customization/ .

You can use the Responsive Classes to use different Backgrounds on different devices. Example:

.device-lg .custom-hero-bg {
	background-image: url('images/hero-lg.jpg');
}

.device-sm .custom-hero-bg {
	background-image: url('images/hero-sm.jpg');
}

Make sure that you add the .custom-hero-bg Class to the Hero Section. 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.

This will definitely work fine. Hope this Helps!

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

Rrofo62Apr 8, 2021

Hi, I give up :-(
I know this is a support page and you've been really patience and kind but being not so expert on css / bootstrap I don't understand where to write the code you suggest me.
So if is possible (and paying for the extra time ... tell me how and how much please) I'm asking you if you can change the code below writing the missing instructions to set various view (pc - tablet - mobile) using the class and custom.css as you told me in the last post.
Thank you very much.
Best regards,
Roberto

&lt;!-- Slider
	============================================= --&gt;
	&lt;!--&lt;section id="slider" class="slider-element swiper_wrapper min-vh-50 min-vh-md-100" data-loop="true" data-autoplay="5000"&gt;--&gt;
	&lt;section id="slider" class="slider-element swiper_wrapper min-vh-50 min-vh-md-50" data-loop="true" data-autoplay="5000" data-effect="fade"&gt;
	

		&lt;div class="slider-inner"&gt;

			&lt;div class="swiper-container swiper-parent"&gt;
				&lt;div class="swiper-wrapper"&gt;
					&lt;div class="swiper-slide"&gt;
						&lt;div class="container"&gt;
							&lt;div class="slider-caption"&gt;
								&lt;div&gt;
									&lt;h2 data-animate="flipInX"&gt;Testo da definire&lt;span&gt; e modificare&lt;/span&gt;.&lt;/h2&gt;
									&lt;p class="d-none d-sm-block" data-animate="flipInX" data-delay="500"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;br&gt;Consectetur necessitatibus placeat.&lt;/p&gt;
								&lt;/div&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class="swiper-slide-bg" style="background-image: url('demos/medical/images/slider/adobe_dente.jpg');"&gt;&lt;/div&gt;
					&lt;/div&gt;
					&lt;div class="swiper-slide"&gt;
						&lt;div class="container"&gt;
							&lt;div class="slider-caption"&gt;
								&lt;div&gt;
									&lt;h2 data-animate="zoomIn"&gt;Testo da definire&lt;span&gt; e modificare&lt;/span&gt;.&lt;/h2&gt;
									&lt;p class="d-none d-sm-block" data-animate="flipInX" data-delay="500"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;br&gt;Consectetur necessitatibus placeat.&lt;/p&gt;
									&lt;!--&lt;p class="d-none d-sm-block" data-animate="zoomIn" data-delay="500"&gt;Care for your Loved Ones from the Experts in the Medical & Hospitality Industry.&lt;/p&gt;--&gt;
								&lt;/div&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class="swiper-slide-bg" style="background-image: url('demos/medical/images/slider/adobe_bambini2.jpg');"&gt;&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;

			&lt;/div&gt;

		&lt;/div&gt;
	&lt;/section&gt;&lt;!-- #slider end --&gt;
SSemicolon WebSTAFFApr 8, 2021

Hello,

This should be your code in HTML:

<div class="swiper-slide-bg custom-hero-bg"></div>

and this in the css/custom.css File:

.custom-hero-bg {
	background-image: url('demos/medical/images/slider/adobe_dente-mobile.jpg');
}

@media (min-width: 768px) {
	.custom-hero-bg {
		background-image: url('demos/medical/images/slider/adobe_dente-tablet.jpg');
	}
}

@media (min-width: 992px) {
	.custom-hero-bg {
		background-image: url('demos/medical/images/slider/adobe_dente-pc.jpg');
	}
}

That's it. Make sure that you rename the Images above according to your needs.

Hope this Helps!

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

Rrofo62Apr 8, 2021

Thank you for the quick reply.
Now it seems more understandable to me but it doesn't work and probably I missed something.
Here the code I've copied from you:
in the html file I tried what you told me ... <div class="swiper-slide-bg custom-hero-bg"></div>
and in another attempt I add the custom-hero-bg class to the code already written in the original file.
I apologies in advance if I missed a silly thing.
Thank you again for your patience ...
Roberto

/* ----------------------------------------------------------------
Custom CSS

Add all your Custom Styled CSS here for New Styles or
Overwriting Default Theme Styles for Better Handling Updates

-----------------------------------------------------------------*/

.slider-caption h2 {
font-size: 3rem;
}

.slider-caption p {
font-size: 1rem;
}

.custom-hero-bg {
background-image: url('demos/medical/images/slider/11.jpg');
}

@media (min-width: 768px) {
.custom-hero-bg {
background-image: url('demos/medical/images/slider/1.jpg');
}
}

@media (min-width: 992px) {
.custom-hero-bg {
background-image: url('demos/medical/images/slider/12.jpg');
}
}

	&lt;!-- Slider
	============================================= --&gt;

	&lt;!--&lt;section id="slider" class="slider-element swiper_wrapper min-vh-50 min-vh-md-100" data-loop="true" data-autoplay="5000"&gt;--&gt;
	&lt;section id="slider" class="slider-element swiper_wrapper min-vh-50 min-vh-md-50" data-loop="true" data-autoplay="5000" data-effect="fade"&gt;
	

		&lt;div class="slider-inner"&gt;

			&lt;div class="swiper-container swiper-parent"&gt;
				&lt;div class="swiper-wrapper"&gt;
					&lt;div class="swiper-slide"&gt;
						&lt;div class="container"&gt;
							&lt;div class="slider-caption"&gt;
								&lt;div&gt;
									&lt;h2 data-animate="flipInX"&gt;Testo da definire&lt;span&gt; e modificare&lt;/span&gt;.&lt;/h2&gt;
									&lt;p class="d-none d-sm-block" data-animate="flipInX" data-delay="500"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;br&gt;Consectetur necessitatibus placeat.&lt;/p&gt;
								&lt;/div&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;!--&lt;div class="swiper-slide-bg" style="background-image: url('demos/medical/images/slider/adobe_dente.jpg');"&gt;&lt;/div&gt;--&gt;
						&lt;div class="swiper-slide-bg custom-hero-bg"&gt;&lt;/div&gt;
					&lt;/div&gt;
					&lt;div class="swiper-slide"&gt;
						&lt;div class="container"&gt;
							&lt;div class="slider-caption"&gt;
								&lt;div&gt;
									&lt;h2 data-animate="zoomIn"&gt;Testo da definire&lt;span&gt; e modificare&lt;/span&gt;.&lt;/h2&gt;
									&lt;p class="d-none d-sm-block" data-animate="flipInX" data-delay="500"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;br&gt;Consectetur necessitatibus placeat.&lt;/p&gt;
									&lt;!--&lt;p class="d-none d-sm-block" data-animate="zoomIn" data-delay="500"&gt;Care for your Loved Ones from the Experts in the Medical & Hospitality Industry.&lt;/p&gt;--&gt;
								&lt;/div&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;!--&lt;div class="swiper-slide-bg" style="background-image: url('demos/medical/images/slider/adobe_bambini2.jpg');"&gt;&lt;/div&gt;--&gt;
						&lt;div class="swiper-slide-bg custom-hero-bg"&gt;&lt;/div&gt;

					&lt;/div&gt;
				&lt;/div&gt;

			&lt;/div&gt;

		&lt;/div&gt;
	&lt;/section&gt;&lt;!-- #slider end --&gt;
SSemicolon WebSTAFFApr 9, 2021

Hello,

The codes appear to be correct and should work fine. Please provide us with the updated Live URL so that we can check out the exact issue and provide you with more assistance on this. 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.

SSemicolon WebSTAFFApr 10, 2021

Hello,

The Image you have defined in your css/custom.css File does not exist: https://www.dentarius.it/htmlde1/css/demos/medical/images/slider/11.jpg . The CSS should be this:

.custom-hero-bg {
	background-image: url('../demos/medical/images/slider/11.jpg');
}

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.

Rrofo62Apr 10, 2021

I apologies for my typo.
Now it works perfectly !
Thank you very much !
Best regards,
Roberto

SSemicolon WebSTAFFApr 12, 2021

Hello,

Very Happy to Help!

Do let us know if we can help you with anything else.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard