Reply To: Before and After feature

[Support]

Hello Laurie,

You mean this type of issue ?

If yes, you have two options:

1) Increase the original image sizes with a image software editor.

or

2) Reduce the container/column size that wraps the before/after element. For example:

Change this:

<div class="row align-items-center">
	<div class="col-sm-3">

		<div class="pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light">
			<h4 class="mb-2">Default</h4>
			<p class="m-0">This is the default before / after style.</p>
		</div>

	</div>
	<div class="col-sm-9">

		<div data-plugin-before-after>
			<!-- The before image is first -->
			<img src="img/generic/generic-before-after-1-1.jpg" width="500" />
			<!-- The after image is last -->
			<img src="img/generic/generic-before-after-1-2.jpg" width="500" />
		</div>
		
	</div>
</div>

To this:

<div class="row align-items-center">
	<div class="col-sm-3">

		<div class="pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light">
			<h4 class="mb-2">Default</h4>
			<p class="m-0">This is the default before / after style.</p>
		</div>

	</div>
	<div class="col-sm-5">

		<div data-plugin-before-after>
			<!-- The before image is first -->
			<img src="img/generic/generic-before-after-1-1.jpg" width="500" />
			<!-- The after image is last -->
			<img src="img/generic/generic-before-after-1-2.jpg" width="500" />
		</div>
		
	</div>
</div>

* Note <div class="col-sm-5">.
* Note I added width="500" on images just to reproduce your issue. You can remove these width attributes.

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---