Canvas Support

Parallax fit to screen

1 reply · opened Nov 1, 2023

KkateboothbyNov 1, 2023

Hi, how do I make this picture fit to the screen - so it doesn't get bigger with the size of the screen? I'm struggling with this across my site.

`<!-- Slider
============================================= -->
<section id="slider" class="slider-element min-vh-100">
<div class="slider-inner">

			&lt;div class="section dark parallax scroll-detect h-100 position-absolute p-0 m-0 border-0 "&gt;
				&lt;img src="pics/team/award-winning-self-catering.jpg" class="parallax-bg" alt="Award Winning Self Catering"&gt;
				&lt;div class="vertical-middle"&gt;
					&lt;div class="container text-center"&gt;

						&lt;div class="emphasis-title"&gt;
							&lt;h1 class="fw-semibold ls-4 text-uppercase mb-4" style="font-size: 48px;"&gt;Meet Our Team &lt;/h1&gt;
							&lt;p class="lead"&gt;We are an Amazing bunch.&lt;/p&gt;

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

				&lt;div class="video-wrap"&gt;
					&lt;div class="video-overlay" style="background: rgba(0,0,0,0.8);"&gt;&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;

		&lt;/div&gt;
	&lt;/section&gt;&lt;!-- #slider end --&gt;

`

SSemicolon WebSTAFFNov 4, 2023

Hello,

Thanks for your Patience!

This is due to the .min-vh-100 Class. You can change this to a different Height Utility Class like .min-vh-60 or more Height Utility Classes: https://docs.semicolonweb.com/docs/utility-classes/heights/ according to your needs. You can also set different Height Utility Classes on different devices.

Hope this Helps!

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

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