Ensure that the text box inside the div adjusts its size in accordance with the dimensions of the window, as the div is already designed

Question

Ensure that the text box inside the div adjusts its size in accordance with the dimensions of the window, as the div is already designed

As a novice in HTML and jQuery, I am currently working on creating a portfolio site for a school project. One of the challenges I have encountered is designing a graphic that includes a text box within a resizable div element. My goal is to prevent excessive scrolling by making sure the text box resizes along with the background images when the window changes size. Despite my efforts to position the text box inside the graphic accurately, I have struggled to maintain alignment as I adjust the window size.

[Check out the page here.]

[View the CSS code here.]

Please note that this is still a work in progress, and the graphics and animations are subject to change. I would greatly appreciate any assistance or advice on how to resolve this issue. Thank you in advance!

html css css-position

Answer 1

Answer №1

Could you please review this JSFiddle example and confirm if it aligns more closely with what you are looking for?

Here is the HTML code:

<html>
<head>
  <title></title>
</head>
<body>
    <header>some | header | nav</header>
    <div class="content">
        <p>test text</p>
    </div>
    <footer> a &copy; symbol </footer>

</body>
</html>

For the CSS part:

body {
 background:gray;   
}
header {background:black; color:white}
footer {background:black; color:white}

.content {
    margin: 25px;
    height: 30px;
    width: 100px;
    padding: 50px;
    border: 1px solid black;
}

You can access the example on this link.

I trust this information is helpful to you.

Answer 2

Could you please review this JSFiddle example and confirm if it aligns more closely with what you are looking for?

Here is the HTML code:

<html>
<head>
  <title></title>
</head>
<body>
    <header>some | header | nav</header>
    <div class="content">
        <p>test text</p>
    </div>
    <footer> a &copy; symbol </footer>

</body>
</html>

For the CSS part:

body {
 background:gray;   
}
header {background:black; color:white}
footer {background:black; color:white}

.content {
    margin: 25px;
    height: 30px;
    width: 100px;
    padding: 50px;
    border: 1px solid black;
}

You can access the example on this link.

I trust this information is helpful to you.

Ensure that the text box inside the div adjusts its size in accordance with the dimensions of the window, as the div is already designed

Answer №1

Similar questions

Move a div element as you scroll down the page

Can CSS Grid be substituted for Material UI's grid component?

verifying the user's screen dimensions

Double Marker Challenge in Brochure

How to Eliminate Lower Borders from DataGrid Component in Material UI (mui)

How to display text on a new line using HTML and CSS?

The functionality of session_start() is operating smoothly in Firefox, however, it is experiencing compatibility issues

Could someone assist me with rearranging blocks in Squarespace by utilizing CSS?

Using jQuery's toggleClass method to implement CSS transformations

Rails is being overwhelmed by an excessive number of icons being added by Bootstrap

Achieving proper HTML element order?

The e.currentTarget attribute in Material UI buttons is a key element that

adjust the fixed div's width to match the percentage-defined width of its parent element

Adjust the angle of an object precisely using a transform upon hovering over a designated button

Text positioned on the right side of the image, appearing to hover above

Node JS login leads to fetching /favicon.ico

Encountering an issue with Bootstrap and Sass when trying to convert SCSS files to CSS due to an error involving an undefined variable @each $color, $value in $theme-colors

Is there a way to center the text vertically within an anchor tag?

Interactive Vue.js canvases that adapt and respond to various

The parent div will not accommodate two nested divs