How do I stretch a column to full width for responsive phone/tablet views?

Asked on August 15, 2016 in How To.

Hi, I am testing my site for tablet and phone. There is a section on the homepage that has a column of text to the left of a video. When responsive, the video stacks below the column,  but the text in the column doesn’t adjust to take up the full width of the screen.

What css do I need to fix this? Thanks!


sarahathanas Layers User
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on August 22, 2016.

    Hi there,
    This appears to only happen on portrait held tablets. My recommendation is to convert that into two columns and put text in one and the video in the other (rather than set the video as featured media of one column). This ensures the right-hand column stacks below the first on small screens, and falls into a balanced ratio on tablets.

    If you are using a custom widget or a text widget with proprietary css classes/markup, you will need to identify the selector for those columns and then add the responsive CSS to the CSS panel under Advanced using mobile media queries, or to the global CSS panel.