The layout of an HTML and CSS page does not adjust according to the size of the

Having trouble scaling down my HTML and CSS code properly using only %'s and vw's. The entree div and drink div are dynamically populated, making formatting even more challenging.

<!DOCTYPE HTML>
<html>
<link rel="stylesheet" href="assets/styles/normalize.css">
<link rel="stylesheet" href="assets/styles/main.css">
<style>
  #percentageSize {
    width: 16%;
    height: auto;
    margin-top: -5%;
    margin-right: 1%;
    margin-left: -45%;
  }
  
  #percentageSize1 {
    width: 16%;
    height: auto;
    margin-top: -1%;
    margin-left: -400%;
  }
  
  .drinks {
    height: 100%;
    width: 100%;
    margin-left: 220%;
    margin-top: 2.5%;
    position: absolute;
    margin-top: -53.5%;
  }
  
  #thumbs {
    width: 100%;
    height: 100%;
  }
  
  .entree {
    height: 100%;
    width: 100%;
    margin-left: -5%;
    margin-top: 7%;
    position: absolute;
    top: 34%;
  }
  
  h1 {
    text-align: center;
  }
  
  .Joey {
    font-size: 3vw;
    margin-top: -18%;
  }
  
  h2 {
    text-align: right;
  }
  
  ...
  (code continues)
  
</html>

Struggling to find a solution despite using %'s and vw's in my code. Could it be related to the use of div's? Any tips or suggestions would be greatly appreciated.

htmlcss

Answer №1

VW and VH refer to view-width and view-height, respectively. This means that any element you apply them to will maintain the same size regardless of scaling or device, as it is calculated as a percentage of the viewport. For example, you could have an <h1> element with a font-size of 10vw, making the <h1> 10% of the width of the device's viewport.

For more information, visit: MDN w3

.pix {
  height: 50px;
  width: 50px;
  background-color: red;
}

.v {
  width: 100vw;
  height: 20vh;
  background-color: purple;
  font-size: 5vw;
}
<div class="pix">
<p>Pixels</p>
</div>

<div class="v">
<p>Viewport Based</p>
</div>

Answer №2

Here are some key issues with your code that need to be addressed. Firstly, the body tag is not properly opened at the beginning, so I've made the necessary adjustments. Secondly, there are several tags that are not closed correctly, such as the h1 tags, the closing </form> tag, and the closing </body> tag. The <Img> tag is self-closing and should be closed with '/>' instead of a separate closing tag.

Additionally, it's worth reconsidering the amount of inline styles in your code. CSS is parsed in the order it's written, so it's beneficial to place the HTML/body CSS rules at the top of your stylesheet for faster application.

I hope this feedback proves helpful. Also, consider using position relative over absolute for better responsive design practices.

See below for the updated CSS:


html {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(http://www.crossfitsofla.com/wp-content/uploads/2019/01/food.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  margin: 75px;
  padding: 75px;
}

#percentageSize {
  width: 16%;
  height: auto;
  margin-top: -5%;
  margin-right: 1%;
  margin-left: -45%;
}

#percentageSize1 {
  width: 16%;
  height: auto;
  margin-top: -1%;
  margin-left: -400%;
}

.drinks {
  height: 100%;
  width: 100%;
  margin-left: 220%;
  margin-top: 2.5%;
  position: absolute;
  margin-top: -53.5%;
}

#thumbs {
  width: 100%;
  height: 100%;
}

.entree {
  height: 100%;
  width: 100%;
  margin-left: -5%;
  margin-top: 7%;
  position: absolute;
  top: 34%;
}

h1 {
  text-align: center;
}

.Joey {
  font-size: 3vw;
  margin-top: -18%;
  color: PapayaWhip;
}

h2 {
  text-align: right;
}

#continue {
  background-color: lightgrey;
  font-size: 1.1vw;
  padding: 1%;
}

#clear,
#add {
  padding: 1%;
  background-color: lightgrey;
  font-size: 1.1vw;
}

.header-right {
  text-decoration: none;
  margin-top: -8%;
  position: absolute;
  font-size: 2vw;
  color: black;
  margin-left: 65%;
  z-index: 1;
  font-family: Georgian;
}

.buttons {
  margin-top: -6%;
}

.more {
  margin-top: 5%;
}

Your code structure has been updated for better functionality and responsiveness. Hope this helps!

Answer №3

Consider using 'vh' for height and 'vw' for width.

For instance:

.section {
  width: 50vw; //this will set the width as 50% of the viewport width
}

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

Using Javascript or jQuery to Enhance the Appearance of Text on a Website

Is there a way to automatically apply styling to specific phrases on our website by searching for instances of those phrases? For example: <div> This is what you get from <span class="comp">Company Name</span>. We do all kin ...

javascriptjquerycss

What is the best way to select the initial descendant that matches a specific

How can we target only the first matching descendant element, without affecting others further down the hierarchy? For example: If the HTML structure is like this: <div class="wrapper"> <table> <tbody> <tr> < ...

css

"Positioned at the top of the page is the alert box, with the

