Jump to content


Photo

slider text on mobile device


  • Please log in to reply
9 replies to this topic

#1 anet

anet

    Advanced Member

  • Members
  • PipPipPip
  • 34 posts
  • Country: Country Flag

Posted 11 April 2013 - 05:47 PM

Hi, hope you all are having a good day.

 

I've been working away on my site, and today remembered to check it in mobile view. So fired up my iphone, and see this on the home page.

 

 

 

 

For some reason the text overlay goes under the menu bar. Anyway to fix this? 

 

By the way, it looks this way whether or not I check the box "disable mobile view".

 

 

Main site url: www.lightoflearning.org

 

Thanks for your help!



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 April 2013 - 08:03 PM

Hi there, have you added any custom css to that part of the slider? Anything set with a static px height, or set the font size etc?



#3 anet

anet

    Advanced Member

  • Members
  • PipPipPip
  • 34 posts
  • Country: Country Flag

Posted 11 April 2013 - 08:05 PM

Ok, I figured out a workaround. I changed all the text to be left/top or right/top. It's better than before, but now it covers up the button slide control. So I changed those settings to use both arrows and slide control for viewing sliders.

So, now, I'd like help on a new issue:

 

There is a big gap between the bottom of the slider/text section and the next section, as seen here in this screenshot:

 

 

Any suggestions on how to decrease that gap?

 

Thanks!



#4 anet

anet

    Advanced Member

  • Members
  • PipPipPip
  • 34 posts
  • Country: Country Flag

Posted 11 April 2013 - 08:08 PM

Hi there, have you added any custom css to that part of the slider? Anything set with a static px height, or set the font size etc?

Hi, James, no I have no custom css to sliders. 

I only have some css for site background, boxes, and brand nav. I'm also just using the defaults for Typography in Site Options.

 

Thanks!


Edited by anet, 11 April 2013 - 08:09 PM.


#5 anet

anet

    Advanced Member

  • Members
  • PipPipPip
  • 34 posts
  • Country: Country Flag

Posted 11 April 2013 - 08:53 PM

It seems strange that, being a responsive design, the pagelines slider with text just doesn't look good on a mobile phone.

 

It looks great on iPad, or on an iPhone turned sideways. However, many of my international colleagues will have non-iPhone mobile phones that you can't turn sideways.

 

That's why I chose pagelines, because of it's responsive design. Which, by the way, works super great all over the site!

 

Just would be nice to find a way to make the sliders look good if text is added to them. Cheers!



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 April 2013 - 09:12 PM

Hi again, 

 

The feature slider only has the option for text on the left/right or bottom, is that what you mean you selected when you wrote left/top?

 

When I checked on my slider, the text goes from the left setup to the bottom of the screen on the mobile view - http://content.scree...d9/00001049.png

 

I have the site set to responsive with pixel width and fixed width mode in the layout editor, just in case you want to compare with your settings.

 

If you disable any third party plugins as a test, does it have any effect on the slider text.



#7 anet

anet

    Advanced Member

  • Members
  • PipPipPip
  • 34 posts
  • Country: Country Flag

Posted 11 April 2013 - 09:29 PM

Hi again, 

 

The feature slider only has the option for text on the left/right or bottom, is that what you mean you selected when you wrote left/top?

 

Hi, James, 

 

Sorry, I am using Quick Slider, which I put in via Drag & Drop. I added the images and text within the Page Meta Settings section of my Home Page. There they have 4 options for text: Right/bottom, Right/top, Left/bottom, Left/top.

 

Feature Slider is not an option for me, it appears to be used with featured images linked to specific blog posts. Not what my site does.

 

If you could have a try with the Quick Slider and see if there is anything you want to guide me in, let me know!

 

Thank you!


Edited by anet, 11 April 2013 - 09:37 PM.


#8 anet

anet

    Advanced Member

  • Members
  • PipPipPip
  • 34 posts
  • Country: Country Flag

Posted 11 April 2013 - 09:46 PM

So, now, I'd like help on a new issue:

 

There is a big gap between the bottom of the slider/text section and the next section, as seen here in this screenshot:

 

Any suggestions on how to decrease that gap?

By the way, I figured out how to decrease the gap. The gap is there because the the Quick slider section is in the Page Template portion in the Drag&Drop Template Setup I used for my home page. And the Hero section I had put in the footer portion of all templates. So I added another Hero section into the Page Template portion of this particular Template. Then checked 'hide Hero' in the footer section of the Home page itself. Because in the end, the Quick Slider and the Hero were both in the Page Template portion of the page, the gap disappeared. Yay!


Edited by anet, 11 April 2013 - 09:46 PM.


#9 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 April 2013 - 11:11 PM

Hi there, glad you got it sorted, Yes mine is also doing the same if I switch over to quickslider. I'll look into what's happening and post back



#10 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 April 2013 - 02:45 AM

Ok looking into the set up of the quickslider,  the quickslider fills the container it's placed inside (like page content area) based on the original dimensions of the image. How much text you can put inside and then have it display on a mobile screen depends on the amount of text and the dimensions of the image as the font doesn't re-size on the mobile view like the features slider does.

 

To get around this you could either use browser specific css to edit the font size on the mobile version or edit the width of the screen it takes over.

 

Or Place less text in the slide, or change the image dimensions so the image is taller.