When the device size is smaller, a <Div> section will not remain contained

My web page's top div spills out of its space and overlaps another part of the screen when viewed on tablets or mobile devices. I am using bootstrap grids, but it seems like I might be doing something wrong. Any assistance would be greatly appreciated.

Screenshot showing correct placement on a desktop PC

Screenshot showing incorrect placement on an iPhone


    <div class="container mt-5">
    <div class="row no gutters header text-left mt-5">
        <div class="col-sm-12">
            <h1 id="testing-1" class="display-4 text-left">Digital Study Skills Tutor</h1>
            <p class="lead">Free self-help study skills resources for university students</p>
            <a class="btn btn-lg btn-primary" href="signup.php">Sign Up</a>
        </div>  
    </div>
</div>


    .site-header {
  background: url(img/home-header.jpg) no-repeat center;
  background-size: cover;
        }

.site-header .layout-hero {
  min-height: 100vh;
}

    .display-4 {
  font-size: 2.25em;
  font-weight: 500;
  color: white;
}
htmlcsswebresponsive-designbootstrap-4

Answer №1

While I wasn't able to create this exact scenario, here is my take on it. To prevent overflow of text and buttons in the next div, you can utilize a media query to restyle components on your page. This involves adjusting font sizes and button dimensions to ensure they fit properly on smaller screens. By tweaking these elements within a media query, you can achieve the desired result for responsive web design. Learn more about Media Queries

Here's an example of a media query for smaller screens:

@media (max-width:576px) {
  .testing-1 {
        font-size: x;
    }
   .lead {
        font-size: y;
    }
    .btn-lg .btn-primary {
        width: z;
    }
}

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

Transform cursor with jQuery on hover and click events

Currently, I'm implementing an image zoom feature, and I want to incorporate two different mouse states for hover actions. #1 Upon hovering over the containing <div>, the cursor should change to a 'plus' symbol. #2 Once the user cl ...

jquerycsshovercursortoggle

django leaflet - dynamically adjusting controls on HTML page with the click of a button

Presently, I am utilizing django-leaflet along with leaflet-draw controls. My goal is to make the draw controls accessible (and add them to the map) based on a specific event, such as toggling a button. Below is a basic jQuery structure that I currently h ...

javascriptjqueryhtmldjangoleaflet

Displaying jQuery buttons in Internet Explorer 6

We utilize JQuery to style our HTML buttons with the command $('#button').button(). Although it functions well, there is a noticeable delay in Internet Explorer 6 where the unstyled default HTML button briefly appears before the JQuery formattin ...

jqueryhtmljquery-uibuttoninternet-explorer-6

What steps can be taken to prompt the layout to transition?

I have an element that sticks to the top based on the current scroll offset. The issue is that the layout doesn't update when there is space available after the stuck element. This creates a ghost gap where the stuck element used to be... http://fidd ...

javascripthtmlcssgrid-layoutsticky

How can I set up an automatic refresh for an angularjs iframe?

This code utilizes Angularjs and is designed to be run on a localhost server. The first part of the code can be found in index.html: <iframe src="{{Url}}" width="100%" height="500"></iframe> The second part of the code is located in app.js: ...

htmlangularjsiframe

Could you kindly repair the table for me?

I have a table that I am working on. All values and buttons in the table need to be centered horizontally and vertically. However, there is an issue where if I enter a button link as a value of any row, the button and other text values become broken and ...

htmlcssbutton

The navigation menu refuses to remain fixed at the forefront of the screen

Creating a Navigation Menu in Java Script: $(function() { var nav = $('#nav'); var navHomeY = nav.offset().top; var isFixed = false; var $w = $(window); $w.scroll(function() { var scrollTop = $w.scrollTop(); var sho ...

javascripthtmlcss

Steps to halt webkit animation within a div located inside a circle:

I have a series of nested circle divs, and I want to give them a pulse animation. The issue is that the text container is within one of these circles, causing the animation to apply to the text as well. I am unable to move the text container due to potenti ...

javascriptjqueryhtmlcss

Turning a text input field into a functional button

I am attempting to create a function that will read the text from a text area, convert it into a string, and display it somewhere on the page. I'm expecting it to show up within the paragraph with the id "biljeske", but currently nothing is being disp ...

javascripthtml

The color of the text in Angular mat-select remains unchanged

In my Angular application, I am utilizing mat-select. My goal is to alter the text color within the select component, however, no matter what I try, the color remains unchanged. <mat-select style="color: red" [(ngModel)]="someValue"> <mat-optio ...

cssangularmaterial-design

Can you explain the function of mdLiveAnnouncer in Angular Material and how it operates?

Could someone provide an explanation of $mdLiveAnnouncer using this code snippet? module.controller('AppCtrl', function($mdLiveAnnouncer) { // Making a basic announcement (Polite Mode) $mdLiveAnnouncer.announce('Hey Google'); // ...

javascripthtmlcssangularjsangular-material

Arrow navigation at the bottom of CSS selected items

I'm struggling to create a CSS-styled navigation bar with a white arrow pointing upwards at the selected item. The challenge is making sure the arrow stands out from the background and aligns properly with the text box. It should look similar to this ...

htmlcsscss-shapes

Update the text inside a paragraph using jQuery

When attempting to modify two values within a paragraph using jQuery, I encountered an issue where only one value was successfully updated, leaving the other empty. <div class="container"> <p class="lead custom_bg" id="comment"> updateme! ...

javascriptjqueryhtmlcssajax

The javascript code appears to be functioning properly on desktop browsers but is not functioning as expected on Chrome's mobile browser

On my WordPress site, I have created a Java Bootstrap loan calculator that works perfectly on desktop. However, when I use Chrome on mobile, it is not functioning properly. I tried using the wp-coder plugin and also manually added the necessary code. Int ...

javascriptwordpressbootstrap-4google-chrome-app

Connecting a CSS file with an HTML document

Having an issue with my CSS. For instance, here is a snippet from my CSS file .readmore { font-style: italic; text-decoration: none; color: #509743; padding-left: 15px; background: url(../images/more.png) no-repeat 0 50%; } .readmore: ...

htmlcss

Manage your video playback by tracking the movement of your mouse on the screen

Is it possible to use mouse position on screen to control a video? Imagine, if I have my cursor on the left side of the screen, the video starts from the first frame. But as I move my cursor to the right side, the video progresses until the cursor reaches ...

jqueryhtmlvideocontrolsmousemove

Issues with Google Fonts displaying poorly on Chrome

While working on my project, I've encountered an issue with the rendering of Source Sans Pro from Google Fonts in Chrome. Sometimes the font completely breaks, and unfortunately, I haven't been able to pinpoint when or why this occurs. At times, ...

cssgoogle-chromefonts

How can I alter the text color on hover within a Material UI card? My goal is to have the text color change when hovering over the card itself, rather than just the text

When I apply CSS to the card hover effect, it works fine. However, I also want to change the text color along with the card color on hover. card: { maxWidth: 350, height: 300, '&:hover': { backgroundColor: '#373737 !impor ...

cssmaterial-uicard

Finding the Origin and Automatically Forwarding

I'm having an issue with my code. It's not functioning as expected. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml ...

javascripthtmljsonjsonp

I need to remove the mobile view of my Angular application because it is not optimized for smaller screens

I have implemented Angular in my web application, but unfortunately it is not mobile responsive. In order to address this issue, I would like to disable the mobile view and instead display a message informing users that mobile view is not supported for t ...

cssresponsive-design