Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Features Text Not Responsive


Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

26 answers to this question

Posted · Report post

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...

Share this post


Link to post
Share on other sites

Posted · Report post

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... :(

Share this post


Link to post
Share on other sites

Posted · Report post

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...

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

@marshallsolutions Can you please post your issue in a new topic?

Share this post


Link to post
Share on other sites

Posted · Report post

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 :)

Share this post


Link to post
Share on other sites

Posted · Report post

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... :)

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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... :)

Share this post


Link to post
Share on other sites

Posted · Report post

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... :(

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

Have you already tried deactivating plugins?

Share this post


Link to post
Share on other sites

Posted · Report post

@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...

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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...

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

@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...

Share this post


Link to post
Share on other sites

Posted · Report post

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 ?

Share this post


Link to post
Share on other sites

Posted · Report post

@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...

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites