Tips for creating text that adjusts to different screen sizes within a div

I am trying to ensure that the height on the left side matches the height on the right, so it's important that it looks good on various devices like tablets, PCs, etc. However, when I resize my browser window, the video on the right side shrinks while the text on the left remains unchanged.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row" style="background-color:lavender;">
      <div class="col-sm-9" style="background-color:lavender;">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="http://youtube.com/embed/BG9rW-hYikw?autoplay=1&loop=1&playlist=BG9rW-hYikw" allowfullscreen></iframe>
        </div>
      </div>
    <div class="col-sm-3" align="middle" style="background-color:lavender;">
      <div id="header">
        <img src="https://lh5.googleusercontent.com/-zeb_mXjp28c/VCoaTmC6JmI/AAAAAAAADuQ/wUXv4gILN_s/w1043-h225-no/30-logo-freecyberscom-baru.png" height="50" /><p><br></p>
      </div> 
      <div>
        <marquee direction="up" behaviour="scroll" scrollamount="3" height="474px">
        <ul>
          <li><strong><p align="justify">I was wondering if it's possible</strong> to create HTML Rolling Credits in a website. If so, how do I need to do? Thanks</p></li><br/>
      ...
        </ul>
        </marquee>
      </div>
    </div>
    <div class="row" style="background-color:lightblue;" width="1024px">
      <img class="img-responsive" src="C:\Users\hendra\Downloads\logo2.jpg" height="500px">
    </div>
  </div>
</body>
</html>

javascriptjqueryhtmlcssresponsive-design

Answer №1

Ensure the text is displayed in em units instead of px, and the parent div for marquee should use percentage units.

What prompted you to set the height to "474px"? It may not be required.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the common reasons for ajax requests to fail?

