Finding and removing a specific CSS pattern from a webpage that has been loaded

Encountered a troublesome Amazon.com page that appears blank in print preview, specifically the Online Return Center\Your Return Summary page. After much troubleshooting on a locally saved copy of the webpage, I pinpointed the issue to a problematic linked stylesheet causing everything to be hidden during print preview...

@media print {
    body *, header {
        visibility: hidden;
    }
}

However, when attempting to locate and override this source code from the live page using developer tools, I encountered difficulties. Where can I find this structure in the developer tools to ensure the print preview displays correctly?

My Attempts So Far

In the Elements view, I tried searching for all instances of link rel="stylesheet" and manually following each href link to the CSS files to search for the keyword print. This method did lead me to the culprit, but even after removing the link tag and returning to the page to print, I still faced the same blank page. Could it possibly be a server-side issue?

Here is the link found in the head section:

<link rel="stylesheet" href="https://images-na.ssl-images-amazon.com/images/I/01WIasbg6mL._RC|014yivy0BxL.css_.css?AUIClients/PREXWebAppBuzzAssets-confirmationPage">

Is there anything I can do locally to eliminate this problematic CSS?

For reference, here is the preview I am referring to: https://i.sstatic.net/D263M.png

cssdeveloper-tools

Answer №1

According to feedback on the author's response:

If you want to achieve a single remove-and-print, consider attempting to make Chrome utilize the screen styles rather than the default print styles by following the steps provided in the linked answer.

To do this using Chrome, open up developer tools, click on the three vertical dots in the top right corner, go to More tools --> Rendering https://i.sstatic.net/KCn3C.png

Then find the Emulate CSS media type dropdown menu and choose Screen. Initiate a print command, check the print preview to ensure the content displays correctly, then proceed with printing.

https://i.sstatic.net/3Rd7H.png

Answer №2

After some trial and error, I discovered a solution. By simply right-clicking on the link tag in the Elements view of the developer tools and selecting Delete element, the preview started working properly. However, this action ended up deleting the entire effects of the stylesheet. It made me wonder if there is a more efficient way to just remove the @media print portion without causing any further issues.

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

Using :before and :after in CSS, three dots can be created in a horizontal line

