Too much gap between the span and the border's bottom

Occasionally, there seems to be an odd gap between the span and the bottom border. This issue is particularly noticeable on mobile devices. You can view a screenshot of the problem here:

Code

.heading {
  text-align: center;
  border-bottom: 2px solid #fb7a6d;
  text-transform: uppercase;
  margin: 18px 0;
  clear: both;
}

.heading span {
  display: inline-block;
  background-color: #fb7a6d;
  color: #fff;
  padding: 3px 16px;
}

@media only screen and (max-width: 479px) {
  .heading {
    padding: 2px 25px;
  }
}
<h2 class="heading"><span>Price and release date</span></h2>

htmlcss

Answer №1

@media only screen and (max-width: 479px) {
  .header {
    margin-top: 2em;
    //padding: 0px 25px 0px 25px;
  }

Answer №2

@media only screen and (max-width: 479px) {
    .title {
        margin: 5px;
        font-size: 16px;
    }
}

Answer №3

Include the property margin-top:-1px; within the selector .heading span.

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

Swapping out a style sheet within a intricate header

I'm in search of help with creating a stylesheet switcher for my website. My knowledge of html/css/js is self-taught, so I ask for forgiveness for any beginner mistakes. I have customized some code to fit my requirements, but I am unsure how to target ...

jqueryhtmlcssstylesheet

What is the process of initializing divs in DataTables?

My application has a DataTable installed, but I encountered an error message stating "DataTables warning: Non-table node initialisation (DIV). For more details about this error, please visit http://datatables.net/tn/2". I'm aware that DataTables is d ...

javascriptjqueryhtmlcssdatatables

Help with enabling the recognition of backspace key in JavaScript?

My current JavaScript is almost perfect but missing one key element. The form has two fields that are disabled when the user fills it out. <label>Can you drive? </label> <input type="booleam" id="drive" disabled><br> <label>W ...

javascripthtml

Utilizing CSS to create a repeating background image within a specified container

I'm currently working on setting up a container with a background image that repeats only when the contained div elements are long enough. However, I seem to be encountering issues getting the image to repeat properly within the #container code. This ...

csscontainers

Tips for flipping the content of an accordion button in Bootstrap 5

Looking for help with customizing an accordion button on a website with Arabic content. The issue is that I need to reverse the content within the accordion-button (the question on the right, and the down arrow on the left). Any suggestions on how to sol ...

htmlcssalignmentarabicbootstrap-5

When scrolling, the element displays a partial background color that extends beyond the width of the window

My website has sections with a background color applied. However, when the browser window width is less than the page width, a strange issue occurs - the background color only covers a portion of the elements equal to the window width starting from the lef ...

csshtml

SVG path tooltips are not functioning properly, unlike in regular HTML where they work perfectly

I have a CSS/HTML code that works perfectly in plain HTML and is also shown as an example at the end of the demo. However, it fails to work properly in SVG. Upon inspecting the element, I found that the :after code is being called but the tooltip remains ...

htmlcsssvg

Is it possible to change the style of an element when I hover over one of its children?

Encountered an issue while working with HTML and CSS: //HTML <div> <div class="sibling-hover">hover over me</div> </div> <div class="parent"> <div>should disappear</div> </div> ...

javascripthtmlcss

When users visit my contact HTML page, they are redirected to the contact PHP page, but unfortunately, the email is

I am currently facing an issue with my contact form. After filling out the form and hitting the "send" button, it redirects to the contact.php page but fails to send an email or work as intended. Can someone please assist me and identify what's causin ...

javascriptphpjqueryhtmlcss

Mediawiki needs to be able to respond effectively to constantly changing and evolving content

My extension generates content dynamically for certain pages. For example, I create headlines using <html> <h1>, <h2> and <h3> tags. I want my mediawiki to respond to these headlines and generate a directory dynamically. I attempte ...

phphtmlmediawiki

What steps should be followed to make progress bar function properly?

Currently, I am delving into the world of Angular and attempting to craft a progress bar using a directive: var module = angular.module("app", []); module.directive("progressbar", function () { return { restrict: "A", link: function (s ...

angularjshtmltwitter-bootstrap-3

Automatically adjust column sizes using Bootstrap's responsive width feature

While I have a feeling this question might have been asked before, my search has turned up no similar issues. I am currently working on styling a menu bar using a standard bootstrap row and columns setup (flexbox). The menu is dynamically generated by Wor ...

htmlcssbootstrap-4flexboxflexboxgrid

Tips for stopping the textarea from moving around as you type and avoid it hitting the bottom of the page: Utilize JQuery and

As I type into the auto-sizing textarea, the text runs to the bottom of the page and causes it to dance uncontrollably with each key press. This forces me to constantly scroll down to see what's happening. How can I prevent this page dancing and keep ...

javascriptjqueryhtmlcss

Trouble with parseJSON when handling form POST in Python

I'm struggling with a javascript HTML page that has an action POST to a python file, expecting a JSON response back. Despite my efforts, I can't figure out how to catch and parse the JSON data. The HTML and python code excerpts below should show ...

javascriptjquerypythonhtmljson

Are there any pre-existing pop-up methods available for AngularJS?

Is there a way to create a simple pop-up window with static text and just one "Ok" button? In Java/Swing, it's possible to achieve this with just one line of code using pre-defined classes. However, when it comes to Angular pop-ups, it seems like the ...

javascripthtmlangularjs

Having trouble positioning a div in AngularJS so that it stays pixel-perfect regardless of browser resize or device orientation? Unfortunately, it's

I am a newcomer to AngularJS and have been struggling with a particular issue for several days now, leading me to suspect that I may be using it incorrectly. The problem at hand involves positioning 30 divs in a specific manner: 1) Each div should displa ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-repeat

Customizing nested tables in your HTML email

When creating an HTML email template with nested tables for maximum email client support, the question arises about using inline styling. Should the style always be applied to the lowest level td, or is it possible to apply it to a parent table or td? For ...

htmlcssemail

Border Effect Resembling Windows Tiles

When you hover your mouse over a tile in Windows, a cool effect happens: Hovering outside the tile, but within the container area: https://i.sstatic.net/yZk9f.png Hovering inside a tile: https://i.sstatic.net/LoSmk.png Hovering outside a tile at its m ...

javascripthtmlcss

What is the best way to ensure that child elements within a container div are centered when scrolling left and right?

When attempting to handle the 'scroll' event, I noticed that the callback function only records the position of the div as the last position. I am looking for a way to determine if the div is in the center, which is my target. const slide = ...

javascripthtmlcss

Tips for stopping special characters from being copied and pasted into a number field

My goal is to ensure that only numbers can be copied and pasted into the 'number field'. By preventing the copy and paste of characters like 'e', '+', '-', and '.', I can ensure that the number field only c ...

javascriptjqueryhtml