The HTML content I created is too large for the screen and is extending beyond its borders

The navigation bar and footer on my HTML page adjust themselves according to the screen width, but the main content is not adjusting properly.

I tried using a media query for mobile resolution (517px), but when I tested it on a PC with a smaller screen width, the content was overflowing.

Specifically, all the content within the "bhavya" class is overflowing off the screen.

  /* Code snippet for Box 1 styling */

.box1 {
  background-color: white;
  width: 746px;
  height: auto;
  border: 1px solid lightgray;
  border-radius: 2px;
  margin-top: 50px;
  margin-left: 50px;
  display: block;
}

/* Button styling */

#myBtn {
  background-color: #08f;
  border: none;
  color: white;
  width: 80px;
  height :43px;
  margin-left: 5px;
  border-radius: 2px;
  cursor: pointer;
}

.show {
  display: none;
}
  
/* Styling Search Box */

.search {
  background-color: white;
  border: 1px solid lightgray;
  border-radius: 2px;
  width: 384px;
  height: 130px;
  float: right;
  margin-top: 50px;
  margin-left: 828px;
  display: block;
  position: absolute;
}

...

htmlcssoverflow

Answer №1

i believe this can be of assistance i included display:grid in your code and made some modifications 

body{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 20vh 20vh auto 20vh;
  grid-template-areas:
    "h h h"
    "b b s"
    "b b r"
    "f f f";
}
.header{
  grid-area: h;

}
.box1{
   grid-area: b;
    background-color: white;
/*     width: 746px; */
    height: auto;
    border: 1px solid lightgray;
    border-radius: 2px;
    margin-top: 50px;
    margin-left: 50px;
    display: block;
  }

/* Button to show more */
#myBtn{
    background-color: #08f;
    border: none;
    color: white;
    width: 80px;
    height: 43px;
    margin-left: 5px;
    border-radius: 2px;
    cursor: pointer;
}
.show{
  display: none;
}

/* Styling Box For Search Box */
.search{
  grid-area: s;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 2px;
/*     width: 384px; */
    height: 170px; 
/*     float: right; */
    margin-top: 50px;
/*     margin-left: 828px; */
    display: block;
/*     position: absolute; */

}

/* Search Written*/
.search h3{
    margin-bottom: -40px;
    text-align: center;
}

  /* Style the search box */
.search input[type=text] {
    padding: 13px;
    border: 1px solid lightgray;
    margin-top: 70px;
    margin-left: 50px;
    font-size: 17px;
    height: 15px;
  }

  /* Style the button */
.search button[type=button] {
    background-color: #08f;
    border: none;
    color: white;
    width: 80px;
    height: 43px;
    margin-left: 5px;
    border-radius: 2px;
}

/* Recent Post Column */
.recent{
    grid-area: r;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 2px;
/*     width: 384px; */
    height: 100%;
/*     float: right; */
    margin-top: 220px;
/*     margin-left: 828px; */
    display: block;
    text-align: center;
/*     position: absolute; */
}

/* img in recent */
#post1 {
    margin-right: 22px;
    margin-left: 22px;
    margin-top: 22px;
    width: 340px;
    height: 340px;
}

/* Text below */
.text1 {
    margin-right: 22px;
    margin-left: 22px;
    font-size: 22px;
}

/* 2nd post */
#post2 {
    margin-right: 22px;
    margin-left: 22px;
    margin-top: 22px;
    width: 340px;
    height: 340px;
}

/* Text below */
.text2 {
    margin-right: 22px;
    margin-left: 22px;
    font-size: 22px;
}

/* 3nd post */
#post3 {
    margin-right: 22px;
    margin-left: 22px;
    margin-top: 22px;
    width: 340px;
    height: 340px;
}

/* Text below */
.text3 {
    margin-right: 22px;
    margin-left: 22px;
    font-size: 22px;
}

/* Post Section fitting */
.container {
/*   width: 746px; */
}

.container .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(333.33px, 1fr));
}
/* Seperate Post*/
.container .row .col {
  margin: 20px;
  display: none;
}

/*post Image*/
.container .row .col .imgBox {
  width: 100%;
  height: 220px;
}

.container .row .col .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px 5px 0 0;
}

/*show more*/
.btn {
  padding: .7rem 2rem;
  background: royalblue;
  border: none;
  color: #FFF;
  margin: 20px auto;
  display: block;
  font-size: 1.3rem;
  cursor: pointer;
  outline: none;
  transition: .3s;
}

