Layout issue with RevSlider

[colibriinteractive]

Hello, I’ve already send an support request via email on 19 Feb but haven’t received an answer jet. So here’s the question again:

I have an issue with the slider on the page: http://adsquare.com

The four lines of text on the slider are positioned 50px from the left on the x axis. But even when I set them to 0 pixels from left they do not align left with the logo.
Any ideas how to fix that?

Secondly, is there a way to set them aligned with the logo (0 pixels from left) but have then not “sticked to the left screen border” on smartphones? That’s the only reason I use the 50px currently, but it’s ugly on desktop devices.

Thanks,
Felix

[Ernesto]

Hi,
Go to your Custom CSS Section in your Theme Options Panel and enter the following code:
.tp-caption {position: absolute!important; left: 0px !important}
Let me know if that works, so we can star working on the second issue since they are related.

[colibriinteractive]

Hi,

that kind of worked. The position absolute gets overwritten by the .tp-simpleresponsive .caption, .tp-simpleresponsive .tp-caption which adds an position: absolute to the element already.

The left: 0 works but puts the headlines to the border of the browser. I reckon we need to “redefine” the frame where the headlines are positioned in?
What’s the second step you mentioned?

FYI: I added the css just via the Safari WebInspector to check them out as the page is in live mode.
When we got a version via WebInspector that works I add them to the custom css file.

Thanks in advance
Felix

[Ernesto]

Hi, what we wanted to now before aligning the text with the logo was the response in the page. To have aligned with the logo you’ll need to set it left:230px!important

Hope that works, let us know if there’s any problem!

[colibriinteractive]

This works only with the right size of the browser window. But in most cases it’s mispositioned.
I think, we need a position relative on the parent element.

Please have a look at the page http://adsquare.com and send me some css code that I can copy & past which will align the headlines of the slides always level with the logo no matter what screenwidth/browserwidth/device I use.

Thanks!
Felix

[Nexus]

See whether these steps helps:

Navigate to the Revolution Slider that you have created and click on the “Settings”.

In the “Grid settings” set the grid width to 1140 pixels (Right now I think you have it as 960 pixels)

If this doesn’t help please reply here as a private message with a login to your dashboard and I can take a look. Thanks!

[Nexus]

And also remove any css that you have put in custom css regarding this issue.

[colibriinteractive]

Hi,

the change of the grid size to 1140 works good for the positioning of the headlines and the desktop version but on the mobile version (probably everything smaller 1140px) the headlines are sticking right at the left screen border now.

http://www.adsquare.com

How can I adjust that?

Thanks
Felix

P.S.: I’m unfortunately not allowed to grand backend access to other people. But if you tell me what settings you want to see I can send you screenshots of the current settings.

[Nexus]

I see that you have setup the second and third slide properly and works fine even in the mobile resolution. The problem is only with the first slide. So just replicate the settings from the second slide to the first slide.

[colibriinteractive]

Unfortunately not. The first slide is positioned 0 for the horizontal x-axis but is is too far left of the logo on desktop browsers and sticky to the border of the screen on mobil devices.

The headline of the second and third slides are to far left on desktop browsers but look better on mobile devices.

This is do demonstrate you the pitfall…

How can I tell this rev slider to position the headlines horizontally at position 0 for desktop and 50 for all other devices???
I thought this is a premium theme/3rd party slider plug-in but constantly working on the slider sucks…

Thanks for your assistance
Felix

[Nexus]

This reply has been marked as private.

[Author]

Posts