What can I do to prevent Bootstrap sections from overlapping on smaller screens?

While my website looks great on my laptop screen, I'm facing an issue when viewing it on a smaller device. The text from the first section is overflowing into the lower section, which disrupts the layout. Despite being new to bootstrap, I've tried adding new sections tags and divs to solve the problem without success.

<body>
    <nav id="navShadow" class="navbar navbar-expand-md navbar-dark effect">
        <a class="navbar-brand" href="#">Test Name</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto ">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#education">Education</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Work History</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>

            </ul>


        </div>
    </nav>
    
    <!--Rest of the HTML code remains the same -->

CSS:

htmlcsswebbootstrap-4

Answer №1

Upon reviewing your HTML code without referencing your CSS, it appears that the structure is not correct. When properly formatted, your code should resemble the following:

<!-- Head Section -->
<section class="head">
  <header id="home-section">
    <div class="dark-overlay">
      <div class="home-inner">
        <div class="container">
          <div class="row">
            <div class="col-me-3 hidden-sm-down">
              <div class="grow">
                <img class="profile-pic" src="./img/portrait.jpg" alt="" />
              </div>
            </div>
            <div class="col-md-9 main-col">
              <h1 class="mb-2">About Me</h1>
              <p class="mt-4">Some text</p>
              <ul class="social">
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</section>

<!-- Education Section -->
<section id="education">
  <div class="education">
    <div class="container">
      <div class="row education justify-content-center">
        <h1><span>Education</span></h1>
      </div>
      <div class="row">
        <div class="col-9">
          <h3>University of Life</h3>
          <p>Some text</p>
          <h3>University of Life</h3>
          <p>Some text</p>
        </div>
        <div class="col-3">
          <img src="./img/educationimg.jpg" alt="" class="eduimg">
        </div>
      </div>
    </div>
  </div>
</section>

I recommend referring to Bootstrap 4 grid examples for guidance on utilizing containers, rows, and columns effectively. It's a good practice to outline your structure with simplified text blocks before implementing and testing.

Answer №2

If you're unsure, give this a shot in your .css file:

@media only screen and (max-width: 768px){
     /*----Feel free to customize your sections here----*/
     /*----For example:----*/
     .card{
          height: 50%;
          width: 50%;
     }
}

By using this code, screens with a maximum width of 768px or less will apply these styles. Give it a try, it might offer some help.

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

`place the table inside a hidden div`

I am trying to create a non-editable table that can be overlayed with a div under specific conditions. However, it seems like my current implementation is not working as expected. What could be causing this issue? CSS <style type="text/css"> # ...

htmlcss

Generating an Xpath for the selected element with the help of Javascript or Jquery - here's how!

On my website, I have implemented a click event on an element. When a user clicks on this element, I want to generate the XPath of that particular element starting from either the html or body tag, also known as the Absolute Xpath. For example, if I click ...

javascriptjqueryhtmlxpath

Tips for creating a popout feature for a YouTube player and getting the video to play

Currently, I am facing an issue with my YouTube player. Whenever I try to play a video using the YouTube API, it redirects to another page before starting playback. Is there a way to make the player pop out on the same page when a user clicks on an image, ...

javascriptjqueryhtmlangularjsyoutube

Issues with NativeScript WebView displaying HTML file

Having trouble loading a local HTML file into a webview in my NativeScript (typescript) application. Despite using the correct path, it's not loading and instead shows an error. <WebView src="~/assets/content.html" /> An error message stati ...

htmltypescriptnativescript

The database server is not appearing on the main.js page of the client

My client's main.js file contains code that is meant to display previous form entries on the webpage, but after submitting the form, no entries appear on the HTML page. My server is running on port 7777 and the root route works in Postman, as does the ...

javascripthtmlexpressvite

I'm a complete programming newbie and I want to start learning JavaScript, jQuery, and other programming languages. Where should I

Coming from a design background with zero programming knowledge, I have recently learned XHTML and CSS. Now, I am eager to expand my skills by mastering JavaScript, jQuery, and more. Where should I begin? This will be my first foray into programming. Whil ...

