Jump to content


Photo
- - - - -

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

video

  • Please log in to reply
3 replies to this topic

#1 mmiquelon

mmiquelon

    Newbie

  • Members

  • 2 posts
  • Country: Country Flag

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

    Advocate

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

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

mmiquelon

    Newbie

  • Members

  • 2 posts
  • Country: Country Flag

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?

 

Thanks



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

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.