Jump to content
marshallsolutions

Features Text Not Responsive

Recommended Posts

marshallsolutions    1
marshallsolutions

In testing features slides that have a video embed along with text on the right or left do not show correctly when viewed on a mobile device in portrait or landscape mode... The text gets pushed under the video by around 90% so very few letters from the text actually show... also tested putting the text under the video in which case on a mobile device the text is completely under the video and not visable... I have tested this with both the old embed code/object and the new embed code/iframe and both do the same thing regarding text... also if i use the old embed code, the video jumps and bounces on the mobile device instead of being steady like with the new embed code using iframe... i'm using a Samsung Galaxy S2 phone for testing running Android 2.3.3... page being used for testing is http://marshallsirishpub.com/photo-gallery/ ... thanks


Larry Marshall

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi Larry,

You can see how it acts by simply resizing your browser window on your desktop/Laptop. Anyway, I don't believe this is a bug, as I haven't ever seen a Slider than contains text and a video which is responsive. Responsive Video sliders usually do not contain text, really what should happen imo, is that when you choose to add a video, the ability to add text to the Feature Slider should be removed or not shown even when text has been added.

If you can provide a link to example, I will report this issue as a feature enhancement.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

I'm fine with the text not showing on a mobile device... however it just doesn't look good for a few letters to show... i agree with you that since the text part cannot be responsive, then it should have code that removes the text in responsive mode so that it looks more clean on a mobile device... however from an asthetic standpoint, it does look better in a browser when it has text on the left or right IMO... if the text is on the bottom, then the text is not shown on a mobile device... but i prefer the text on the left or right in my example... i provided a link for example in the original post above...


Larry Marshall

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

Danny, I also tested just now your idea of changing my browser size on my laptop... it did not behave the same way as on my phone... the text moved to the bottom of the video instead of the left or right... on the phone it does not do that... it puts over 90% of the text under the video leaving only 10% or less text showing


Larry Marshall

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, as we've been discussing this via email I thought it would be better to tie it up here in the forum as it could help other users in the future.

When you set the slide to display on the left or right, the media container which the video sits inside is given a percentage width. When in a responsive set up the slider reduces but the css still has the percentage command inside, depending on the ratio you've set up or the choice of layout options made in the layout editor the results can either cause the text to go below the slider, leaving a gap at the side, or under the slider leaving the text peaking out from under the slider.

In order to combat this I took your video and tested it in a responsive layout and used some browser specific css to change the options for the layout in a mobile layout. Results are below

Desktop version - http://screencast.com/t/udna8HMLKnry

Mobile version - http://screencast.com/t/qksp0V0Te

The setup i have in the above is as follows.

  • Layout editor: Responsive with pixel width and fixed width mode
  • I've inserted the PL responsive video code into the Feature HTML embed box in the slider setup. The responsive video code is [pl_video type="youtube" id="NbpZvO7Eb6o"]
  • I add the below custom css to the custom code box in Pagelines>Site Options>Custom code so that it only affects mobile devices.


@media screen and (max-width: 600px) {

  .responsive #page #feature_slider .fcontainer .fcontent {

    float: none;

    position: absolute;

    bottom: 0px;

    left: 0px;

    z-index: 200;

    width: 100%;

    height: auto !important;

    display: inline-block;

    -webkit-backface-visibility: hidden;

  }

  .responsive #page #feature_slider .fmedia {

    width:100%;

  }

}

Try it, I hope it works for you :)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

HI James... that worked perfectly for the built-in Android browser along with Dolphin and Maxthon browsers... however Firefox and Opera still have issues... in Firefox, if you click on video #2, the text changes to that of slide 2, but the video picture is still that of slide #1... it doesn't change... if you click play on the video, the 2nd video plays audio wise, but you're still looking visually at the first slide video, meaning you can hear the slide #2 video but you can't see it... same goes for #'s 3,4,5 as well on my page example... in opera for android, instead of showing numbers like the other browsers to scroll to the next slide, it simply lines up all the videos down the page so all are visable at one time... also in Opera, the carosel nextgen gallery doesn't not show at all from the top of the page... in firefox, the nextgen galley does show but they are stretched like a vertical rectangle... :)


