Sign in to follow this  
Followers 0

Feature text/content obscures video embed on resize w/responsive settings

4 posts in this topic

Hello- Really enjoying the framework but still getting accustomed to the way in which it is configured, please bear w/me;)


I have embedded a YouTube video in a feature and want Call To Action content floated right of the video. When resized to mobile-browser width, either the content flows vertically outside of the container or the header and text content reflows after the sub-320px breakpoint (as it should) and then obscures the video. This content represents the main call to action on the homepage and I don't see any way to rectify this except leaving the video in the feature and moving the text content into an element below the features but above the boxes. 


Any ideas or how I can add a full-width container in-between the features and boxes so the call to action is available at all widths? I tried the drag N drop to add a container but ran into a dead-end. It also appears that I must have a feature title which will flow over the video. I know I can set it to "No-Title" and just show a background image but I am using a video so that won't work.

Thanks in advance



Share this post

Link to post
Share on other sites

Hi there,


The feature slider will have it's own css set for the overlay/text which will change depending if on the desktop or in a mobile view (if set to responsive). Ff you make changes to the desktop version then you will also need to edit the css for the mobile layout to tweak it.


You can do this using browser specific css, which we have a plugin for. following the instructions and classes here -

Share this post

Link to post
Share on other sites

Thanks James - If I understand correctly, the only way to override the default behavior and keep the required feature-title header element from overlapping a video embed at mobile browser widths is to edit the desktop and mobile stylesheets or use the browser-specific plug-in to target browsers individually?


If I update the PageLines framework down the road, will these CSS changes be overwritten?



Share this post

Link to post
Share on other sites

Hi, to answer your first question, yes, but I recommend the plugin. 


To answer the second question, the CSS should be written to either a child theme, the PageLines Customize plugin or, to the CSS area of Dashboard > PageLines > Site Options > Custom Code. In any of these locations, custom CSS will not be overwritten, even if you upgrade PageLines Framework.

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
Sign in to follow this  
Followers 0

  • Similar Content

    • Can I remove the play button that appears on canvas area background images on mobile?
      By crose+
      I am using the Canvas Area section at the top of my site. I have a video playing in the background, which works really well on desktop. But on mobile video doesn't play without user interaction, so I have a static image in place as an alternate image. However when viewed on a mobile device there is now a play button over the static image that does nothing. This didn't use to happen so I imaging it is due to an upgrade. But this is really bad UX. Is there a way to remove it?
      Here is the site:
      Thanks in advance.
    • Video Background
      By Matt C.+
      So I used to use the Video Background extension that was offered here on pagelines, but until recently it continued to function.  Yesterday however it ceased to work and since it has been removed and no longer supported I've been forced to find a new way to show the youtube video that used to be on my background.
      I know that there is the option to upload videos for background, needing both an mp4 and ogv version.  However, since this is a youtube video I don't have any source files to upload.
      I have since turned to using the mb.YTPlayer wordpress plugin.  It seems to be working just fine on its part, as you can see a sliver of it playing just below my footer.  My issue though it that it doesn't show up behind my main body content.  Now it was my understanding that the backgrounds were defaulted to transparent in DMS2 and that this shouldn't be happening.  I've tried several CSS transparency codes to no avail, so my question is how am I able to get the video that is showing up right beneath the footer in other areas?  Either on a section by section basis or for the entire body?
    • Powerloop layout w/ video
      By clj182+
      I'm having trouble getting my Powerloop layout the way that I want...
      I'd like to have the same layout as the question below but instead of an image I'm using video.
      I have my media shortcode above everything but the title is still above it in my page and when I inspect it.
      My settings:
      [powerloop_title class="plHtxt" align="center"] 
      [powerloop_content class="plHContent" align="left"]
      [powerloop_author class="plHauthor" align="left"] | [powerloop_date format="F j, Y"]
      Another problem I am having is that I cant create space between the video and the content..If i add padding or an margin to my content class it adds that spacing to the video as well.
      Any ideas on how I can fix this?

    • multimenu mute video
      By kdeif
      Hello, I am using multimenu with a video background and would like to mute the audio of the video, and even better to be able to have a mute button. Thank you kindly
    • Video background not working on the ipad but OK on desktop
      By nfp1900
      Has anyone had an issue with straightforward mp4 video added to a section background not working on the ipad but ok on other desktop browsers? I checked the docs and there is no information on this subject at all.
      It appears to be an issue with mime types and .htaccess rather than encoding. 
      Does anyone have guidelines for a successful implementation?