Jump to content

- - - - -

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


This topic has been archived. This means that you cannot reply to this topic.
3 replies to this topic

#1 mmiquelon†



  • DMS Subscriber†
  • 2 posts

Posted 05 April 2013 - 09:40 PM

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

Attached Files

#2 James B†

James B


  • DMS Subscriber†
  • 5126 posts

Posted 05 April 2013 - 10:11 PM

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.

Please Login or Register to see this Hidden Content

following the instructions and classes here -

Please Login or Register to see this Hidden Content

#3 mmiquelon†



  • DMS Subscriber†
  • 2 posts

Posted 08 April 2013 - 07:02 PM

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?



#4 Rob


    One Smart Egg

  • Members
  • 13575 posts

Posted 08 April 2013 - 10:02 PM

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.