Creating a website layout suited for printing using CSS

One of my clients has a website that needs to be converted into a brochure format. When he prints the website, it must be printed on paper with a specific layout. Some sections need to be removed and others modified.

I have utilized Bootstrap 4 and created a separate CSS file named 'print.css' with the media="print" attribute. However, I am struggling to customize the layout according to my requirements.

The current display looks like this: https://i.sstatic.net/MnbIZ.jpg

Since I am using Bootstrap with the media="all" attribute, shouldn't it automatically adjust the website layout for printing as well? As a beginner, I am unsure how to resolve this issue.

In addition, there are default titles and URLs that appear when printing. Is there a way to remove them? https://i.sstatic.net/AyN6Z.jpg

Any assistance would be greatly appreciated.

cssbootstrap-4mediaprint-css

Answer №1

To eliminate the URL, dates, and unnecessary content on your page, apply the media print css.

@media print{
 a[href]:after{
  content : none;
 }
 @page{
  margin : 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

Navigating through nested <ul> elements using Selenium and C#

Currently, I am attempting to loop through the <li> items within a <ul> object using Selenium with C#. As a newcomer to this, I am exploring ways to simplify the coding process for my testing project. Below is a snippet of the HTML code that I ...

c#htmlcssselenium

Sending information from bootstrap modal form to primary form

I need help with a complex problem involving two forms on my website. The first form on the parent page displays the sales history of individual products and allows users to input quantities for future months. The second form, presented in a modal, tracks ...

djangobootstrap-4django-viewsdjango-templatesbootstrap-modal

Issue with Internet Explorer's CSS

It appears that this page is not displaying correctly in Internet Explorer 9, along with possibly older versions as well. The issue seems to be with the right menu floating to the bottom of the page. Firefox, Chrome, and Safari are all rendering it correct ...

htmlcssinternet-explorer

Avoiding overlapping of div elements in a stacked div layout

I have a challenge with creating a vertical layout of stacked divs. Everything was going smoothly until I encountered the #resume div, which stubbornly stays hidden beneath the table-containing div above it. Despite trying various adjustments to float and ...

htmlcss

Fluid layout causing elements in body to be hidden by fixed header

I'm currently tackling a fluid layout challenge, utilizing percentages instead of pixels to achieve it. I've managed to create a fixed heading (#heading) at the top of the page, but now I'm struggling with ensuring that all other elements on ...

htmlcsscss-position

Adding a PDF generated from an HTML div to an email using Java

I am looking for a solution to convert the contents of an HTML div tag into a PDF file while preserving its associated CSS. This is essential as I will be using Java on the back-end to send emails, and I need to attach the PDF with the CSS intact when send ...

javascriptjavahtmlcssjakarta-mail

Challenge with the continuity of my Html/CSS coding

I am currently expanding my knowledge in web development with a focus on CSS. While I am familiar with JS and HTML, CSS is proving to be more challenging for me. I have been attempting to create a webpage using Bootstrap, but I have hit a roadblock with th ...

jqueryhtmlcsstwitter-bootstrap

I am attempting to create a footer with a set size, but encountering an issue

I'm in the process of developing a responsive website using Vue.js. One aspect I am working on is the footer container, which looks fine on the full screen but shrinks when the screen resolution is reduced below 1100 pixels. As shown in the images li ...

htmlcssvue.jswebfrontend

Transform colored svg:image elements into grayscale when clicked upon by utilizing d3

Visit this site I'm attempting to change all SVG images created using d3.select to grayscale by using the following function: JavaScript: <script> function convert() { d3.selectAll("image") .style('filter', 'graysc ...

javascriptcssimaged3.jssvg

Modifying the default classes utilized in React-Bootstrap components: A guide

When using react-boostrap, the default behavior is to include the classes card-title and h5 in a <Card.Title> Foo </Card.Title> tag. Is there a way to change or substitute the h5 element, for example with h4? ...

twitter-bootstrapbootstrap-4react-bootstrap

JQuery's accordion with the heightStyle set to "fill" is causing a vertical scrollbar

I recently integrated the JQuery accordion effect into my website and specified the heightStyle: fill so that it would occupy the entire window. However, it seems to be taking up an additional 1 or 2 pixels, causing the vertical scroll bar to appear. I su ...

javascriptjqueryhtmlcss

What is the best way to incorporate hyperlinks or text color modifications to a variable string in JavaScript?

I have a website that features a random on-load slideshow with text displayed in div containers for each slide. I am looking to enhance the functionality by adding links or changing the color of specific words within the text. You can view my current progr ...

javascriptjquerycssvariables

Styling the background of the endAdornment in a material-ui textfield using React

I tried following the instructions from this source: Unfortunately, the example code provided doesn't seem to be functioning properly now. Is there a way to achieve the same result without having that right margin so that it aligns better with the r ...

javascriptcssreactjsmaterial-uitextfield

I can't seem to get the button to function properly, and it's really

I am having an issue with my "Let's Get Fit" button. When I hover over it or click it, the cursor doesn't change and it doesn't lead to index.html. I'm not sure why it's not working. .btn { display: inline-block; text-transf ...

htmlcssbutton

The transition effect is not functioning properly in CSS and React.js

.cartBtn { appearance: none; outline: none; border: none; cursor: pointer; text-align: center; background-color: transparent; color: inherit; } .cartBtn:hover { color: black; } .cart { display: none; opacity: 0; transition: all 4s ea ...

cssreactjshovercss-transitionsdisplay

Encountering an issue when trying to use SVG clip-path in Safari

I'm currently experimenting with creating a unique hexagonal border around a button. My approach involves enlarging the container element by a few pixels compared to the button size and using the same clip-mask on both elements to achieve a bordered e ...

htmlcsssvgsafariclip-path

Is Django_compressor concealing the CSS code?

I have implemented django_compressor in my project. This is how I set it up in my template : {% load compress %} {% compress css %} <link rel="stylesheet" href="/media/css/master.css" type="text/css" charset="utf-8"> {% endcompress %} In my setti ...

cssdjangocompression

Responsive div that reacts to scrolling

I am looking for a div that can dynamically change its position as I scroll up or down the page. For example, it could start 30px from the top but then move to 100px as I scroll down further. This div will be located on the right-hand side of my page, clo ...

javascriptjqueryhtmlcss

Issue with modal window not appearing upon clicking the button

I've been searching for a solution to this issue all day with no luck. Currently, I am using BS 4.0 and attempting to display a modal window when a button is clicked. These buttons are created dynamically through an Ajax call and represent the status ...

jqueryasp.netbootstrap-4modal-dialog.net-4.6

How to attach an event listener to an input element using Angular

I am looking to add a listener to an input element that will be triggered every time the user changes the input values. The goal is to display the current values chosen by the user. Example HTML template: <div id="idDoseLabel1" class="da ...

javascripthtmlcssangulartypescript