Content in the div stretches when viewed on a mobile device

I have created a responsive page that is centered, but when viewed on a mobile window, I want the text to stretch and remove any white space on the sides. How can I achieve this using Bootstrap 4?

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.alignLeft {
    float: left;
}

.indented{padding-left: 50pt; padding-right: 50pt;}
// Other CSS properties...
        
<nav class="navbar">
    <div class="center3">
        <a class="navbar-brand mx-auto" asp-controller="Home" asp-action="Index">
            <i class="fa fa-cubes"></i> GEP
            <span class="header-logo-text">Learning Management System</span>
        </a>
    </div>
</nav>
// Other HTML elements...
htmlcssbootstrap-4

Answer №1

It is recommended to utilize a media query:

To gain more understanding, you can visit this media query link

Please give it a try.

@media screen and (max-width: 768px) {
  .center2{width: 100%;}
  .center2 img {
    width: 100% !important;
    float: left !important;
    height: auto !important;
    padding: 15px 0;
}
}

Hope this information is helpful.

If you need further clarification or assistance, feel free to reach out.

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
// Other CSS styles go here...

<nav class="navbar">
    <div class="center3">
      <a class="navbar-brand mx-auto" asp-controller="Home" asp-action="Index">
        <i class="fa fa-cubes"></i> GEP
        <span class="header-logo-text">Learning Management System</span>
      </a>
    </div>
  </nav>
  <div class="jumbotron vertical-center">
    // More HTML content goes here...
  </div>
  <div class="footer">
      <div>
        <a href="">
          <h3>Gep Learning Management System</h3>
        </a>
      </div>
  </div>

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

Expand the object by clicking on it, causing the surrounding objects to move outside the viewport instead of appearing below

I'm facing a challenge with 3 squares inside one container, each occupying 33.33% of the viewport and placed next to each other. When I click on one square, it should expand to full viewport width and reveal hidden content, while the other two remain ...

jquerycssviewportexpand

Understanding CSS classes in ReactJS Material UI componentsJust wanted to clarify some things

When it comes to styling Material UI components, the recommended approach is to utilize their useStyles function. Here's an example: const useStyles = makeStyles(theme => ({ root: { marginTop: '15px', display: 'f ...

cssreactjsmaterial-ui

php redirecting form data

Being a beginner in PHP, I'm aiming to create a script that can direct me to a specific address based on the value of an input form. Is this the right approach? index.html <form action="process.php" method="post"> <input type="text" nam ...

phphtmlforms

A step-by-step guide to displaying a list with material icons in a React JS application utilizing the Material

I tried implementing a dropdown list with Material-UI, including an icon on the left side. However, after following the documentation and adding the code for the icon, the dropdown list stopped working. InputProps={{ startAdornment: ( ...

htmlreactjsmaterial-uinext.js13tailwind-ui

Prevent the button from being enabled until the file input is updated

I want to create a form with an input file for uploading photos, but I need the submit button to be disabled until the input file has a value. Additionally, there are other validations that will also disable the button. Here is the structure of my HTML fi ...

javascripthtmlangularjsbuttonangularjs-ng-disabled

Challenges with resizing images in SVG using D3

I have an SVG image created using d3. I am facing an issue where the svg is extending beyond its parent div container. Here is the code snippet: <div id="test" style="{width: 500px; height:500px;}"> <svg></svg> </div> ...

javascriptjqueryhtmld3.jssvg

Dark Mode Caused by CSS Overriding Accordion

I'm currently using an accordion feature from Flowbite, but I am facing issues with it defaulting to dark mode upon page load. Upon inspecting the element, I discovered that there is some dark mode CSS included in the Flowbite package. In an attempt t ...

htmlcsscomponentstailwind-cssflowbite

The full background width is not being displayed as 100% on the

Unexpectedly, the "full left secondary-bg" background division on this particular page (http://goo.gl/OU4MkW) is no longer spanning the full width of the screen and I am unable to figure out why. This website is WordPress-based and constructed using the sk ...

phphtmlcsswordpress

Interactive Content Swapping: How to Use Javascript for Dynamic Link Updates

http://jsfiddle.net/bUjx7/42/ <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'> </script> <script type='text/javascript'> $(document).ready(function () { $('.fieldreplace ...

javascriptjqueryhtmlcss

Optimize HTML outputs in Smarty by reducing the file size

Is there a way to minify all output HTML templates in Smarty automatically? Would it be possible to set something like this: $smarty->minify = true; Additionally, I have come across the {strip} function but using it in every single .tpl file is not fe ...

htmlcompressionsmartyminify

Can BeautifulSoup be utilized to retrieve CSS from a webpage?

Currently, I am tackling a project that necessitates the full view of a webpage instead of just scattered lines entwined with images in HTML format. Is there a method to parse CSS alongside HTML using BeautifulSoup? Below is an excerpt from my code: from ...

pythonhtmlpython-3.xweb-scrapingbeautifulsoup

Clicking on text triggers image display

My journey in coding is just starting and I have a good understanding of the basics of HTML, CSS, Javascript, and jQuery. I am trying to make an image appear when I click on text but struggling with the implementation. I'm working on a restaurant web ...

javascripthtmlcsseventsonclick

Positioning a span to be below an input field

Below is the code for a Blazor component that includes a textbox which can be edited with the click of a button. @if (_editing) { <div class="floatingbox position-relative"> ...

cssbootstrap-4blazor-server-side

Text Module of the Divi theme

Issue Resolved (After noticing that Divi was adding padding twice to <ul>'s in their footer and Text Module, I created a new class to remove the padding-bottom from the sub-list item.) In a Divi text module, I created an unordered list with a s ...

csshtml-listsdivi-theme

"Exploring the magic of Vue.js and Three.js: A guide to seamlessly changing CSS style elements within an

I'm currently in the process of converting my Three.js project to Vue.js Within my Three.js scene, I have a 3D model with HTML points of interest attached to it. It is crucial that these points remain fixed to the model and consistently face the cam ...

javascripthtmlcssvue.jsthree.js

Navigating content with style: Horizontal scrolling feature in HTML5 & CSS3

How can I create a magazine-style website similar to asidemag.com using HTML5 and CSS3, with horizontal scrolling feature? ...

htmlcss

Incorporate an ASP table within an ASP table to enhance data organization and presentation

Is it possible to create a dynamic ASP.NET table structure similar to the one demonstrated below by nesting tables inside table cells? <table> <tr> <td>[Image]</td> <td> <table> <tr> ...

c#htmlasp.nethtml-table

Tips for creating space between flex elements in Bootstrap without disrupting the layout breakpoints

<div class="row"> <div class="col-sm-6" style="margin-right: 1px;">CONTENT</div> <div class="col-sm-6"> CONTENT</div> </div> When adding a margin to the first element, it causes th ...

htmlcssflexboxbootstrap-5

Blending HTML template and WordPress PHP file

I am facing a challenge while attempting to implement a Wordpress template on one of the pages of my website, specifically at http://www.windowblindshadeshutters.com/blog/. The blog has been successfully created, however, I am having trouble preserving our ...

phphtmlcsswordpress

Highlight or unhighlight text using Javascript

Currently, I am facing a challenge in highlighting specific words on an HTML page. Although I have succeeded in highlighting the desired element, I am struggling with unhighlighting the previous word when a new search is conducted. Despite my attempts to i ...

javascripthtml