reaching an adjustable Vertical Dimension

I am currently working on the front-end development of a new project. I'm using a mix of custom CSS and Bootstrap to create a responsive user interface. The current layout adjusts nicely with the browser width, but now I need to make it responsive in terms of height as well.

I'm facing some challenges in achieving this for specific elements like 'Features' and 'Video-placeholder' on the page. My goal is to set their heights dynamically so that all components maintain proportionality irrespective of the browser size.

You can view the design on Codepen: Interface design

Here's the code snippet for reference:


main > .container {
  padding: 60px 15px 0;
}
* {
  margin: 0;
  padding: 0;
}
html {
  margin: 0;
  padding: 0;
}
/* Other CSS rules here */

Thank you for your help!

htmlcsstwitter-bootstrapresponsive-design

Answer №1

Incorporate percent heights and display flex together to minimize the page UI according to the height of the browser window. Feel free to experiment with the sample below by expanding the window.

main > .container {
  padding: 60px 15px 0;
}

* {
  margin: 0;
  padding: 0;
}

html {
margin: 0;
padding: 0;
  height: 100vh;
}

... (CSS code continues) 
<!DOCTYPE html>

<html lang = "en" class = "h-100">
  <head>
    <meta charset = "utf-8">
    ... (HTML code continues)

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

How can I style my tables to have different border spacing between the table head and table body?

When it comes to tables, I want to customize the column spacing in a specific way. I need space between columns in the table header but no gaps between columns in the table body. How can I achieve this by including border space only in the thead section? ...

htmlcss

What is the best way to preserve the updated sequence of a list that can be re-ordered?

I've been tasked with making a re-orderable list for my apprenticeship project. After incorporating drag and drop functionality using Jquery UI, I managed to display the index of each item. However, saving the new order back to the database has prov ...

jqueryhtmlasp.netjquery-ui

Center the span element within Bootstrap 5 button groups

I am experiencing an issue where the span elements in my button groups are not aligning properly. I am looking for a way to align these span elements within the button groups without using fixed widths. Creating a basic web modal with Bootstrap 5 <di ...

cssbootstrap-5

Implementation of a text field in Reddit using Material-UI

As I attempt to replicate the Reddit text field design from material-ui, I've created a custom component. However, I keep encountering an invalid hook call error when I reach the line containing const classes=.... Here is the code snippet: import Re ...

cssreactjsmaterial-ui

Identifying Browsers using CSS

I am struggling to understand why my HTML5 website appears differently in each browser. It seems like a CSS issue, but I can't pinpoint the exact problem. Here are screenshots of how the site looks on different browsers: Chrome: Safari: Internet E ...

csshtmlcross-browser

How come when I click on the edit button, the selected data's model doesn't appear in the dropdown menu as I would like it to?

this is the function in my controller public function getModel($make_id = null) { $make_id = request()->make_id; $carsmodel = CarModel::where('make_id', $make_id)->orderBy('model', 'ASC')->get(); return re ...

javascripthtmljqueryajaxlaravel

Is there a way to eliminate the shadow effect appearing on product photos in BIG CARTEL?

While using the Luna theme on my Big Cartel store, I noticed that the products are hard to see on mobile devices because of the box shadow effect. I found a solution on a Big Cartel help page recommending to add a specific code to the CSS, but when I tried ...

cssthemesbigcartel

Extracting Data From HTML Document Specifically Targeting Table

How can I scrape the data from the table located on the far right of this page , considering that all tables on the page use the same styles and class names? I need to extract information from that specific table and display it. Any suggestions? ...

phphtmldomweb-scraping

"Struggling to horizontally center a div with a fixed width in CSS - what am I

Whenever I try to use it on my browser, the content shifts to the left and I can't seem to center it using text-align or flexbox. The issue gets resolved when I remove the width property, but I really need it to have that paragraph-style look I'm ...

htmlcssfrontend

Can the parent document interact with Shadow DOM elements?

When it comes to user-created shadow DOM elements, this question focuses more on accessibility using the date input type: For instance, let's say there is a date input on a webpage. After some editing, the shadow DOM markup for this element (in Chrom ...

javascripthtmlweb-componentshadow-dom

Is there a way to showcase CSS styling for elements that are "siblings" when hovering over an item without affecting the item being hovered on?

When hovering over one of the 5 text bits, I want to apply CSS to all bits except the one being hovered over. Can you achieve this using jQuery and the .siblings() attribute? Here is the HTML: <table width="1138" height="38" border="0" class="Home111 ...

jquerycss

What is the best way to set specific filenames in order to transmit them to the server?

Is there a way to send images files to a server using NODEJS without utilizing the traditional input file tag? I want to hard code the filepaths in an HTML client to achieve this. Are there any solutions available for this? Thanks in advance. ...

htmlfilenode.jsfile-upload

PhoneGap switches up the error type with each consecutive run

Why does PhoneGap change errors after every time it is compiled? Sometimes it runs without any issues, but then the same code throws strange errors like parse error or function not found, even though no changes were made to the code. Here is the code that ...

javascripthtmlcordova

Determine how the scale of a transform changes over time by calculating the function of elapsed time [ transform: scale(x, y

I am currently working on a container that can be expanded and collapsed simply by clicking on a chevron icon. The functionality to collapse or expand the container resides within a function called transformAnimation. This function code closely resembles t ...

javascripthtmlcssanimationmath

Transformation of a double-row header

Click here to view the design - two-row header image I'm struggling with creating a header design that consists of two rows - the first row includes a centered logo and icons on the right side, while the second row contains the menu. Can someone guid ...

htmlcssbootstrap-4

What is the best way to continuously run a series of functions in a loop to create a vertical news ticker effect?

I'm in the process of creating a vertical latest news ticker, and although I'm new to javascript, I'm eager to learn and build it myself. So far, I've come up with this, but I want the news cycle to restart once it reaches the end. ...

javascripthtmlcssloops

Is there a space added after applying overflow:hidden to a div?

.d1 { height: 10px; } .dd { display: inline-block; overflow: hidden; } .dd1 { display: inline-block; } <div class="d1"> <div class="dd"></div> <div class="dd1"></div> </div> To adjust the layout so that th ...

css

There was an issue with the SidebarController function being undefined, as it was expected to be a function

I'm encountering two issues with my demo: Error: [ng:areq] Argument 'SidebarController' is not a function, received undefined http://errors.angularjs.org/1.2.26/ng/areq?p0=SidebarController&p1=not%20aNaNunction%2C%20got%20undefined ...

phpjqueryhtmlcssangularjs

Ensure that the background image is perfectly fitted within the second background image

I am facing a challenge with two images - a frame and another image that needs to fit perfectly inside that frame. The tricky part is ensuring that the layout remains responsive. The two images are: https://i.sstatic.net/XWsTq.png Here is how it should ...

htmlcssbootstrap-4

Align the div to the left with text or a paragraph displayed on the right side

Check out my js fiddle below: https://jsfiddle.net/9yj63s3f/ Here is the CSS code snippet: .viddiv{ float:left; width:50%; } .vidholder{ position:relative;height:0;padding-bottom:50%; width:50%; float:left; } iframe{ position:abso ...

htmlcss