I'm looking to add an alert at the top of my webpage containing a form for visitors to enter their phone number. Currently, I have a "alert alert-info" div with the form inside it placed at the top of my body tag, which works perfectly. However, when ...

javascriptjqueryhtmlcsstwitter-bootstrap

What can I do to prevent a panel from being pushed beneath two other panels when the window size is reduced?

These are my three panels: ___ _________ ___ | | | | | | | | | | | | | | | | | | | | | | | | |___| |_________| |___| When I resize the window slightly, the layout changes: ___ ...

asp.netcss

Deciphering the hierarchy of z-index stacking

I'm feeling a bit puzzled about how to determine the stacking order using z-index. I am struggling to grasp how browsers handle elements with the position property in comparison to those without it. Is there a set rule to establish the stack order o ...

csscss-positionz-index

Tally up the values of selected checkboxes

  I'm in search of a method to tally up data-values associated with checkboxes. In the example provided below, selecting locations from the checkboxes results in the calculation of primary values, which are displayed in the green box. I also need to ...

javascripthtmljquerycssfunction

XMLWorker: unable to align cell vertically properly

Upon reviewing this code snippet: <table> <tr> <td border="1"> <table> <tr><td>Blah</td></tr> <tr><td>Blah</td></tr> ...

cssitextxmlworker

The JavaScript code created in CodePen doesn't seem to function properly when integrated into my website

During a learning program, I created a basic random quote generator. The code worked flawlessly on codepen.io. Using a simple JavaScript (jQuery) function, I displayed random quotes along with their authors, which were stored in an array. I ensured that t ...

javascripthtmljquerycssclick

The 'data-intro' property cannot be bound to the button element as it is not recognized as a valid property

I've been using the intro.js library in Angular 8 and so far everything has been working smoothly. However, I've hit a roadblock on this particular step. I'm struggling to bind a value in the data-intro attribute of this button tag. The text ...

htmlangulartypescriptintro.js

`CSS Content Placeholder Issue When Used Alongside JavaScript`

Let me explain a bit, I have a master page named UserProfile.master which has a content placeholder linked to UserProfileWall.aspx. Now, I am trying to incorporate some additional JavaScript and a second CSS file in the userprofilewall page. However, whene ...

javajavascriptjqueryasp.netcss

What could be causing the malfunction of the dropdown menu attached to my button?

I've been working on setting up a simple button in my Angular application that should display a dropdown menu with various options when clicked. I copied and pasted some Bootstrap template code, made some modifications to match the style of my app, bu ...

htmlcssangularbootstrap-4frontend

Strong tags within MFC

Is it possible to create labels in MFC (Static text) that contain both bold and non-bold text? For instance, something like this: "I want my label to have a mix of styles like this" Any suggestions on how to achieve this? I am aware that I can change ...

htmlvisual-c++mfclabelbold

Scrollbar becomes inactive following the loading of AJAX content

Having an issue with loading a div using Ajax. The div loads, however the scrollbar within it stops working afterwards. In Main.html, I load content from other HTML files like so: <div id="content1" > </div> The content is loaded as follows: ...

javascriptjqueryhtmlajaxjquery-load

Prevent submission by deactivating the button if a file has not been

I need help implementing a solution to disable a submit button until a file is selected. I found a working example online, but I'm not sure if the issue lies with the script type. Here's the example I'm referring to: disable submit button u ...

javascriptphpjqueryhtml

Incorporating an HTML header into a QNetworkReply

I have implemented a customized QNetworkAccessManager and subclassed QNetworkReply to handle unique AJAX requests from a JavaScript application. It is functioning mostly as expected, but I have encountered an issue where my network replies seem to be missi ...

javascripthtmlc++ajaxqt

Converting Excel values to Exponential format using Python

I'm struggling to find a solution for extracting the Invoice Number in Python from an Excel sheet without turning it into exponential form. Expected Value: 8000030910 Result: 8.00002e+09 Python Result Excel sheet d1.append(sheet.cell_value(j,0)) ...

pythonhtmlexcel

Create two floating divs that adjust their height dynamically to be equal

Situation: I have a container with two direct children, known as "left" and "right". The height of the "left" child should never exceed the height of the "right" child. However, the "right" child can extend beyond the height of the "left" child. I am stru ...

htmlcsscss-float

The JavaScript code malfunctions when I introduce a new HTML tag

I am attempting to create a simple photo gallery using PhotoSwipe. However, I have encountered an issue where certain functions like Previous and Next buttons stop working when I add new HTML elements. Here is the original code: <div class="my-gallery ...

javascriptjqueryhtml

What is the process for a server to transmit a JWT token to the browser?

Here is an example response sent to the browser: HTTP / 1.1 200 OK Content - Type: application / json Cache - Control : no - store Pragma : no - cache { "access_token":"MTQ0NjJkZmQ5OTM2NDE1Z ...

javascripthtmljwt

Customize Typography style variations in Material-UI version 5

I have encountered a similar issue, but with a twist from Can't override root styles of Typography from Materil-UI Back in v4, I had a theme set up like this: import { createTheme } from '@material-ui/core/styles'; export const theme = cre ...

cssmaterial-ui