Issue with blurslider

chrissemAug 29, 2022

Hello,
I want to use the blurslider for a website, but I am having an issue on mobile screens which seems to be also present for the example at https://themes.semicolonweb.com/html/canvas/rs-demo-blur-effects.html.

I am using Chrome, by the way. When I minimize the width of the mobile view of the page to around 400px, the "we create solutions" text is shifted to the right (it is not aligned at the center). The more you reduce the width of the screen, the more it seems to shift (relatively).

How can I solve this issue to center the text properly?

Thanks!

SemiColonWebSTAFFSep 1, 2022

Hello,

Thanks for reporting this to us! Please find the following code:

<div class="tp-caption   tp-resizeme  blurslider-gradient"
	 id="slide-41-layer-1"
	 data-x="['left','left','center','center']" data-hoffset="['0','0','0','0']"
	 data-y="['top','top','top','top']" data-voffset="['0','0','230','110']"
				data-fontsize="['110','90','100','70']"
	data-lineheight="['100','90','100','70']"
	data-width="none"
	data-height="none"
	data-whitespace="nowrap"

	data-type="text"
	data-basealign="slide"
	data-responsive_offset="on"

	data-frames='[{"delay":"+290","speed":2000,"frame":"0","from":"y:50px;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
	data-margintop="[0,0,0,0]"
	data-marginright="[0,0,0,0]"
	data-marginbottom="[30,20,30,30]"
	data-marginleft="[0,0,0,0]"
	data-textAlign="['inherit','inherit','center','center']"
	data-paddingtop="[0,0,0,0]"
	data-paddingright="[0,0,40,40]"
	data-paddingbottom="[0,0,0,0]"
	data-paddingleft="[0,0,40,40]"

	style="z-index: 11; white-space: nowrap; font-size: 110px; line-height: 100px; font-weight: 400; color: rgba(255, 255, 255, 1.00); display: inline-block;font-family:Poppins;">we create<br/>solutions. </div>

and replace it with:

<div class="tp-caption   tp-resizeme  blurslider-gradient"
	 id="slide-41-layer-1"
	 data-x="['left','left','center','center']" data-hoffset="['0','0','0','0']"
	 data-y="['top','top','top','top']" data-voffset="['0','0','230','110']"
				data-fontsize="['110','90','100','70']"
	data-lineheight="['100','90','100','70']"
	data-width="none"
	data-height="none"
	data-whitespace="nowrap"

	data-type="text"
	data-basealign="slide"
	data-responsive_offset="on"

	data-frames='[{"delay":"+290","speed":2000,"frame":"0","from":"y:50px;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
	data-margintop="[0,0,0,0]"
	data-marginright="[0,0,0,0]"
	data-marginbottom="[30,20,30,30]"
	data-marginleft="[0,0,0,0]"
	data-textAlign="['inherit','inherit','center','center']"
	data-paddingtop="[0,0,0,0]"
	data-paddingright="[0,0,40,0]"
	data-paddingbottom="[0,0,0,0]"
	data-paddingleft="[0,0,40,0]"

	style="z-index: 11; white-space: nowrap; font-size: 110px; line-height: 100px; font-weight: 400; color: rgba(255, 255, 255, 1.00); display: inline-block;font-family:Poppins;">we create<br/>solutions. </div>

This will definitely fix the issue. Hope this Helps!

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

chrissemSep 9, 2022

Hi, many thanks! Looks much better now!
chrisse