.btn:hover {
  opacity: .8;
}
.footer-basic{
  grid-area: f;
}
  @media screen and (max-width: 600px) {
  .search{
      margin-top: 30px;
      border: px;
      margin-left: 50px;

  }
  .box1{
      width: 384px;
      margin-top: 190px;
      height: fit-content;
  }
  .recent{
      display: none;
  }
  .container {
    width: 384px;
  }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
  <meta content="Free HD Movie And Compressed Games Download From a High Speed Server, Try Now , One Click 
       Direct Download Link Available">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

  <title>GameMovieMania</title>
</head>

<body>
  <header class="header">
  <h1 class="heading"><b><i>GameMovieMania</i></b>

  </h1> <br>
  <div class="topnav" id="myTopnav">
    <a href="index.html" class="active">Home</a>
    <a href="games.html">Games</a>
    <a href="movies.html">Movies</a>
    <a href="contact.html">Contact</a>
    <a href="about.html">About</a>
    <a href="javascript:java script/code.js;" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>
  </header>
  <script>
    function myFunction() {
      var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
        x.className += " responsive";
      } else {
        x.className = "topnav";
      }
    }
  </script>

    <div class="search">
      <h3>Search</h3>
      <input type="text" id="myInput" placeholder="Search.." onkeyup="searchOn()">
      <button type="button"> Search </button>
    </div>

    <div class="recent">
      <h3>Recent Post</h3>
      <div class="post1">
        <a href="gta5.html">
          <img src="images/gta5.jpeg" id="img1">
          <p class="text1">Grand Theft Auto 5 | Free <br>Download | Highly Compressed </p>
        </a>
      </div>
      <div class="post2">
        <a href="gta4.html">
          <img src="images/gta4.jpeg" id="img2">
          <p class="text2">Grand Theft Auto 4 | Free <br>Download | Highly Compressed </p>
        </a>
      </div>
      <div class="post3">
        <a href="gta3.html">
          <img src="images/gta3.jpeg" id="img3">
          <p class="text3">Grand Theft Auto 3 | Free <br>Download | Highly Compressed </p>
        </a>
      </div>
    </div>

    <div class="box1">
      <div class="container">
        <ul class="row">
          <li class="col">
            <div class="imgBox">
              <img src="images/gta 5.jpeg" alt="">
            </div>
            <div class="content">
              <h2 class="title">
                Grand Theft Auto 5 Download | Free Download
              </h2>
            </div>
          </li>

          <li class="col">
            <div class="imgBox">
              <img src="images/nowayhome.jpeg" alt="News">
            </div>
            <div class="content">
              <h2 class="title">
                Spiderman No Way Home | Full Movie Download Hindi |
              </h2>
            </div>
          </li>

          <li class="col">
            <div class="imgBox">
              <img src="images/gta4.jpeg" alt="News">
            </div>
            <div class="content">
              <h2 class="title">
                Grand Theft Auto 4 Download | Free Download
              </h2>
            </div>
          </li>

          <li class="col">
            <div class="imgBox">
              <img src="images/shershaah.jpeg" alt="News">
            </div>
            <div class="content">
              <h2 class="title">
                Shershaah Full movie download HD
              </h2>
            </div>
          </li>

          <li class="col">
            <a href="sooryavanshi.html">
              <div class="imgBox">
                <img src="images/sooryavanshi.jpeg" alt="News">
              </div>
              <div class="content">
                <h2 class="title">
                  Sooryavanshi Full Movie Download HD
                </h2>
              </div>
            </a>
          </li>

          <li class="col">
            <div class="imgBox">
              <img src="images/gta3.jpeg" alt="News">
            </div>
            <div class="content">
              <h2 class="title">
                Grand Theft Auto 3 Download | Free Download
              </h2>
            </div>
          </li>

          <li class="col">
            <div class="imgBox">
              <img src="1.jpg" alt="News">
            </div>
            <div class="content">
              <h2 class="title">
                Android 11: Here are the 8 best new features
              </h2>
            </div>
          </li>

          <li class="col">
            <div class="imgBox">
              <img src="2.jpg" alt="News">
            </div>
            <div class="content">
              <h2 class="title">
                PHP 8 Release on November 2020
              </h2>
            </div>
          </li>

          <li class="col">
            <div class="imgBox">
              <img src="1.jpg" alt="News">
            </div>
            <div class="content">
              <h2 class="title">
                Android 11: Here are the 8 best new features
              </h2>
            </div>
          </li>

          <li class="col">
            <div class="imgBox">
              <img src="2.jpg" alt="News">
            </div>
            <div class="content">
              <h2 class="title">
                PHP 8 Release on November 2020
              </h2>
            </div>
          </li>

          <li class="col">
            <div class="imgBox">
              <img src="1.jpg" alt="News">
            </div>
            <div class="content">
              <h2 class="title">
                Android 11: Here are the 8 best new features
              </h2>
            </div>
          </li>

          <li class="col">
            <div class="imgBox">
              <img src="2.jpg" alt="News">
            </div>
            <div class="content">
              <h2 class="title">
                PHP 8 Release on November 2020
              </h2>
            </div>
          </li>
        </ul>
        <button class="btn">Load More</button>
      </div>

      <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
      <script>
        $(".col").slice(0, 4).show()
        $(".btn").on("click", function() {
          $(".col:hidden").slice(0, 4).slideDown()
          if ($(".col:hidden").length == 0) {
            $(".btn").fadeOut('slow')
          }
        })

        function searchOn() {
          let input = document.getElementById('myInput').value
          input = input.toLowerCase();
          let x = document.getElementsByClassName('col');
          for (i = 0; i < x.length; i++) {
            if (!x[i].innerHTML.toLowerCase().includes(input)) {
              x[i].style.display = "none";
            } else {
              x[i].style.display = "list-item";
            }
          }
        }
      </script>
    </div>
    
  <div class="footer-basic">
    <footer>
      <div class="social">
        <a href="#">
          <i class="icon ion-social-instagram"></i>
        </p>
        <a href="#">
          <i class="icon ion-social-snapchat"></i>
        </a>
        <a href="#">
          <i class="icon ion-social-twitter"></i>
        </a>
        <a href="#">
          <i class="icon ion-social-facebook"></i>
        </a>
      </div>

      <ul class="list-inline">
        <li class="list-inline-item"><a href="index.html">Home</a></li>
        <li class="list-inline-item"><a href="about.html">About</a></li>
        <li class="list-inline-item"><a href="contact.html">Contact</a></li>
        <li class="list-inline-item"><a href="privacy.html">Privacy Policies</a></li>
        <li class="list-inline-item"><a href="terms.html">Terms And Conditions</a></li>
      </ul>

      <p class="copyright">GameMovieMania Corp. © 2022</p>

    </footer>
  </div>

