• 0
Sign in to follow this  
Followers 0

RevSlider Title Offscreen Responsive


Question

Posted · Report post

While we are on the Rev Slider - I have just had a go with it and as soon as it goes below iPad size the responsive ' Title ' goes too far right and you can't read it.  Is this something that comes standard?  

 

I am happy to CSS it but I assumed it would come readable as standard for mobile devices.  Please see here for what I mean http://screencast.com/t/b2ikAdysb2E

 

Thanks

R

Share this post


Link to post
Share on other sites

4 answers to this question

  • 0

Posted · Report post

Hi,

 

This isn't happening for me, the text repositions and resizes itself as intended.

 

http://cl.ly/image/343N2i0q3f2U

http://cl.ly/image/2w0r2F0t3C2h

Have you added any custom CSS at all, if so try removing it as it may be having an effect of the RevSlider title.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there,

 

I was having the same issues as you're describing, and I've come up with a solution! 

I had to manually move the element along data-x until I found a position that worked best for me. Play around with this code by adding it  to the [b]Slide Extra Elements[b] field on the RevSlider edit screen.

<div class="caption slider-content right-side sfr str"
					 data-x="460"
					 data-y="130"
					 data-speed="300"
					 data-start="500"
					 data-easing="easeOutExpo"  >

						<h2>
                                                   <span class="slider-text">
						       YOUR DATA HERE
                                                   </span>
                                                </h2>
					 	<a href="#" class="slider-btn">Here's a Button!</a>

				</div>

Please let me know if there's anything else I can do to help!  :)

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Hi there,

 

I was having the same issues as you're describing, and I've come up with a solution! 

I had to manually move the element along data-x until I found a position that worked best for me. Play around with this code by adding it  to the [b]Slide Extra Elements[b] field on the RevSlider edit screen.

<div class="caption slider-content right-side sfr str"
					 data-x="460"
					 data-y="130"
					 data-speed="300"
					 data-start="500"
					 data-easing="easeOutExpo"  >

						<h2>
                                                   <span class="slider-text">
						       YOUR DATA HERE
                                                   </span>
                                                </h2>
					 	<a href="#" class="slider-btn">Here's a Button!</a>

				</div>

Please let me know if there's anything else I can do to help!  :)

Thanks a lot for this, I was able to align the text the way I want it.

 

But I still have a problem, the text is not responsive so it goes all the way off screen.

Is there a way I can align the text like this?:

Text 1
Text 2
Text 3
Text 4
Text 4

 

Aligned to right or left side.

 

Thanks a lot!

 

 

Edit:

 

I just found out another problem, how can I make the button functional? I don't know how to use it as a proper link.

 

Thank you!

Edited by omarmtz

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

omarmtz,

 

try using <br> between lines to break them up. Below is a snippet of the code I shared above, with that example:

<span class="slider-text">
    Text 1<br>
    Text 2<br>
    Text 3
</span>

 you might have to play with the positioning using the numbers labeled "data-x" & "data-y" in that code to get it to look right. I haven't tested it, but you should be able to replace right-side with left-side in the div class at the top.

 

---

 

To make the button functional, edit the "#" in the anchor to the web page of your choosing. Example here:

 

Before:

<a href="#" class="slider-btn">Here's a Button!</a>

After

<a href="http://www.moxyt.com" class="slider-btn">Visit my webpage!</a>

Let me know if you need any more help with any of this  :thumbsu:

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0