Initial letter standing out above all others in printed materials

Everything on my webpage looks great, but when I try to print it out, the text ends up appearing like this image. I am utilizing bootstrap 4 and below you will find the code lines for the elements depicted in the image.

<h3 class="text-center">RESULT SHEET</h3>
<!-- for the table -->
<thead>
  <tr>
    <th colspan="7" class="text-center">COGNITIVE ASSESSMENT</th>
  </tr>
</thead>

Can someone please advise me on how to ensure that "RESULT SHEET" and "COGNITIVE ASSESSMENT" display properly in a straight line? Thank you!

htmlcssbootstrap-4

Answer №1

Experiment with this for printing purposes

@media print{
        ::first-letter {
            margin: 0;
            padding: 0;
    }
}

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

Adjust the size of a div container depending on the content it holds

If the element div.PageheaderDescription does not contain any img or div#cat-text, I'd like the height to be set to 0px to eliminate any white space. Below is my CSS code: .PageHeaderDescription { height: 320px; position: relative; width ...

javascriptjquerycss

Floating with Flex in Bootstrap 4: A seamless way to achieve

Is there a way to achieve this floating layout using Bootstrap 4 flex Grid? I've attempted to use the flex order function but encountered some issues. Have a look at my result: <div class="row align-items-start"> <div class="col-sm- ...

cssflexboxbootstrap-4bootstrap-grid

Reset the button is behaving in the same way as the submit button

I'm having an issue with the script below where the reset button is acting like a submit button as well. Can anyone help me troubleshoot this problem? Thank you. HTML <input type="image" name="submit" value=" " src="image.png"> <input t ...

htmlbuttonsubmitreset

``Inconvenience of Extensive URLs Being Displayed in Tables

I've been struggling to find a solution for the problem I'm facing with Chrome when it comes to wrapping long URLs in a table cell. Despite trying various solutions found online, including using the CSS code word-wrap: break-word;, I have not bee ...

htmlcssgoogle-chromecss-tables

Expand Bootstrap navigation bar for extra large screens and collapse for smaller

On my website, I am using the navbar navbar-expand-xl class to hide my navigation menu. It works correctly for resolutions lower than 1200px, but the collapse button disappears at 1000px and then reappears. How can I modify this so that the collapse button ...

htmlcsstwitter-bootstrapbootstrap-4

Leverage the power of personalized SCSS styles in combination with Bootstrap-Vue, Webpack, and

I have been working on an application using VueJS with Bootstrap-Vue and I encountered a challenge while trying to import a SCSS file to customize the Bootstrap variables and add some custom styles. Here are the steps I have taken so far: Installed node ...

javascriptwebpackvue.jssassbootstrap-4

Oops! Looks like there was a hiccup - $ is not defined when trying to add the web

I keep encountering this issue: Uncaught ReferenceError: $ is not defined I've double-checked everything, yet this error persists. What am I missing? Below is the script I'm using, utilizing DOM elements. var head = document.head; jq = docum ...

javascriptjqueryhtml

Allow specific HTML tags to be unescaped in Vue.js

Utilizing the v-html method to unescape HTML tags, I am seeking a way to only unescape the <a></a> tags within a string. To illustrate this: Input: <p> Hello World </p> <a target="_blank" href="https://www.google. ...

javascripthtmlvue.jsescaping

Challenges with the direction of Telerik's GridNumericColumn

Currently, I have implemented a telerik RadGrid with the direction set to RTL. Within this grid, there is a telerik GridNumericColumn which is causing an issue. The problem lies in the way it displays numbers: 500- instead of -500 I am seeking adv ...

c#asp.nethtmlcsstelerik

Troubleshooting: Django project not functioning properly post transfer from Windows to Mac

Using Django 3.1.7 on a MacBook Pro now, I recently moved the Django project from a Windows 10 machine. Despite setting up the database and superuser again, running pipenv sync didn't result in serving any of my URLs or Admin page CSS styles. The serv ...

cssdjangodjango-admindjango-3.1

Next.js is refusing to render an array of HTML elements

Consider this scenario where I have a block of code in TypeScript that attempts to create and display a list of elements. Here is a sample implementation: const MenuList = ():ReactElement => { const router = useRouter(), liElements:any = []; con ...

javascripthtmlcsstypescriptnext.js

How to Ensure that the Hidden Value of Select Statement in Angular is Always Displayed as Text

Is there a way to customize the top part of a dropdown menu so that it always displays a specific phrase, like 'Symbols' in this case, regardless of the option selected? Currently, the top part shows the last selected symbol, but I want it to be ...

javascripthtmlangularselect

Smoothly transition between the new and existing child elements in a React component with a

Currently, I am utilizing a React component that renders a child element through props.children. The content within this child element varies dynamically. I am looking for the most effective method to smoothly transition (fade out the old element and fad ...

javascriptcssreactjs

Tips on transforming JSON output into an array with JavaScript

Looking for a solution to convert a Json response into an array using JavaScript. I currently have the following json response: ["simmakkal madurai","goripalayam madurai"]. I need to transform these results into an array format. Any suggestions on how I ...

javascriptphphtml

Disabling the ESC key from clearing input fields in Bootstrap-5: A step-by-step guide

I have come across this code snippet for a search field: <form class="container" role="search"> <div class="row"> <div class="col-12"> <input name="searchItem" #search ...

htmlangularbootstrap-5

Personalized VueJS Counter

Just started learning VueJS and I've encountered a challenge while attempting to build a custom counter. Here is the code snippet: <template v-for="(ben, i) in plan.beneficios"> <div class="w-80 w-90-480 m-auto pa-hor-5-480" :class= ...

javascripthtmlvue.js

What is the best choice for the navigation menu: using `<ul>` or `<div>`?

Is it considered unprofessional to construct a navigation menu without utilizing unordered list tags? For instance, opting for <div> elements instead. <div class="navbar"> <a href="#"> Home </a> </div> ...

htmlcss

Resetting modal form validation with Bootstrap 4

I have attempted various approaches to reset a bootstrap modal form (data and validation) with no luck. There are no issues in ie, but in firefox the fields still show up as red when resetting or reloading the form. It would be greatly appreciated if som ...

formsvalidationbootstrap-4bootstrap-modal

Map display issue with Leaflet

Having trouble getting the leaflet map to take up the full screen. I'm aiming for a header bar and the map filling the rest of the space. I've experimented with different options such as setting the height to 100%. Any suggestions or ideas? Thank ...

cssflexboxleafletbootstrap-5

Arranging serialized information from a tabular format and retrieving specific data

: I'm currently attempting to utilize an AJAX POST request to send data from a dynamic webpage that includes information gathered from a table form, a date selection box, and comment text input. The webpage is generated as a PHP file on a GET request ...

javascriptphphtmlajax