I am currently trying to display three horizontal dots on my webpage. I have created a demonstration on jsfiddle. span { position: relative; background-color: blue; border-radius: 5px; font-size: 0; margin-left: 20px; padding: 5px; ...

htmlcss

Attempting to display a brief description when hovering over a particular project image

My goal on is to display a description when hovering over a portfolio image by setting the opacity to 1. However, this functionality seems to not be working. .description { display: block; opacity: 0; text-align: left; height: 130px; padding- ...

htmlcss

Tips on steering clear of the issue of "Automatic grid alignment" when working with Bootstrap?

I'm attempting to achieve something along the lines of, |--------------Empty space---------------|-----first column(aligned to the right)-----| |---logo---||------Empty space-------|----second column(aligned to the right)---- However, it is automat ...

htmlcsstwitter-bootstrap

Adjust the form input box height to a different size

Is there a way to adjust the height of the form input box so that the text is positioned close to the top and bottom borders of the box? I attempted to modify the CSS but was unsuccessful. Any suggestions for a Bootstrap CSS solution would be greatly appre ...

htmlcsstwitter-bootstrapbootstrap-4sass

"Triggering CSS changes with the click of a

I am developing a basic calendar application in PHP and I would like to dynamically change the style of the <td> block based on user interactions. Specifically, I want to implement a behavior where once the "menuclick" class is active, the other cl ...

phpjavascripthtmlcssclass

Display issues occur with Bootstrap 4.2.1 flex-box layout columns exceeding the browser edge

Why does COLUMN02 extend beyond the browser's edge when using flex-basis for column widths? What mistake am I making? Unfortunately, it doesn't display correctly in the code snippets here but works in the fiddle. TIA! http://jsfiddle.net/dragont ...

csslayoutflexboxbootstrap-4

Having trouble adjusting the vertical position of jQuery Spinner buttons

I'm attempting to customize the jQuery spinner with styling applied like this: <span class="ui-spinner ui-widget ui-widget-content ui-corner-all" style="height: 14px;"> <input id="testSpinner" class="ui-spinner-input" name="value" aria-value ...

jqueryhtmlcss

How can I switch between different images using jQuery?

HTML <div class="image_rollover"> <img id="image_one" src=image_one.png"> <img id="image_two" src="image_two.png"> <img id="image_three" src="image_three.png"> <img id="image_four" src="image_four.png"> ...

javascriptjquerycss

The alignment of text in the flex column is incorrect on the right side

The flex column I created is having an issue with the arrow on the right side. It's not displaying properly and is hidden. The arrow should be similar to the one on the left and point to the left direction. I have used left: 0; for the left side and ...

htmlcssbootstrap-4flexbox

HTML5 enables users to pick their preferred font style

In my JavaScript and HTML5 course, I am working on developing a website where users can choose the background color and decide between using SANS SERIF or SANS fonts. The background color selection feature is already functioning successfully -- var inputC ...

javascriptcsshtmlfontsstyles

Place the label and input elements next to each other within the form-group

My form group includes both a label and an input field <div class="col-md-12 form-group"> <label class="col-sm-2 col-form-label" for="name">Name</label> <input type="text" class="form-control" name="name" id="name" [(ngMode ...

cssangulartwitter-bootstrapbootstrap-4

Transition from the previous image to the new one with a fading effect to enhance list item navigation

I've been working on implementing a sprite image for each list item (home, services, and contact) in my project. Using CSS, I've managed to move the position on hover successfully. However, I now want to add a fade effect to the transition instea ...

javascriptjqueryhtmlcss

Is it possible to dynamically alter CSS using PHP?

Here's a little query on my mind. Is it possible to dynamically alter the content of a CSS style using PHP in this manner? <?php header("Content-type: text/css; charset: UTF-8"); $color = "red;"; ?> header { color:<?php print $co ...

phpcss

What is the method for modifying the appearance of the background property on an input element?

I am currently working on customizing an HTML5 video player's track bar using CSS. My goal is to utilize jQuery to modify the style of the track bar. One way I have attempted to change the background of the track bar with jQuery is by employing the f ...

jquerycsshtml

Minimize the amount of space between two heading elements

Is there a way to decrease the distance between two heading tags? I want the h2 tag to be nearer to the h1 tag. Here is the CodeSandbox link for reference: https://codesandbox.io/s/rough-framework-tsk5b ...

cssreactjsmaterial-ui

How to apply a custom CSS class to a Smarty tag in CMS Made Simple

Greetings! I am currently in the process of revamping a page using CMSmadesimple, However, I have limited knowledge when it comes to utilizing CMSms and Smartytags. The page contains various smartytags that require styling. One particular tag that needs ...

csscontent-management-systemsmartycmsmadesimple

Change the class of each item in a list individually by hovering over them with the mouse using JavaScript

How to toggle classes in a list item one by one using the mouseover event in JavaScript? const items = document.querySelectorAll("ul li"); let currentItem; for (const item of items) { item.addEventListener("mouseover", e => { currentItem &am ...

javascripthtmlcss

Is it a not-so-great idea to use a combination of Bootstrap CSS and Custom CSS for styling

Is it considered bad practice to apply custom CSS on top of standard Bootstrap CSS for a button? Should I completely remove Bootstrap and use only custom CSS? If so, what is the trade-off in terms of performance? Another web developer mentioned that addit ...

htmlcsstwitter-bootstrap-3

What steps do I need to take to develop a feature similar to Tabzilla?

Exploring the innovative navigation bar on Mozilla.org seems intriguing; commonly referred to as tabzilla, it smoothly moves down to reveal the menu at the top of the page. I wonder if there are any existing libraries or ready-made jQuery code snippets tha ...

jquerycssmozilla

The color of the navbar-toggler-icon in Bootstrap cannot be altered

While working on customizing my Bootstrap 5 navbar, I encountered an issue with changing the color of the navbar-toggler-icon. The preset colors, navbar-light and navbar-dark, didn't align with my theme, so I attempted to change the color to pure whit ...

htmlcsstwitter-bootstrapbootstrap-5