Problem with text alignment beside youtube video when resizing window

  • Resolved ivanivanivan23

    (@ivanivanivan23)


    9 years, 9 months ago

    Hi!

    I am working on WordPress with the Awaken Theme.
    I have added you tube videos with a brief description of each on it’s right by using the following code (this is an example):

    <p style=”float: right; width: 30%;”>TEXT GOES HERETEXT GOES HERETEXT GOES HERETEXT GOES HERETEXT GOES HERETEXT GOES HERETEXT GOES HERETEXT GOES HERETEXT GOES HERE</p>

    <div id=”VIDEO” style=”width: 480px;”><iframe src=”https://www.youtube.com/embed/0Egm8jnhKs8&#8243; width=”480″ height=”270″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>

    Everything works perfectly on both Chroma and Safari, however the problem start when checking the websites on mobiles or ipad as the text just moves above the video and stays on its right, doesn’t look good at all. Is there a way I that when the window gets resized the text keeps staying on the right side of the youtube video?

    Thank you for your help ??

Viewing 2 replies - 16 through 17 (of 17 total)

  • Hi, sry for the late response. Wrap the text p and video-container into another div .video-text-wrapper and apply the following styles.
    New markup:

    <div class="video-text-wrapper clearfix">
  <p></p>
  <div class="video-container"></div>
</div>

    Styles:

    .video-text-wrapper {
  min-width: 400px; (you can change this ofc)
}

    Thread Starter ivanivanivan23

    (@ivanivanivan23)

    Thank you so much!!! you are a genius!!! i applied the changes and they are working well now!!! as soon as i have a minute i will update all the videos on the site, will take me quite a bit of time, but that’s ok ??

    Thanks again!

Viewing 2 replies - 16 through 17 (of 17 total)
  • The topic ‘Problem with text alignment beside youtube video when resizing window’ is closed to new replies.