When I switch to smaller devices, the content in my div gets covered by the following div

I'm struggling with my bootstrap setup. When I switch to small devices, my content overlaps with the next div. I've tried adjusting margins and positioning, but nothing seems to solve the issue. I suspect it has something to do with the relative position I'm trying to add for the SVGs at the bottom of each div.

Here's the HTML:

<div class="container-fluid  vh-100 " id="projects">
  <div class="row align-items-center mx-auto " id="cards">
    <div class="col-sm-6 col-lg-4 ">
        <div class="card" >
          <img src="pics/project1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      ...
    </div>
    <svg class="botp" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"></svg>
</div>

...

</div>

<!-- /contact -->

Here's my CSS:

#home,
#about,
#projects,
#contact{
  position: relative;
}

 #projects .botp{
   z-index: 1;
   position: absolute;
   bottom: 0;
   left:0;
 }
 #cards{
   z-index: 2;
 }
 #contact .botc{
   position: absolute;
   bottom: 0;
   left:0;
 }

Answer №1

Which browser are you currently using? I tested your code and did not encounter any overlap (I'm using Opera/Google Chrome).

Additionally, try adding height: auto to the div elements, it might resolve the issue :)

UPDATE:

(I now understand what you're referring to)

Adjust the z-index properties. Here is the updated code snippet:

CSS

#home,
#about,
#projects,
#contact {
  position: relative;
}

#projects .botp {
  z-index: 1;
  bottom: 0;
  left: 0;
  position: absolute;
}

#contact {
  z-index: 10;
}

#projects {
  z-index: 10;
}

.botc {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 200px;
}

#card-text {
  z-index: 10000;
}

.botp {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 500px;
}

.col-md-6 {
  z-index: 10;
}

index.html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="container-fluid  vh-100 " id="projects">
        <div class="row align-items-center mx-auto " id="cards">
            <div class="col-sm-6 col-lg-4 ">
            ...
            ...
            ...
            </div>
        </div>
    </div>
    ...
    ...
    ...
</body>

</html>

I hope this update resolves your issue :)

Answer №2

By simply inserting this CSS code, I was able to resolve the issue:

.card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

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

Issue with form submission using getElementById

I am struggling to submit a form that is generated by PHP echo. The getElementById function doesn't seem to be functioning properly. <?php include 'connect.php' ; $sql=mysql_query("SELECT mess_id,receiver,subject ...

Elevate column to top position in mobile display with Bootstrap

I am currently working with Bootstrap column classes and have set up four columns as follows: <div class="col-md-3"> @include('schedulizer.classes-panel') @include('schedulizer.time-span-options-panel') @include(&apos ...

Decode JSON data retrieved from a remote URL address

I am in need of assistance decoding this JSON code from a URL page. The JSON code on the URL is in the following format: {"current":{"artists_id":"55","albums_id":null,"albums_tracks_id":null},"html_current":"<li><p>Pr\u00e1v\u011b h ...

Styling Images in HTML with Text Overlays and Buttons using CSS

Hello everyone, I am new to this and struggling with formatting text over an image using a CSS button. I need the code to be responsive for mobile devices as well. Any help or advice on this would be greatly appreciated. Thanks in advance, Johnny_P This ...

How can I incorporate my styles into a separate css file for use in a React project?

Although it may seem simple, I am interested in incorporating SCSS into my React application for styling purposes. I understand that React will interpret all of my styles and render them in separate <style> tags within the <head> section. I hav ...

Tips for accessing a URL with a specific value in the HTML file

This form submits a URL in this format: <form action="search.php?search=" method="GET" id="search-form"> <input id="search-text" name="search" type="text" maxlength="30" placeholder="type keyword"/> <button type="submit" name ...

Creating a Form Input Field Based on a Selection List

I'm in the process of developing a small app to boost my productivity at work. Currently, I have some html/js code that includes a ul with a search filter. When I select an option, it opens a new tab with relevant text. Ideally, I want the outcome to ...

What is the most effective way to use Javascript to update an image depending on the selected value in a dropdown

My JavaScript skills are limited, but I have successfully created a form with 4 drop-down selection boxes on the left side for users to choose from (State, Car, Year, Condition). After making their selections, users can click a 'calculate' butto ...

How to apply unique styles to multiple elements with the same class using jQuery?

How can I add different classes to multiple div elements with the same class based on their content? <div class = "flag"> Yes </div> <div class = "flag"> No </div> <div class = "flag"> Yes </div> <div class = "flag"& ...

IE compatibility problem with the alignment of input group buttons and textboxes in Bootstrap v4

Encountering an issue with input group in IE while using bootstrap v4, working fine in Chrome. Specifically using IE 11 Here is my plunkr: input group bootstrap v4 Chrome display: https://i.sstatic.net/yXtEW.png IE display: https://i.sstatic.net/WiRz ...

Issue encountered when submitting form: Error identified as "Unexpected string expression without template curly in string"

As a novice in React.js, I am facing an issue where setState is not functioning properly when submitting a form. Any suggestions on how to resolve this problem? > class Home extends Component{ constructor(props){ > super(props) > ...

Tips for creating Card-Title responsiveness across various screen dimensions with Bootstrap 4

I'm a beginner in web design and I'm wondering if it's possible to adjust the font-size of the card-title and the size of the card image based on different screen sizes using bootstrap 4. When viewed on small screens, they appear too large. ...

Ways to create collapsible navigation bars in your website

As someone exploring client-side development, I may be misusing the term "collapsible" in my title. What I aim to accomplish in my web application is allowing users to collapse header bars into small chevrons and expand them back when necessary. I am on t ...

How should white space be managed in Bootstrap 4 cards when incorporating responsive column classes - wrap elements inside divs or apply classes directly?

In Bootstrap 4, when applying a responsive column class like "col-sm-8" directly to a "div" with the class "card", whitespace is added between the card border and content. This can be seen in the highlighted yellow area in the image below. https://i.sstat ...

Challenges with Table and <p> Spacing in HTML and CSS

My website is centered around tables. The body section of my site aligns with the bottom of the header nav bar. However, when I begin typing text in the body, it shifts down by a few pixels. Here are some examples: Before typing any text: After entering ...

What are the different ways in which :style is utilized in re-frame - with brackets, curly brackets, or simply without any characters?

For my current project, I am utilizing Clojure, ClojureScript, lein, shadow-cljs, Emacs, and CIDER to develop a dynamic web application. Typically, when building the project, I initiate the command cider-jack-in-cljs in Emacs, select shadow-cljs, opt for ...

Is it possible to iterate through div elements using .each while incorporating .append within an AJAX call?

After sending AJAX requests and receiving HTML with multiple div elements (.card), I am using .append to add new .card elements after each request, creating an infinite scroll effect. However, I am facing issues when trying to use .each to iterate over all ...

Is your PHP random advertisement feature malfunctioning?

<div id="bannerAd"> <?php //THIS SCRIPT RANDOMLY SELECTS AN AD. $randomAd = rand(1,3); switch($randomAd) { case "1": $adLink = "/sale.php"; $imageFile = "/images/saleAd.png"; ...

What is the best method for fetching data from PHP to display on my Angular page?

I am struggling to retrieve data from MySQL to display on my AngularJS page, using PHP as my server-side language. I can fetch the data from my PHP file but unable to render it on my page. If you have any alternative solutions, please let me know. Below i ...

Guide on how to align h1 in the navigation bar

I've been attempting to center text on a nav bar but haven't been successful. What could I be overlooking? // include external modules import React, { Component } from "react"; import { Navbar } from "reactstrap"; import { Menu } from " ...