The content spilling out of a Bootstrap 4 row

UPDATE: Here is the link to the javascript fiddle

When the text on the screen becomes too large for the row, it overlaps onto other rows instead of increasing the height of the row. This could be due to setting the row heights as a percentage value in order to evenly space and align vertically the elements on the HTML page. How can I fix this issue of text overlapping onto adjacent rows? Should I explore options for vertically aligning the rows without specifying their height? Or should I maintain the current setup and add an overflow property to instruct each row to expand its height when necessary?

All relevant images and code:

Screenshot of fullscreen view (no issues):

https://i.sstatic.net/pzNFf.jpg

Screenshot showing text overlap on middle row element in smaller screens:

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

Screenshot displaying text overlap on bottom row in smaller screens:

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

All HTML code used on the page:

<div id="landing-page" class="text-uppercase">
    <div class="row hidden-lg-up" style="height:20%;overflow-y:auto;">
        <div class="col-xs-3 flex-xs-middle">
            <img width="100" src="images/monster2.png" />
        </div>
        <div class="col-xs-3 offset-xs-6 flex-xs-middle">
            <img class="pull-xs-right" width="100" src="images/monster4.png" />
        </div>
    </div>
    <div class="row" style="height:95%;overflow-y:auto;">
        <div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle">
            <img width="80%" src="images/monster2.png" />
        </div>
        <div class="col-md-12 col-lg-6 flex-xs-middle ">
            <div id="motto-text" style="text-align: center;">
                <h5 class="text-muted display-6">the vegan repository</h5>
                <h1 class="display-3">
                    find vegan stuff* near you.
                </h1>
                <a id="try-now-button" class="with-border clickable" href="#search-filter-page">
                    <h5 class="text-center medium-text">try now</h5>
                </a>
            </div>
        </div>
        <div class="col-xs-1 col-sm-2 col-md-3 hidden-md-down flex-xs-top flex-sm-middle">
            <img class="pull-xs-right" width="80%" src="images/monster4.png" />
        </div>
    </div>
    <div class="row" style="height:5%;overflow-y:auto;">
        <h4 class="display-6 flex-xs-bottom">
            *Stuff like restaurants, meat alternatives, dairy alternatives, and much more!
        </h4>
    </div>
</div>

CSS styles applied to the page:

div#landing-page {
    background-color: #696969;
    height: 100%;
    padding: 110px 40px 0px 40px;
    overflow-y: auto;
    min-height:470px;
}

UPDATE: Here is the link to the javascript fiddle

Answer №1

Okay, now the question is crystal clear. The issue was a breeze to rectify.

The glitch lies within this particular div. You've set it to col-md-12 but failed to include col-xs-12 when the screen size is xs

 <div class="col-md-12 col-lg-6 flex-xs-middle ">
      <div id="motto-text" style="text-align: center;">
        <h5 class="text-muted display-6">the vegan repository</h5>
        <h1 class="display-3">
                    find vegan stuff* near you.
                </h1>
        <a id="try-now-button" class="with-border clickable" href="#search-filter-page">
          <h5 class="text-center medium-text">try now</h5>
        </a>
      </div>
    </div>

Therefore, the most straightforward solution would be to add the col-xs-12 class to prevent any overlapping issues.

Take a look at this example

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

Updating borderWidth dynamically in react native fails to produce the desired effect

Here is the code I am working with: const [focused, setFocused] = useState(false); <TextInput style={{ ...styles.inputStyles, borderColor: `${focused ? colors.darkPurple : "#b8b8b850"}`, borderWidth: `${focused ? 3 : 1}`, }} placeh ...

Leveraging jQuery selectors to manipulate data received from an Ajax response

I am encountering an issue with an Ajax call and response. Previously, I had a block of regular javascript code that successfully transformed my select element into a select2 widget. However, when I attempt to convert the select element into a select2 usi ...

Creating a personalized navbar design using Bootstrap

I'm attempting to build a navbar using bootstrap 4: However, I am uncertain of how to achieve this :/, can anyone offer any advice?! I am specifically interested in the lines on the left and right of the navbar, as well as the image centered in the m ...

Integrating AngularJS code into dynamically generated HTML using JavaScript

I am currently utilizing an outdated version of AngularJS (1.3). I have a page where I need to dynamically display different content based on database values. If the user interacts with the page and changes the database value, I want the displayed content ...

