Prevent HTML element from moving when the window is minimized

I am a beginner in HTML and I need help fixing the positioning of my elements on the window. Whenever I try to minimize the window, everything gets messed up. I am working on creating a website for the first time, so please excuse any mistakes. Here is the code I have:

body,
html {
  background-color: #cc9966;
  max-height: 100%;
  max-width: 100%;
}

.Container {
  width: 100%;
  min-width: 700px;
  margin: auto;
  position: relative;
}

.title {
  font-family: Lucida handwriting;
  font-size: 4rem;
  text-align: center;
  color: white;
  text-shadow: 1rem 1rem 5rem black;
}

header .choice a {
  padding: .8rem;
  font-family: Arial;
  font-size: 1rem;
  border: solid rgba(57, 38, 19);
  background: #f9f2ec;
  color: black;
  margin-left: 3rem;
  cursor: pointer;
  border-radius: 1rem;
  position: relative;
}
<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8>";
  <meta name="viewport" content="width=content-width, initial-scale=1.0">

  <title> WEBSITE OF LB21 </title>

  <link rel="stylesheet"" href="LB21.css">

</head>

<body>

The image below showcases the challenges I'm facing:

https://i.sstatic.net/G06eU.png

htmlcss

Answer №1

body,
html {
  background-color: #cc9966;
  max-height: 100%;
  max-width: 100%;
}

.Container {
  width: 100%;
  min-width: 700px;
  max-height: 1000px;
  margin: auto;
  position: relative;
}

.title {
  font-family: Lucida handwriting;
  font-size:calc(34px + 2.2vw);
  text-align: center;
  color: white;
  text-shadow: 1rem 1rem 5rem black;
}

header {
  padding: .8rem;
  font-family: Arial;
  font-size: 1rem;
  border: solid rgba(57, 38, 19);
  background: #f9f2ec;
  color: black;
  margin-left: 3rem;
  cursor: pointer;
  border-radius: 1rem;
  position: relative;
}.choice  {
  display: flex;
  justify-content: space-evenly; 
  max-width: 900px 
}
.choice a {
  padding: .8rem;
  font-family: Arial;
  font-size: 1rem;
  border: solid rgba(57, 38, 19);
  background: #f9f2ec;
  color: black;
  cursor: pointer;
  border-radius: 1rem;
    }
<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=content-width, initial-scale=1.0>

  <title> WEBSITE OF LB21 </title>

  <link rel="stylesheet" href="stylesheet.css>

</head>

<body>

  <div class="Container>

    <div class=title>

      <h2> LUSCIOUS BITES </h2>

    </div>

    <center>
      <p class="choice>
        <a href="#home>HOME</a>
        <a href="#speciality>SPECIALITY</a>
        <a href="#popular>POPULAR</a>
        <a href="#gallery>GALLERY</a>
        <a href="#review>REVIEW</a>
        <a href="#order>ORDER</a>
      </p>
    </center>


    <section class="home" id="home>

      <div class="content>
        <h3>food made with love</h3>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas accusamus tempore temporibus rem amet laudantium animi optio voluptatum. Natus obcaecati unde porro nostrum ipsam itaque impedit incidunt rem quisquam eos!</p>
        <a href="#" class="btn">order now</a>
      </div>

      <div class="image>
        <img src="images/home-img.png" alt="">
      </div>

    </section>

  </div>

</body>

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

Issues with Highchart resizing within an AngularJS environment

Incorporating Highcharts into my angularjs app to display statistics has been successful. The graph appears correctly upon page load. However, when I adjust the orientation, the appearance changes and then switching back from landscape to portrait result ...

cssangularjshighcharts

If a user types in Korean characters in the input field and then clicks away to any other part of the screen, the input field will automatically regain focus

jsfiddle instructions for testing: type Korean characters in the input field scroll down until the input field is no longer visible Click anywhere on the screen Expected result: the input field will come into focus with (Korean text) If the user enters K ...

htmlcss

Leveraging static elements in a fluid design using solely CSS whenever feasible

Here's a question that requires some logical thinking rather than technical expertise. I've created a design where the header and footer are always fixed at the top and bottom of the window, respectively. However, the elements inside have percen ...

cssresponsive-designfixed

What is the best way to create a flip page effect in a book without relying on absolute positioning? Alternatively, how can a relatively positioned div adjust to the size

Check out this Codepen I have created a div that simulates the pages of a book, with front and back elements. When you click on the page, it flips to reveal the reverse side. To style the book properly, I set the parent div (which houses the page divs) t ...

javascripthtmlcss

