Browser causing images to display with unnecessary spacing on mobile screens

My Bootstrap 5 page is designed with multiple sections featuring different background colors, and I've incorporated ragged edge images to create irregular borders between some of these sections:

https://i.sstatic.net/0uwzU.png

The top image resides in the blue section, while the bottom one is part of the green section. Due to the seamless alignment, they appear connected to the middle section. This layout looks great on desktop but when viewed on a mobile screen, the browser introduces a gap between the image and the section border:

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

I've ruled out the possibility of it being related to SVG files as I even converted them into PNGs without resolving the issue. In my actual code, the SVGs are linked externally rather than inline as shown here. Despite inspecting the code using F12 tool, I couldn't find any margin or padding values causing this inconsistency.

Any suggestions?

htmlcsssvgbootstrap-5

Answer №1

After some searching, I came across a helpful solution in a different SO post.

Dealing with extra space below images inside a div

It turns out that the issue arises from images being set to display:inline, which adds extra space to accommodate text with ascending or descending letters.

To resolve this problem in my case, switching the display setting of the image elements to block (using the d-block class in Bootstrap) did the trick.

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

Answer №2

Encountered a similar issue and I resolved it by enclosing the SVG sections within a <div> element set to 100% width with no padding or margin. This should fix the problem you are facing.