The video.play() function encountered an unhandled rejection with a (notallowederror) on IOS

Using peer.js to stream video on a React app addVideoStream(videoElement: HTMLVideoElement, stream: MediaStream) { videoElement.srcObject = stream videoElement?.addEventListener('loadedmetadata', () => { videoElement.play() ...

Why does my element appear to be a different color than expected?

I've developed a sleek wind map (check out for reference). Using a weighted interpolation every 10ms, I generate uVector and vVector data to calculate wind speed. Based on this speed, each point is assigned a specific color as outlined below. if (we ...

The background color of the HTML element is not displaying properly in Internet Explorer 8

Currently, I am using the <body> tag to wrap three divs on a website where all background colors are set to white. In the CSS, I have specified the background color as #fff for the html and body tags. The site displays correctly in every browser exc ...

Tips for organizing the data you have collected from the table

After successfully printing all the data from my database, I am facing a challenge in designing my data effectively. The table I am working with is called post_tbl and it has columns named post_id, post_message, and post_date. This is the query I am usin ...

AngularJs is being used to extract data from Firebase with the help of $value, $id, and

I have been working on retrieving data from Firebase in my HTML using AngularJS. Everything is functioning well, however, when I access the child node, the data is displayed in an unexpected format. Please refer to the images below for more details: This ...

Issue with Animate.css animations not working in my Vue 3 application

My goal is to incorporate some basic HTML animations into my Vue 3 application, however I am encountering issues with the Animate.css examples. More specifically, even after installing the animate css dependency using npm install animate.css --save, the s ...

Trouble with Div Alignment in Web Browsers: Firefox vs. Google Chrome

I have encountered an issue with the layout of my website when using the Div element. While it appears correctly in Internet Explorer, the display gets distorted in Firefox and Google Chrome when the div is expanded. I have searched online for solutions b ...

What are some ways to display HTML content as a string using JavaScript?

Below is the javascript code I am currently using: var html = '<div class="col-lg-4 col-references" idreference="'+response+'"><span class="optionsRefer"><i class="glyphicon glyphicon-remove delRefer" style="color:red; curso ...

Crafting emails with text and images that adapt seamlessly for viewing in Outlook365, Gmail,

I have a PowerShell script that generates an HTML file named email.html. This file contains inline CSS and base64 encoded images, and it is sent to me daily as part of my website reports. I would like all the content (text/images) in the body of this emai ...

Implementing Material-UI’s FlatButton and Dialog in ReactJS for dynamic TableRow functionality

I am working with Material-UI and have implemented a <Table> component. Each dynamically rendered <TableRow> in the <TableBody> needs to include a button (<FlatButton>) within one of the columns. When this button is clicked, a <D ...

What is the best way to apply a CSS class to a div element without affecting its child elements using JavaScript?

Currently, I am using JavaScript to add and remove a CSS class through a click event. Within my div structure, I have multiple similar divs. While I can successfully add and remove the class from my main div, I am facing an issue where the class is also ap ...

Display the text and values of textareas/inputs located within a designated section of a form

I am looking to extract the labels and values of specific textareas and input tags on my website. I don't want to capture all of them, just those within a particular area. For example, I only want to retrieve the values that come after the textarea wi ...

The ng-route feature seems to be malfunctioning and I am unable to identify the error, as no information is being displayed in the console

Here is the code in my boot.php file where I have set up the links <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a href="#/valley">Valley</a></li> <li role="presentation"><a href="#/beach"> ...

What is the best way to use a button to hide specific divs upon clicking?

Is there a way to use a button onclick event to hide specific divs within a parent div? I've tried using .toggleClass('.AddCSSClassHere') but I'm not sure how to apply it to multiple divs. The jQuery snippet provided only allows me to h ...

Is it feasible to incorporate the CSS and Bootstrap (CDNs) specific to an HTML component without affecting the styling of other pages?

One way I am able to recycle the HTML component is using this code: $.get("nav.html", function(data) { $("#fulloptions").replaceWith(data) }) However, there’s a conflict because nav.html uses a different version of Bootstrap than my index file does ...

Using JavaScript to dynamically insert HTML content and create a toggle effect

Within a div, I have a collection of large images that I am attempting to insert into another div using JavaScript toggle functionality. Please test the code snippet provided below. $(".toggleimages").on("click", function(e) { e.preventDefault(); ...