javascriptjquerycssxhtml

Is it possible to arrange the final divs on top of the initial ones without any overlap between them?

I have a script for uploading files that displays all previously uploaded images in divs with the class "download". When I use a jQuery script to add more pictures, it puts them in divs with the class "upload". I want these new uploads to be displayed ab ...

htmlcss

CrispyForms: FormHelper - Easily move the </form> tag to a different location and manage multiple forms from a single model

When utilizing FormHelper and invoking the Form using {% crispy form %}, it generates a Form wrapped within <form> tags. However, my Template is structured into two columns. The first column displays the dynamically generated {% crispy form %}. The ...

pythonhtmldjangodjango-formsdjango-crispy-forms

Can a dynamic react component be inserted into a standalone HTML document without the need for file downloads or server support?

I am implementing React for a Single Page Application (SPA) project where users can customize a component's font size, color, etc., and then embed this customized component into their website. I'm looking for a way to bundle the component and pre ...

javascripthtmlreactjsiframewidget

While working on creating a game prototype using CSS and Javascript, I encountered an issue where the icons were losing their color when trying to print the document

When I try to print, the icons like ...

javascriptcssprinting

There is an issue with my HTML due to a MIME type error

I am currently facing an issue with my project. I have developed a node js server and now I want to display an HTML file that includes a Vue script loading data using another method written in a separate JS file. However, when I attempt to load the HTML f ...

javascripthtmlnode.jsvue.js

Presenting CSV data in a tabular format using Angular and TypeScript

I am facing an issue with uploading a CSV file. Even though the table adjusts to the size of the dataset, it appears as if the CSV file is empty. Could this be due to an error in my code or something specific about the CSV file itself? I'm still learn ...

htmlangulartypescriptnpm

Displaying text on an image when hovering over it

I have tried various solutions that I came across, but none of them have been successful so far. My goal is to display dynamic text over an image when the user hovers over it. Additionally, I would like to change the hover color. Currently, the text is alw ...

htmlcsshover

repeating the identical content in the same setting

I am encountering an issue with jquery as I have 2 different sets of icons, each of which I want to do the same thing: My primary codes are <ul> <li> <a href=""> <i class="fa fa-facebook"></i> ...

javascriptjqueryhtmlcss

Creating a visual feast: A guide to crafting a stunning image gallery

Is there a way to ensure all the pictures in a table are the same size, orientation, and inline? Currently, my images vary in size and rotation. The CSS I have applied is styling only the first image differently from the rest. Any help is appreciated! CSS ...

htmlcss

Struggling with deploying my Django app on Heroku due to an error related to the collectstatic storage.py path

I've been facing challenges in deploying a django project to Heroku, specifically with the static files. Even though I have successfully set everything up in the past, I am encountering issues this time. Below is the traceback I received. It seems to ...

pythondjangowebheroku

Uneditable border in Bootstrap table

I am currently utilizing Bootstrap table to showcase some basic information, however, I am facing a peculiar problem. Upon using the bootstrap-table stylesheet, the table displays as desired without an outer border. However, upon initializing the styleshe ...

htmlcsstwitter-bootstraphtml-tablebootstrap-4

Efficiently incorporating styles and CSS, as well as Bootstrap CDN, into window.print() while utilizing Vue.js

I am trying to print from my Vuejs component and apply CSS and Bootstrap styles to the printed page. Currently, I am using window.print() inside the mounted lifecycle hook as shown below: export default { mounted() { ...

javascriptcssvue.jsbootstrap-4

Having trouble with Isotope masonry functionality

While experimenting with Isotope from , I tested the reLayout method using the provided example found at . I copied the css and js to my page () but encountered an issue where clicking on the first element caused all other elements to move to the first col ...

javascriptjquerycss

Discover a class located following a specific element even when they are not directly related

There is a group of elements all with the class month. Some of them also have the class cal, while only one has the class today. The goal is to locate the first element with the class cal, but only after finding the element with the class today. The chall ...

javascriptjqueryhtml