</body>

</html>

Answer №2

To handle overflowing content, consider utilizing the CSS overflow property.

.example {
  overflow-x: auto; /* Hides horizontal scrollbar */
  overflow-y: visible; /* Displays vertical scrollbar */
}

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

Responsive Bootstrap 4 Login Form with customized top height

This login form was created using Bootstrap 4, starting with a preset that I then customized to fit my needs. As someone new to Bootstrap and CSS, I struggled with making the form responsive. When resizing the window, the top portion gets cut off and is no ...

htmlbootstrap-4

What is the reason behind shadow dom concealing HTML elements when viewed in inspect mode?

https://i.stack.imgur.com/UZM7f.png Monday.com has implemented Shadow Dom to protect its source code. How can I work around this limitation? ...

javascripthtmlcssshadow-dom

Chakra UI: Trouble with Styling Multi-part Components - StyleProvider Missing

Attempting to style multipart components as outlined in this documentation is proving to be challenging. Despite my efforts, I keep encountering the following error: ContextError: useStyles: styles is undefined. It appears that I may have forgotten to wr ...

cssreactjsnext.jschakra-ui

Utilizing JavaScript to dynamically update the user interface after submitting a form using jQuery

I am working on implementing an Input element that triggers a form submission: <input type="submit" value="Download" id="downloadButton" class="btn-download" /> The specific requirement is for the button to first execute a javascript function and t ...

javascriptjqueryhtml

What is the method for defining a CSS property for the ::before pseudo element within an Angular component?

