Attempting to recreate the dynamic banner featured in the video

Looking to replicate a setup similar to what was demonstrated in the video. I have two div blocks - one with a random image and the other with a video, and I want them to be as flexible and identical as possible to the video layout. How should I go about achieving this?

I attempted using flexbox to align them horizontally and then used media queries to stack them vertically when the window width is reduced. However, I'm struggling to make them shrink responsively like the ones in the video.

I won't post the HTML code since it's just a container div with image and video divs inside.

Below is my CSS:

.container {
  max-width: 1400px;
  display: flex;
  justify-content: center;
}

.image {
  height: 45vh;
  width: 70vh;
}


.video {
  height: 45vh;
  width: 70vh;
}


@media screen and (max-width: 768px) {
  .container {
    flex-wrap: wrap;
  }

}

Answer №1

Check out the code snippet below where I set a max-width of 900 for demonstration purposes on Codepen. Feel free to adjust the values as needed.

.container {
  max-width: 900px;
  display: flex;
  justify-content: center;
}

.image {
  width: 100%;
}


.item {width:50%}
@media screen and (max-width: 768px) {
  .container {
   display:block;
  }
.item {width:100%}

}
  <div class="container">
 <div class="item"><img class="image" src="https://via.placeholder.com/350x150"></div>
<div class="item"><img class="image" src="https://via.placeholder.com/350x150"></div>
  </div>

Answer №2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="container">
       <div class="image"> <img src="./myimage.png"></img> </div>
       <div class="video"> <video src="./videoplayback.mp4"></video> </div>

    </div>
  
    <script src="script.js"></script>
  </body>
</html>

I've structured the HTML according to your specifications and here is the corresponding CSS:

.container {
   width: 90vw;
  display: flex;
  justify-content: center;
}

.image   {
  width: 50%;
}

.image img  {
  width: 100%;
}


.video  {
  width:50%
}


.video video {
  width:100%
}


@media screen and (max-width: 768px) {
  .container { 
    display: block ;
  }
}

Explanation:

The container's width is set to 90% of the viewport's width, while the image and video divs have been given a width of 50%. In the media query, the display of the container is changed to block for smaller screens. The height of the image and video elements is left open for customization based on your needs.

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

Are you looking to add some flair to your Flexbox layout using Media

I am in the process of developing a website using flexbox, and one key aspect of the design is to hide the navigation bar, specifically the left panel in this JSFiddle, when the viewport width is between 480px and 1023px. The current implementation achieve ...

What changes can I make to the script in order to display every element from a MySQL query using PHP, MySQL, JavaScript,

Enhanced Multiple Dropdown Selection Using Ajax In the following scenario, we have a webpage featuring a multiple dropdown selection that interacts with a MySQL database. By choosing options in the dropdowns labeled site, menu, and category (categ), a que ...

Exploring A-Frame VR: Understanding the Distinction between Cursor and Raycaster

I'm in the process of developing a WebVR project that allows users to interact with the environment by 'clicking' on entities. Can you explain the distinction between using the cursor fuse attribute and the raycaster for interaction? ...

Ways to make a jsonp request without including the 'callback' in the URL

I've been working on retrieving information from an Icecast Radio station using their API, which offers the status-json.xsl endpoint to access this data. Despite the format being in xsl, I suspect it returns a JSON file. However, I've encountere ...

Controlling the window opener; Inserting text into an element in the parent window

A pop-up window allows users to select files, then displays the selected image's URL. However, I need to take additional steps beyond that. I am seeking a method to input the URL into an input element on the parent window. window.opener.document.wri ...

Guide to sending properties to reducer in React with Redux

I've been grappling with the complexities of react-redux for hours. I'm aiming to display an <Alert /> to the user when the value of isVisible is true. However, I'm still struggling to grasp the architecture of redux. Despite my effort ...

Having trouble accessing data beyond the login page using Node/Express

Currently in an unusual situation. I am developing a backend and frontend that connects to a third-party RESTFUL API managing some hardware. The third-party API is hosted on your local system as a webserver, meaning HTTP requests are directed to "localhost ...

I am developing a quiz application using JavaScript, and I am wondering how I can smoothly transition from one question to the

I'm working on developing a quiz application and I'm facing an issue where my quiz is skipping question 2 when moving from one question to the next using the "next" button. I have a total of 3 questions in my quiz and for some reason, it jumps fr ...

Top-notch java tool for caching and minifying dojo, jquery JavaScript, and CSS files

In our project, we have downloaded the Dojo and jQuery libraries from Google CDNs. I am currently seeking a Java tool that can both cache and minify these libraries. The caching process should take place within the ROOT project of Tomcat. While I am awar ...

Tips on updating arrow button icon when clicked using jquery

I am currently working on a project where I have a button icon that I want to change upon clicking it. I am using the following jQuery code: <script> $('div[id^="module-tab-"]').click(function(){ $(this).next('.hi').sl ...

What is the best way to reassign key-value pairs in JSON mapping using JavaScript/TypeScript?

Given {"a": {"name": "king", "firstname": "Thomas"},"b": {"age": "21"}} I'm exploring a simple way to convert it to {"name": "king","firstname": "Thomas","age": "21"} In the realm of Javascript/Angular. Any helpful suggestions are greatly appreci ...

Assign a class to an element depending on the date

I need to customize a span element in my HTML code like this. html <span class="tribe-event-date-start">September 5 @ 7:00 pm</span> My objective is to identify that specific element based on its date and then apply a class to its parent co ...

Connect a responsive div to a main div

I'm relatively new to the world of Javascript, CSS, and HTML. Currently, I'm attempting to anchor a div to the center and bottom of its parent div. The parent div contains a responsive background image and my fa fa-arrow icon is correctly positi ...

Instructions for including a script and stylesheet exclusively on a single page of a website

I need to incorporate these two lines onto a single page of my website: <script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script> As well as <link href="//cdnjs.cloudflare.com/ajax/libs/OwlCa ...

Tips for displaying just the image name without the entire image file path

When I try to upload an image, the path displayed is "C:\fakepath\promotion1.JPG". This fake path is causing the image not to upload to my project media folder. How can I solve this issue? Instead of the complete path, I only want to capture the ...

Achieve a div to fill the remaining width while using list-style-position: inside

I have been attempting to make another div occupy the remaining space in the numerical list item using list-style-position: inside, but it does not seem to be working for me. While I could opt for list-style-position: outside and add some spacing to avoid ...

The functionality of resizing a layout in Html5/CSS3 is not functioning correctly

Whenever I resize the window, I am looking to have A B C displayed one after the other in a vertical sequence, I have been struggling with this for quite some time. Can someone please help me figure out how to achieve this? Thank you! A B C div#me ...

Tips for validating a react select dropdown list without relying on hooks

Is it possible to validate the selection made in a dropdown without using react-hook? I need to make sure that the selection is never empty or null when the user clicks on the submit button. handleChange = (option) => { this.setState({option: option.tar ...

Encountering the error of receiving "$ undefined," despite making a reference to the library

I have included the JQuery library in the following way: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> Despite trying to download the library and include it locally in my project, I ...

The leaflet.js library threw an error: LatLng object is not valid due to invalid coordinates (NaN, NaN)

Currently, I am working with a JSON file that contains coordinates in pairs. "_id" : ObjectId("59407457838b932e0677999e"), "type" : "MultiPoint", "name" : "points", "coordinates" : [ [ -73.958, 40.8003 ], ...