Every time I try to run the code with the provided URL, the alert() function in the error: function is triggered. Can someone please assist me with this issue? $("#button").click(function(){ $("#form1").validationEngine(); if($('div input[typ ...

phpjavascriptjqueryhtmlajax

Leveraging a common element throughout various partial views

In my ASP.Net MVC 3 application, I have various controllers and actions that display pop-up dialog windows for user input. One important aspect of these dialogs is the faded mask that appears behind them. Each dialog window control resides in a separate P ...

htmlasp.net-mvc-3partial-views

JavaScript Subscribe / Unsubscribe Button

I am trying to create a simple JavaScript program that allows users to like and dislike content. However, I am new to JavaScript and finding it a bit challenging. Basically, when the user clicks on the Follow button, the "countF" variable should increase ...

javascripthtmlcssarrayslinux

Angry Librarians Uncover Secret to Incrementing Variable in Angular.js

Check out my HTML snippet: <div ng-app='app'> <div ng-controller="MyController" ng-init="myVar=7"> {{myVar}} <span ng-init="myVar=myVar+5">{{myVar}},</span> <span ng-init="myVar=myVar+15">{{myVar}},</ ...

javascriptangularjs

I am experiencing difficulty with the display of the elements within my <li></li> tags on both the browser and in the inspect elements section. Strangely, only my <ol> tags are showing up properly

I'm having trouble with the display of elements in my list items () on the browser. When I inspect the page, only the paragraph tags show up and the total value is also not being displayed. However, I can see the items in the birdInCart array when I c ...

javascripthtmlreactjsdebuggingjsx

Tips for creating animations using parent and child components in Angular

Despite my best efforts, it seems like this should be functioning properly... but unfortunately it's not... I'm attempting to achieve a transition effect on the parent element (ui-switch-groove) while the child element (ui-switch-dongle) moves. ...

javascriptangulartypescriptanimation

What is the process for utilizing "yarn create <pkg-name>" command?

While browsing the Yarn blog, I came across a feature that caught my attention - yarn create. This function is similar to create-react-app. https://yarnpkg.com/blog/2017/05/12/introducing-yarn/ I decided to give it a try on my local machine by creating a ...

javascriptnode.jsnpmcreate-react-appyarnpkg

gathering identical objects in the collection

I need to calculate the total time of the specified objects and display it in a single list. Here is the object data: var list = [ { 'user': 'Tom', time: 270547 }, { 'user': 'Alex', time: 82081 }, { 'user&apo ...

javascriptnode.js

What steps do I need to take to retrieve data in a JSON array based on its

Hello, I could really use your assistance with a problem I'm having. Here is the scenario: I have a JSON array that looks like this: "category" : [ { id: 1, product: [{id : product_1, type : ball}] }, { id : 2, product :[{id : prod ...

javascriptjqueryhtmlajaxjson

Local cross-origin requestsORCross-origin requests within local

I'm having an issue with a simple setup that I can't seem to figure out: This is my index.html file: <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>SyriLab</title> <link rel="stylesheet" ...

javascriptjqueryhtmlbootstrap-4

What is the best way to interpret HTML special characters (such as those with accents) in a Facebook share post?

<meta property="og:title" content="<?php echo $title; /> where $title is retrieved from a database. The title should display as blácv with the character a accented, but when sharing the post on Facebook, it appears as bl&aacutecv. T ...

phphtmlfacebookmeta-tagshtml-entities

VueJS is utilized to duplicate the innerHTML output value

Currently diving into the world of Vue, I encountered an issue while rendering an HTML text. My component template is a WYSIWYG editor. <template> <div id='editor_container'> <slot name="header" /> <div id='editor ...

javascripthtmlvue.js

Crashing of history.pushState when using browser's back button

I am currently developing a single page application that loads each section via ajax. The homepage is a separate page, and when you click on 'About', it redirects you to the single page app. I have been able to update the URL for each section and ...

jqueryajaxbrowser-historypushstate

Is there a way to identify whether the image file is present in my specific situation?

I have a collection of images laid out as shown below image1.png image2.png image3.png image4.png … … image20.png secondImg1.png secondImg2.png secondImg3.png secondImg4.png secondImg5.png ……. …….. secondImg18.png My goal is to dynamically ...

javascriptjqueryhtmlcss

When the click function is triggered, it adds a class to a tag and then subsequently removes it

I attempted to create a click effect on the category using jQuery. Here is my code: $('document').ready(function() { $('.links a').click(function(e) { e.preventDefault(); $('.links a').removeCl ...

javascriptjqueryhtmlcss

Twice Asynchronous AJAX Action

Currently, I am working on a javascript script to dynamically load pages on my website without the need to refresh the entire page. The script involves fading out the content div, loading new content, switching the content, and then fading it back in. The ...

javascriptjqueryajaxasynchronous

Vue.js error: Trying to access an undefined property

Here is my Vue instance setup: const vueApp = new Vue({ el: '#vue-wrapper', data: { items: [] }}); Utilizing a v-for loop in index.html.eex: <div v-for="item in items[0].subItems">{{ item.name }}</div> In this scri ...

javascriptvue.jsphoenix-frameworkv-for

Implementing the disabling of a dropdown menu within a span using Jquery

Greetings! I'm currently dealing with a dropdown field. <div class="dvPortOmmisionRightInner"> <div style="float: left"> <select id="ddlAction" onchange="showSelected(this.value)"> <opt ...

jqueryasp.net

Utilizing AngularJS ng-repeat to dynamically assign distinct values to buttons; techniques for extracting the assigned value to JavaScript upon button click

In my Angular project, I am creating a waiting list system where users can join a waiting list and then be moved to a member list. To populate the table with rows of waiting people, I am using ng-repeat. Each row has a button that, when clicked, should mov ...

javascriptangularjsbuttonangularjs-ng-repeat

Is there a way to select only a single line from an HTML document?

Is there a way to extract just one specific line from an HTML file? Let's say we have the following file: <!DOCTYPE html> <html> <head></head> <body> This is a test string. This is another test st ...

javascriptphphtml