Issue with blurslider

CchrissemAug 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!

SSemicolon WebSTAFFSep 1, 2022

Hello,

Thanks for reporting this to us! Please find the following code:
[ch_pre]<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;"&gt;we create&lt;br/&gt;solutions. &lt;/div&gt;[/ch_pre]

and replace it with:
[ch_pre]<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;"&gt;we create&lt;br/&gt;solutions. &lt;/div&gt;[/ch_pre]

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.

CchrissemSep 9, 2022

Hi, many thanks! Looks much better now!
chrisse