Spacing issues in Bootstrap footer on mobile devices when resizing left and right

Recently, I added a new footer to my Twitter Bootstrap website and noticed that when I resize the window, gaps appear on the left and right sides.

I understand that this issue is related to the following CSS code...

@media (max-width: 767px) {
    body {
        padding-left: 20px;
        padding-right: 20px;

}

Upon changing the padding to 0px, the footer gaps disappear, but it also leads to the entire page losing its margin.

Even after attempting the following adjustment, the issue persists:

@media (max-width: 767px) {
    footer {
        padding-left: 0px;
        padding-right: 0px;

}

Has anyone encountered a similar problem before?

htmlcsstwitter-bootstrap

Answer №1

One possible solution is to experiment with negative margins, similar to what the navigation bar does. While I haven't tested it myself, a code snippet like the following might do the trick:

@media (max-width: 767px) {
    footer {
        margin-left: -20px;
        margin-right: -20px;
    }
}

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

Scraping HTML data without <div> tags with Scrapy - how to do it?

After spending hours attempting to extract a specific data set for use with Scrapy in a web scraping project, here is the current python code: bedrooms_info = house_listing.css( '.search-results-listings-list__item-description__charact ...

pythonhtmlweb-scrapingscrapy

Loop through an HTML table in order to emphasize variations in cells that contain multiple comparison items

I am interested in highlighting variances between the initial row of a table and all other rows based on columns. I have successfully managed to achieve this when each cell contains only one item/comparison. However, I would like to expand this to include ...

javascripthtml

What is the best way to prevent scrolling in one column while allowing another column to scroll normally?

On my website, I have two divs positioned side by side. I am looking to keep one div fixed without scrolling while allowing the second div to scroll normally. How can I achieve this? For a clearer visual, refer to this image: Sample Image ...

htmlcssbootstrap-5

The scrolling action triggered by el.scrollIntoViewIfNeeded() goes way past the top boundary

el.scrollIntoViewIfNeeded() function is used to scroll to element el if it's not within the visible browser area. Although it generally works well, I have encountered some issues when trying to use it with a fixed header. I have provided an example s ...

javascripthtmlcssscroll

Post request failed as it was made from a site other than the main page

Having some trouble with the POST functionality in Node since I am new to it. I have a basic website set up, with the following code: app.get('/sign',(req,res)=>{ res.sendFile(path.join(__dirname, 'static', 'index.html' ...

htmlnode.jshttpwebpost

Create unique list markers by utilizing the "::marker" and "content" properties

When attempting to create a list with custom list markers, I encountered an issue. An example from MDN is provided: li::marker { content: '✝ '; font-size: 1.2em; } <p>Group known as Mercury Seven:</p> <ul> <li& ...

htmlcsssafaripseudo-element

Align the content of a collapsed bootstrap row vertically

In a row, I have two columns, each containing their own row. When the page width hits the 'xs' break-point, the left column's row will stack its columns on top of each other. The right column is taller than the left column, which leaves a l ...

twitter-bootstrapcssflexboxbootstrap-4

Guide on redirecting to a different URL when the query string contains a particular keyword

Currently, I am facing an issue with the code below that is used for redirection based on URL string matching. The error message "Warning: Use of undefined constant" is being thrown and the code fails to work if the string is case sensitive. Can anyone a ...

phphtmlstring

The Challenges of Parsing HTML Source Code for Web Scraping

I've been attempting to scrape data from this website: (specifically rare earth material prices) using Python and BeautifulSoup. My query pertains not to Python, but rather the HTML source code of the site. When I utilize Firefox's "Inspect Elem ...

htmlcss

IE causing Ul LI Menu to not display as Block

I'm encountering an issue with my menu. It displays correctly in Firefox and Chrome, but in IE8 it appears as a vertical list instead of a horizontal menu. I have included a doctype and I am linking to the HTML5 JavaScript via Google, so I'm not ...

htmlcssinternet-explorerhtml-lists

What is the syntax for implementing an if-else statement?

Just starting with algolia and looking for a hit template. Please take a look at the script below for the text/html template needed: <script type="text/html" id="hit-template"> <div class="hit"> <div class="hit-image"> <i ...

javascriptphphtml

Display elements with a particular class using jQuery

I want to utilize jQuery to show all elements within a UL that have the class .active. Is this how my code should look? if ($(this).hasClass('active')) { $( ".active" ).show(); } This is my HTML structure <ul> <li>&l ...

jquerycssshow

Leveraging CSS attribute selectors within JSX using TypeScript

With pure HTML/CSS, I can achieve the following: <div color="red"> red </div> <div color="yellow"> yellow </div> div[color="red"] { color: red; } div[color="yellow"] { color: yellow; ...

htmlcssreactjstypescript

Dynamically updating the scroll area in Ionic using real-time data

Hello, I am currently working on an Ionic project and have created a code pen for it. At the moment, the code pen just displays an image with two buttons for zooming in and out. However, I have encountered an issue. When I click on zoom in and scroll to ...

javascripthtmlangularjsionic-framework

I am facing an issue where the images (IMG) do not align properly when I test the responsiveness using Chrome

Seeking assistance with a design challenge I encountered. The first image showcases a well-structured table on desktop view, while the second image displays an undesired layout when examined using Chrome DevTools. A link to the problematic layout can be fo ...

htmlcssbootstrap-4

Text overlay on Material UI Card

I am currently using the Material UI Card and CardMedia components in my application, but I am having trouble with overlaying text on top of the image. Below is a simplified version of what I have been attempting: <Card> <CardMedia image={this. ...

cssreactjsoverlaymaterial-ui

Tips for utilizing @htmlattributes when configuring a datepicker:

Hello, I am attempting to change a simple input field into a date form. I have tried using the DateTime property with @Html.TextBoxFor(model => model.dateFin, new { type = "date" }) but it was not successful. As a result, I am resorting to using a simpl ...

htmlasp.net-mvcdatepicker

Sending Data Between Web Applications in JavaScript

Currently developing a take-away application using AppLab, which uses JavaScript. Due to the limitations of modifying HTML code in AppLab, I had to utilize an external web app for the checkout process (unable to integrate PayPal buttons in AppLab). When th ...

javascripthtmlgoogle-apps-script

Create a div element within the parent window of the iFrame

I'm trying to figure out how I can click a button within an iFrame that contains the following code: <td class="id-center"> <div class="bs-example"> <a id="comments" href="comments.php?id=$id" name="commen ...

javascriptjqueryhtmliframe

Having trouble with innerHTML.value functionality?

Recently, I've been delving into creating a JavaScript program that fetches Wikipedia search results. Initially, everything seemed to be working fine as I was able to display the searched item using the alert() method. However, for some reason, it now ...

javascriptjqueryhtmlajax