<div class="container-fluid bg-primary px-0">
  <div class="container">
    <p class="py-5 mb-0">Some Content</p>
  </div>
  <div class="w-100 m-0 p-0">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1491 57.8" style="enable-background:new 0 0 1491 57.8;" xml:space="preserve">
        <style type="text/css">.st0 { fill: #F6F4F1; }</style>
        <path class="st0" d="M-1.2,64c0-23,0-37.2,0-36.5c0,20.9,22.8-6,36.6-6s19.8-1,39.6-1s32.7-2,37.7-2s78.3,2,84.2,2s55.5,4,67.4,4 s42.6,6,90.2,3s166.4-1,166.4-1s46.6-9,54.5-3s48.5,1,76.3,1s27.7-1,58.5,2s78.3,3,101,0s66.4-3,66.4-3s45.6-2,50.5,1s55.5,3,78.3,0 c22.8-3,51.5-5,61.4-3s59.4,9,68.4,6s42.6-2,48.6-4s49.5-4,58.4-3s48.6,3,48.6,3s5.9-8,22.8-8c16.8,0,23.8-2,29.7,0s21.8,11,37.7,11 s22.8-6,30.7-6s24.8-1,47.6-2s31-1.1,31-1.1l0.2,47C1491.3,63-1.2,62.6-1.2,64z"/>
      </svg>
  </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

The Challenge with jQuery Nano Scroll

I recently added the jQuery Nano Scroll plugin to my HTML page. However, I am facing an issue where the scrollpane is not visible. When I inspect the div using Chrome, the scrollpane appears. Any suggestions on how to resolve this? Here's a snippet ...

jqueryhtml

How can I eliminate the white bar elements from my dropdown menu? Also, seeking guidance on replacing an empty <div> tag in a boolean query

Can anyone help me understand the strange white border around my dropdown menu and guide me on how to remove it? I am currently using DropdownButton from react bootstrap. I have attempted to adjust the CSS with no success. Here is the code I tried: .Navig ...

cssreactjstypescriptsass

Guide on altering the cursor icon during an AJAX operation within a JQuery dialog

When I have a JQuery dialog open and make some $.ajax calls, why can't I change the cursor? I want to display a progress cursor while the code is processing so that users can see that the action is still ongoing. However, even though I update the CSS ...

jquerycssajaxcursor

There seems to be an issue with the <mat-form-field> where normal input functions correctly, but encounters an error when trying to use mat

I've searched through other inquiries, but none have provided the solution I am looking for. <mat-form-field> <mat-select matInput placeholder="Favorite food"> <mat-option *ngFor="let food of foods" [value]="food.value"> ...

htmlangularweb

Python form submission error code 405 encountered

I recently developed a simple WSGI Server using Google app engine. Here's an example of the code: import webapp2 class MainHandler(webapp2.RequestHandler): def get(self): self.response.write(''' ...

pythonhtmlgoogle-app-engine

Is it possible to automatically refresh a webpage with the same URL when accessed on the same server?

Is there a way to trigger a URL page refresh using JS code located on the same server? For example, I have a URL page open on multiple devices connected to the same server. How can I ensure that when I click 'Update,' the page refreshes simultan ...

javascriptphpjqueryhtml

Switch up the arrangement of layout rows and columns using Bootstrap and CSS

On my desktop screen, the order of cols in Bootstrap is as follows: COL-A COL-B COL-C <div class"container"> <div class="row"> <div class="col-lg-4 col-md-4">Text 1</div> <div class="col-lg-4 col-md-4"><img sr ...

cssbootstrap-4

The jCapSLide Jquery Plugin is experiencing compatibility issues in Chrome browser

While this JQuery plugin works perfectly in Internet Explorer and Firefox, it seems to be malfunctioning in Chrome. The plugin is not being recognized at all by Chrome, and the captions are appearing below the image instead of on top with a sliding effect. ...

javascriptjquerycssgoogle-chrome

Utilize the Tab key in Textarea fields to insert a tab character ( ) instead of navigating to the

My current issue involves utilizing an HTML textarea named userInput. Whenever I press the tab key, it simply shifts focus to the next element instead of inserting a tab character or some spaces within the textarea. Is there a way for me to configure the ...

javascriptjqueryhtmluser-interfacetextarea

What is the best way to incorporate text below grid columns in html?

Can you show me how to insert text below a column using the grid system? Here is what I am trying to accomplish Here is the code I have created: .grid{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: 240px 240px; row-g ...

htmlcss

I possess a button that decreases the value of a number in the database when pressed. I desire for this action to occur repeatedly without fail

I have a button that, when pressed, decreases a number in my database by one. I want this action to decrement the number each time it is clicked. Code in HTML and PHP <form method="post"> <div><?php $username = "root" ...

phphtmlmysqlsql

Tips for creating a responsive <hr> tag

Help needed with adjusting the horizontal line tag on a webpage created using HTML, CSS, and Bootstrap. The issue arises when the window size changes to extra small. Initially, the hr tag was set to 400px, which looked great on full-screen view. However, ...

htmlcssresponsive-designbootstrap-4

Animating the fixed location with CSS and JQuery

I'm attempting to create a seamless transition from one form field type to another. However, when I add another <input> element, the following elements do not animate into their static positions. $("#switchlogin").click(function() { //Creat ...

javascriptjqueryhtmlcss

Is there an issue with implementing autosuggestion and tagging functionalities in jQuery?

My script is designed to suggest values based on user input and then convert the selected value into a tag. However, when a value is selected from the drop down menu, only the first 2 or 3 characters are tagged. You can see the script in action on js fiddl ...

javascriptjqueryhtmlcssautocomplete

Chrome browser experiencing a disappearing vertical scroll bar issue on a Bootstrap Tab

<div class="tabs-wrap left relative nomargin" id="tabs"> <ul class="nav ultab" id="fram"> <li class="active"><a href="#history" data-toggle="tab" id="history1" >History< ...

javascripthtmlcsstwitter-bootstrapscrollbar

Verification cannot be completed with the bootstrap modal

I want to implement the use of a bootstrap modal when submitting form data. However, I do not want the form to be submitted if it is empty. Currently, when I try to trigger the bootstrap modal on submit with an empty form, the modal appears instead of prom ...

javascriptjqueryhtmltwitter-bootstrap

Is there a way to determine the dimensions of a pdf file using javascript and capture a snapshot of it for showcasing on a website?

I'm fairly new to HTML/CSS and haven't delved into javascript yet, but I have a good understanding of reading other people's code. Currently, I'm putting together my portfolio website and would like to include my resume on the page in a ...

javascripthtmlcsspdf

Count up with HTML like a progressive jackpot's increasing value

I am interested in developing a progressive jackpot feature similar to the sample image provided. I would like the numbers to loop periodically. Can anyone advise me on how to achieve this effect? Any suggestions or examples, preferably using JavaScript o ...

javascriptjqueryhtml

Tips for transitioning the li class from active to none

Struggling with changing the li class (of Home) from 'active' to none (or another class) when clicking on the profile tab, and then changing the li class (of Profile) from none to 'active' when the profile is activated. Snippet of my c ...

javascriptc#jquerycssasp.net

Basic color scheme

I'm attempting to change the background color behind a partially transparent .png div. The CSS class that modifies the div is ".alert". Manually editing the .alert class background color works perfectly, and now I want to automate this on a 1-second c ...

javascriptjqueryhtmlcssloops