Can TypeScript variables be accessed in SCSS code within an Angular component? I am looking to achieve the following: <style type="text/css"> .source-status-{{ event.status.id }}::before { border-left: 20px solid {{ event.status.colo ...

cssangularpseudo-element

Struggling to create a line break within an SVG using the <tspan> element?

I have a pair of text lines that are wrapped in <tspan> tags. <tspan dy="-11.7890625">welcome</tspan> <tspan dy="16.8" x="285.75">text</tspan> I am trying to add a line break between them, but the <br> tag is not worki ...

javascripthtmlsvg

Converting coordinates to pixel-based fixed positioning in CSS

After creating an animated square pie chart using basic CSS to display it in a grid format, I am now looking to transform the larger squares into a state map grid. Any ideas on how to achieve this? In my JavaScript code snippet below, I believe there is a ...

javascripthtmlcsswaffle-chart

What is the best way to make a JavaScript cookie remember the state of a DIV?

Seeking assistance with a test site here that is currently in development. I am attempting to make the notification at the top remain hidden once the close button is clicked. Below is my current script: <style type="text/css"> <!-- .hide { displ ...

javascriptcsscookieshidestate

Styling Scrollbars in Datatables

I need assistance on styling a specific datatable scrollbar using Webkit. Below is the code snippet: id ::-webkit-scrollbar-track { background-color: transparent; border-radius: 5px; } id::-webkit-scrollbar { width: 13px; } ...

jquerycss.netmodel-view-controllerdatatable

Select the top row of a table when the checkbox is ticked to emphasize it

Previously, I tackled a challenge on a webpage using jQuery where checkboxes in a table needed to be selected based on specific data attributes. Essentially, if one checkbox in a row was selected, the rest of the checkboxes would be disabled if their data ...

javascriptjquerycss

Retrieve webpage content using an ajax request in JavaScript

I'm working on an HTML page with an Ajax call to load table content. <html> .... <script sec:haspermission="VIEW_NOTE" th:inline='javascript'> require(['app/agent/viewGlobalAgent'], function (){ ...

javascripthtml

What are the steps for creating personalized sliders with WordPress?

Seeking guidance on how to code WP Template files to enable control from the WP dashboard for adding or removing slider images. A sample code snippet is provided below. <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indi ...

javascriptphpcssajaxwordpress

Where can I find a style element using Selenium in Python?

Hey there! I'm looking to find a style element or style elements using Selenium in Python. <div style="flex-direction: column; padding-bottom: 65px; padding-top: 0px;"> I've tried various methods such as: self.driver.find_element ...

pythonhtmlseleniumselenium-webdriverxpath

The Jqueryui image link is not displaying the image despite no error being reported

Can anyone help me figure out what I'm missing? I'm currently working with ASP.NET MVC 5 and have downloaded the JqueryUI combined via Nuget package. Despite no error references for css/js files, the close button is still not showing in the ima ...

javascriptjquerycssasp.net-mvcjquery-ui

Use jQuery to apply CSS to a div only when it becomes visible on the screen

I created a single page HTML with scrolling functionality. The structure of my divs - home and home2 - is as shown below. Both have a height of 100%. I am looking to add CSS to the second div (home2) using jQuery only when it becomes visible to the user in ...

jqueryhtmlcss

Unable to prevent ordered lists from overlapping with other content I attempt to place beneath them in HTML

function filterImages() { let input = document.getElementById('searchbar').value; input = input.toLowerCase(); let images = document.getElementsByClassName('gallery'); for (let i = 0; i < images.length; i++) { ...

javascripthtmlcsshtml-lists

Adaptable background images with CSS styling

I'm attempting to adjust the sizing of my background image on the splash page to make it smaller. My goal is for the image to fill the entire section regardless of screen size. .splash{ background-image: url("../images/lanternboys_medium.jpg"); backg ...

htmlioscss

Despite having unique ids, two file input forms are displayed in the same div in the image preview

Running into a minor issue once again. It may not be the most eloquent query, but I'm genuinely stuck and in need of some assistance. I am attempting to showcase image previews of selected files in a file input form. I have a jQuery script that reads ...

javascriptjqueryhtml

Prevent jQuery UI default styling from being applied

I'm curious about how to prevent jQuery UI from adding any classes when initializing $.tabs(). This is the structure of my HTML: <link href="smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" /> ... <link href="estilos ...

jqueryhtmlcssjquery-uijquery-ui-tabs

Is it possible to modify the sub/child divs within a draggable parent div and assign them a different class?

Greetings, after being a long-time reader, I have finally decided to post for the first time. In the process of creating a webpage with jQuery drag and drop divs, I am curious about how to change the class of a child div within a draggable div once it is d ...

javascriptjqueryhtmlcssjquery-ui