Larry Marshall

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

James... I just checked Opera on my laptop, and the code looks like it's affecting opera as the video is scaled to about 25% of the height of the features box...

opera_not_playing_well.jpg


Larry Marshall

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

James... safari on the laptop also has issues... when you click from slide one to slide 2, the video doesn't change... by the time i got to slide 4 the videos started piling on top of each other...

safari_not_playing_well.jpg


Larry Marshall

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

James... i couldn't afford to have my site not working in so many different browsers, especially desktop ones... so i put everything back the way it was before... i changed the videos back to normal embed code and made them full html width with 16:9 (1.777) ratio... this of course means no text anywhere, which i can live with i guess... i didn't realize it was going to be so much work just to get a feature slider to work correctly... all browsers on the desktop are fine except safari... changing the videos using the numbers doesn't work... it still only shows the first video... same applies to firefox and opera on android... however the built-in browser, dolphin and maxthon on the android are working ok... so i guess let's tackle the issue as it is now as hopefully this route will be less work... :)


Larry Marshall

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

safari on the desktop is very messed up related to the features video... if you click on numbers 2 thru 5 and then try to play the video it plays the first video, but moving your mouse around the screen the feature video goes whack... then if you try to scroll up and down the screen, the feature hangs in the middle like a window on top of the website... :(


Larry Marshall

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

@catrina... why would a plug-in only affect the safari browser on a desktop when all other browsers display correctly?... the only plug-ins i have outside of pagelines ones are sitemap generator and all-in-one-seo which don't affect css stuff... also i have nextgen which you guys recommend for your theme and which i use for the carousel on the same page...


Larry Marshall

Share this post


Link to post
Share on other sites
catrina    103
catrina

Plugins have a way of causing issues in either one or more browsers. It's best to deactivate just in case before moving along.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

@catrina... i just deactivated everything except pagelines ones including nextgen... safari still acts the exact same way... it's not a plug-in


Larry Marshall

Share this post


Link to post
Share on other sites
Rob    547
Rob

Larry,

If by chance one of the plugins you have is a cache plugin, and the cache wasn't cleared before deactivation, it remains, so any changes you apply don't show up.

Unfortunately, we do not support the variations different browsers can cause because there are so many. For example, we use shadows on various elements, but IE doesn't accept those at all.

So, Catrina's suggestion was very much in order as a testing methodology.

Because there are so many variables between browsers, we offer, free, a plugin called Browser Specific CSS which allows you to customize your CSS to accommodate these variables.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
James B    436
James B

I've just seen your previous message. Yes it will be easier to leave things set to display using the full screen option rather than edit the css etc. Make sure you've removed the css from Pagelines>site options>custom code if you pasted in the example i showed you though.

I've viewed your site in safari and the videos seem to be displaying fine in there, I'm not experiencing the same problems. Are you on the latest edition of the browser?


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

@rob... i do not have a cache plugin... I have never heard a company in the webdesign industry say we don't support all browsers... although i can see this for some "no name" browser, safari is a major browser... if you don't test your sections for the major ones, then there should be a disclaimer on your site that shows the browsers that you did do testing on IMHO... the shadow example just means it doesn't show, but it doesn't make the section display incorrectly in IE that I have seen... I would have no idea how to write custom css specific to a browser since i don't know what that browser is looking for to make a features section display correctly... if it can't display properly on all major browsers, then i will have to find another method of displaying videos...

@james... yes i did remove the css you provided in order to fix the issue with opera as posted above... i'm on safari for PC (not MAC) version 5.7.1... i'm assuming that is current since my apple update program usually downloads anything more current... the first video displays fine (#1)... the issue happens when you try to go to the other slides via the numbers and then play them... this also happens on firefox for android and opera for android... try to play video 1... then pause video 1... then go to video 2 and try to play it... same with videos 3,4,5... you should experience what I see in Safari... like right now, my button shows #5 and the screen shot matches, but if i click the play button, it's playing video #3... after this try to scroll up the page and the feature should hang in the middle like a window on top of the page...


Larry Marshall

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

I have tested your Feature Slider on Safari (Mac) and there is no issue. I am unable to test Safari on Windows.

  • Do these errors occur on any other browser on Windows ?
  • What version of Windows are you using?
  • Does your Safari have any addons installed ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

@danny... glad to hear mac is working since that is where most safari users will come from... im using a win7 64bit OS i7 processor with 4gb RAM... safari is plain vanilla... no add ons...


Larry Marshall

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

@danny... sorry missed your other question.. tested on IE, firefox, chrome and opera... no issues on those browsers... only safari is having issues...


Larry Marshall

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

This sounds like it may well be a bug in the Windows version of Safari. However, as I am unable to check this issue personally, I think the best thing to do, would be to wait for one of our other team members who use Windows and see if this is happening for them too.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

well, it's a very similar issue with 2 android browsers... both firefox and opera for android are experiencing a similar issue when switching between the slides...


Larry Marshall

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

ok... more testing done... i guess safari for PC doesn't like the new embed code from YouTube using iframe... the old embed code using /object now works fine on safari for pc... so now the only issues i have are related to android... on the built-in android browser, the features video flickers, jumps. bounces (whatever you want to call it) using the old embed code.. it does not do that with the new embed code... also firefox for android will not change videos when clicking the numbers.. it stays on video #1...

Another thing i don't like about the old embed code is on the PC browsers... with the new embed code the screen shot before playing is full html width since i have the check box checked in features... but the old embed code ignores that setting and only has the features box itself full width.. the video sits to the left... looks horrible IMO...

so it seems that the features section has tons of issues related to different browsers although I think it's a very cool section and feature, it requires a ton of work and testing to see what you can get to work or not... :(


Larry Marshall

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

lastly... unchecked full html width to allow text to appear under the videos... looks better... still works in safari for PC... still flickers on built-in android browser... still firefox for android won't change to the next video after clicking other numbers...


Larry Marshall

Share this post


Link to post
Share on other sites
marshallsolutions    1
marshallsolutions

another lastly... if i uncheck the full html width, the android built-in browser will no longer play videos... clicking the big play button in the middle of the video doesn't do anything... nor does the small play button lower left corner... so i'm getting no where very fast... LOL


Larry Marshall

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


  • Similar Content

    • flaxpits
      By flaxpits
      Is there a way to use the whole image in the feature slider as a link? I have searched the forum and noticed in 2011 this was posted and the reply was no. Has anything changed in 4 years?
       
    • dfsdafd23
      By dfsdafd23
      I'm using features on the landing page of my website. My issue is that when the page loads the feature slider will resize itself every time. I've tried to tinker around with the layout of the site (static, responsive, %, px) and with the source images (not to big, the actual size) but it doesn't help. Any tips? 
       
      Here's a video of how it looks:
       
      https://dl.dropboxusercontent.com/u/766689/Features.mov
       
       
      Website URL: test.andersaagesen.dk
      Framework Version: 2.4.4 w. child theme
      WordPress Version: 4.2.1
      Plugins in Use: simple css lite, pagelines security patcher, contact form 7, backWPup
      Server/Host: unoeuro.com
    • chambermv
      By chambermv
      The features images are not displaying properly. The first image is blank and the second displays this script: if (document:)document.getElementbyld("divcb6b4a52").style.height = (441-440)+"px";
       
      There should only be 8 images to display, but it adds two images before that are blank and have that text I indicated.
       
      Website:
      http://chambermv.org/
       
      Platform Pro
    • avstrati
      By avstrati
      Hello 
       
      We've recently added the top rated Word Press translation tool WPML to our Website in order to translate our site into a second language. Everything worked like a charm, except one thing: the PlatformPro features. 
       
      Our home page was designed in English with the features slider and some text, using what is now the Select Feature-Set for Posts & 404 Pages option so that we could custom create our features. The features are tagged as default-features so that they may be selected to appear in the scroll. The thing is, we cannot translate them. 
       
      Can someone please help me figure out a work around please?
       
      Many thanks
      Kristina
    • vicdesotelle
      By vicdesotelle
      see of feature slider at http://wildbeyondexpeditions.com/ 
       
      1- how do i change position of feature slider text from left side to bottom of each pic? 
       
      2- how do i change font size of feature slider text? 
       
       
×