What are some strategies to enhance the performance of JavaScript pagination to ensure it functions effectively for varying numbers of pages?

Currently, I am working on building Vanilla Javascript Pagination. I encountered an issue where the pagination seems to work flawlessly only when there are precisely 7 pages. If the page count exceeds or falls below 7, some minor bugs start to surface. I h ...

javascripthtmlcss

Disable checkboxes upon page initialization

I am working with a form that includes checkboxes. Whenever the page loads, clicking on the checkboxes automatically checks them. However, I am looking for a solution where the checkboxes are disabled or not clickable during the page load process. Once th ...

javascriptphphtml

Positioning three divs next to each other and aligning them at the bottom of the longest div

While I've seen similar questions about aligning divs in a row, my situation has a slightly different twist. I have three divs that I want aligned horizontally, with their content pushed to the bottom. I've attempted using position: relative and ...

htmlcss

Changes to attributes of an HTML tag cannot be made by jQuery code during an AJAX call

Could someone help me figure out why this jQuery code is not functioning properly? I have already tested it outside the $(document).ready block with no success. Note: The unusual "{{ }}" and "{% %}" syntax is typically used in Django. jQuery $(document) ...

javascriptjqueryhtmldjango

Implementing a fixed div with jQuery scrolling

I need the left div to stay in sync with the scrolling content. However, there is a challenge because this div is taller than the screen. I want the user to be able to see the bottom of the left div when they reach the bottom of the page. My solution invo ...

jqueryhtmlcssscroll

Troubleshooting issue with changing class based on input values

It appears that there is an issue with the functionality when switching values on page load. Initially, I was able to make it work for a single switch, but now that there are multiple switches on the page, toggling affects all of them. How can I modify it ...

javascriptjquerycss

Tips for dynamically adjusting an iframe's content size as the browser window is resized

Currently, I am in the process of building a website that will showcase a location on a map (not Google Maps). To achieve this, I have utilized an iframe to contain the map and my goal is for the map to adjust its width based on the width of the browser wi ...

javascriptjqueryhtmlcssiframe

Vibrant progress bar design with CSS

Could someone assist me in coding a multicolor progress bar? I would like it to display red when the progress is less than 50, green when the progress is between 50 and 90, and blue when the progress is between 90 and 100. How can I achieve this? ...

javascripthtmlcssbootstrap-4

Creating a Jquery slider animation: step-by-step guide

I tried implementing a code example in jQuery, but I am struggling with achieving smooth transitions in my slides. The changes are happening too abruptly for my taste. How can I create animations that occur during the transition, rather than after it? f ...

jquerycss

Leveraging the power of Vue within Django

Recently, I've delved into the realm of social media websites using Django and have been utilizing the default django template engine to populate my pages. However, I've come to a point where I desire to inject javascript in order to elevate the ...

javascripthtmldjangovue.js

The scroll bar becomes unresponsive when attempting to click within the scroll area in Internet Explorer

Currently, I am working on implementing a scroll bar to navigate a grid horizontally. The functionality works perfectly when using Firefox as the primary browser, however, it seems to be disabled or not functioning properly in Internet Explorer. Despite my ...

c#asp.nethtmlgridscrollbar

Establishing a pixel width for a cell within a table

I've encountered an issue where setting a width to a div with the display: table-cell property is not working as expected. Here is my code: <header class="header layers"> <div class="wrap"> <h1 i ...

htmlcss

Setting the path to an image component using the style jsx tag in Next.js: A step-by-step guide

While utilizing jsx to define styles for my NextJs components, I am facing the challenge of defining a background image for certain elements. I have realized that only relative paths or absolute paths are accepted. But how can I pass a relative path to th ...

cssreactjsjsxnext.js

Is it possible to call a REST API in Javascript by passing the username and password as

I have been attempting to use Javascript to call the AwaazDe REST API with a specific username and password, but I'm encountering issues. Below is my code: function authenticateUser(user, password) { var token = user + ":" + password; ...

javascriptphphtmlrest

Tips for modifying line spacing in R Shiny?

I want to adjust the line spacing in a specific actionButton() displayed in a Shiny App, as shown below and with the MWE code provided at the end. How can I change the line spacing between lines? This adjustment should only affect this action button and n ...

htmlcssrshiny

Creating a two-column grid layout using Bootstrap 4 is a simple and efficient process. Let's see how

I've been struggling to get this to display side by side in a two-column grid. Even after following Bootstrap tutorials, I can't seem to make it work. Check out the code below: <div class="row"> <div class="col-md-8 ...

javascripthtmlbootstrap-4