Layerslider text position not responsive - Support | Kriesi.at

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
December 3, 2015 at 1:02 pm #546369

mikemurphy10
Participant

Any ideas how to fix the issue with text alignment on mobile/tablet devices ? The text is too small and the alignment is wrong.

https://www.dropbox.com/s/okqsspwrld6frej/SBCimage1.png?dl=0 – Correct layout
https://www.dropbox.com/s/h8rvm3lohk95t6k/SBCimage2.png?dl=0 – Wrong layout – not responsive
Site is at http://www.stourportbc.co.uk

December 3, 2015 at 5:34 pm #546533

Elliott
Inactive Moderator

Hey mikemurphy10!

You probably have the layer set to display on the left as a percentage when it needs to be a pixel value. Send us a WordPress login and we’ll take a look.

Cheers!
Elliott

December 4, 2015 at 12:41 pm #546923

mikemurphy10
Participant

Thanks Elliott. We have all the text elements as a pixel value already.
Perhaps you can take a look, login details below
thnx

December 4, 2015 at 7:35 pm #547236
Elliott
Inactive Moderator
Hi!

Sorry, I got my words mixed up but that’s what I meant. You need to use percentages instead of pixel values. I set the first one to 20% so you can see how it’s done.

Regards,
Elliott
- This reply was modified 8 years, 11 months ago by Elliott.
December 4, 2015 at 9:32 pm #547275

mikemurphy10
Participant

Ok, so i tried that but nothing changes. I can see what you mean about % and px however.

You can see how it doesnt change by resizing the browser window. Doesnt work in an ipad also.

December 4, 2015 at 10:34 pm #547287

Basilis
Inactive Moderator

Hi!

Question for you, do you know how to use media queries?
Solution would be to load a different for size, for every screen
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

take a look here and let us know after trying, if you steal deal with any issues

Cheers!
Basilis

December 7, 2015 at 4:30 pm #548070

mikemurphy10
Participant

Sorry Basilis, dont even know where to start with that !

December 8, 2015 at 7:07 pm #548957
Andy
Inactive Moderator
Hi!

try this code in Quick CSS for desktop:
```
.ls-l {
left: 40px;
}
```
and adjust as needed.

For mobile you need to add some media queries, like this for example:
```
@media only screen and (max-device-width: 736px) {
.ls-l {
left: 40px;
}}
```
Cheers!
Andy
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.