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:

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

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.

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

When Css is incorporated within a text, it prevents the use of " " from functioning properly

I am currently developing a GUI application using Qt 4.8. I have a label that displays text in white (the stylesheet has already been set up for this) and I want to change the color of the word "UPDATE" to red. Here is my initial code: //all text in whit ...

c++cssqt

How come my wrapper box doesn't extend to the full width of the screen when I set it to width: 100%?

Can someone explain why my wrapper box doesn't fill the whole screen when I use width: 100%, but it does when I use width: 100vw? I have set "width=device-width" on my page and the minimum width for the page is 1400px. Thank you all for your assistan ...

css

Define the width and height of images specifically for screens with a maximum device width using @media queries

Having some trouble with the sizing of images on mobile devices. Using the code below, but for some reason, the height remains at 13em on smartphones, despite setting it differently for other devices. Any ideas why this might be happening? @media only sc ...

htmlcssimagelayoutheight

The content of btn-id element in Angular is showing as undefined

I have a JavaScript file located at sample/scripts/sample.js and there are 8 HTML files in the directory sample/src/templates/. My goal is to select a button on one of the HTML files. When I tried using angular.elemnt(btn-id).html(), I received an 'un ...

javascriptcssangularjshtmlangularjs-directive

Is it just me, or does the float left - float right combination only break in IE

Oh dear, it seems like IE9 is causing some trouble again. The other "capable" browsers handle this HTML just fine, including IE8 which isn't even that great. Here's the code snippet: <div class="contact_info_city" id="contact_info_cityX"> ...

htmlcssinternet-explorercss-floatline-breaks

What is the best way to resize an image to fit its surroundings within a nested box?

Have you ever heard of a website called SPAM? It has a unique homepage that I want to replicate using JavaScript, jQuery, and some CSS. My main challenge is figuring out how to adjust the image size to match the center box on the page. I want to create th ...

javascriptcssuser-interfacelayout

Creating a table with both a fixed header and a fixed column using only CSS

I'm looking to create an HTML table with a fixed header and fixed first column, but I want to avoid using JavaScript or jQuery to set scrollTop/scrollLeft for smooth functionality on mobile browsers. I found a solution that fixes the first column he ...

htmlcsshtml-tablemarkupfixed-header-tables

How can I eliminate the outline from the modal backdrop using Material UI styling shown in the image provided?

https://i.stack.imgur.com/cBCzd.png After attempting to remove the border and box shadow, I am still encountering issues with lines appearing only when clicking on the modal body. The modal styling code has been omitted as it primarily includes flex styli ...

cssreactjsmaterial-uimodal-dialog

Something is amiss with the PHP email validation functionality

I have been facing issues with the functionality of my form that uses radio buttons to display textboxes. I implemented a PHP script for email validation and redirection upon completion, but it doesn't seem to be functioning correctly. The error messa ...

javascriptphpjqueryhtmlcss

What advantages does using ImageMagick to resize images offer compared to using CSS?

My Ruby on Rails application has a feature that allows users to upload images. I have discovered that Active Storage can utilize ImageMagick to resize images using this code: model.image.variant(resize: "100X100") However, resizing images can also be ach ...

htmlcssruby-on-railsimage-processingimagemagick

using javascript to target a specific css selector attribute

I have a CSS file with the following code: .datagrid table tbody td { color: #00496B; border-left: 1px solid #E1EEF4; font-size: 16px ;font-weight: normal; } Is there a way to use JavaScript to dynamically change the font size? The code below worked ...

javascriptcss

Creating a vertical scrollable container that spans the full height of the PDF document

I am currently working on embedding a PDF file into my website. I'm trying to hide the status bar, including download buttons and page numbers, through some clever techniques so that I can control them externally. My goal is to be able to redirect use ...

htmlcssreactjspdf

How can I make my modal box appear after someone clicks on selecting a college?

Can someone help me figure out how to display my modal box after clicking into the selecting list? I've already coded it, but I'm struggling with getting it to show up after the click event. Any assistance is appreciated! In the image provided, ...

javascriptphpjqueryhtmlcss

Is storing HTML tags in a database considered beneficial or disadvantageous?

At times, I find myself needing to modify specific data or a portion of it that originates from the database. For instance: If there is a description (stored in the DB) like the following: HTML 4 has undergone adjustments, expansions, and enhancements b ...

c#asp.nethtmlcssdatabase

Adjusting Window Size Causes White Space to Appear Above Div

I currently have two inline-block div in my post page that showcase my latest book reviews. Typically, these sections align perfectly and occupy the same amount of space on the screen. However, for certain window sizes, one of the inline-block elements end ...

htmlcss

The grid is evenly populated with icons

Is it possible to evenly distribute the icons by only using CSS? I'm aiming to achieve a result similar to this (unfortunately, I can't post images due to my lack of reputation). You can find an example solution that uses JavaScript here: _htt ...

csshtmlgridmaterial-designflexbox

Issues arise in mobile Safari when attempting to load JavaScript files, resulting in

Encountering an issue with my Angular app on mobile Safari during the initial load, where it hangs on a blank page for nearly 2 minutes. Interestingly, the app functions perfectly on other browsers, including Mac Safari and iPad Safari. Initially, I suspe ...

javascriptjquerycssangularjssafari

Unraveling the Mystery of CSS3 or JavaScript Sliders

I am currently developing a new website and I was intrigued by the slider effect on Apple and IBM's websites. For reference, you can check out how it works on sites like: and I noticed that the text and images slide in opposite directions, which se ...

javascripthtmlcssslider

CSS3 keyframes hover animation for Firefox

I implemented keyframes animation for a div on mouse hover using pure CSS3. The animation runs smoothly on all browsers (Google Chrome, Safari, IE, Opera) except for Firefox! I'm puzzled as to why it doesn't work only in Firefox. The animation ...

cssfirefoxhoverkeyframe

When a user hovers over the image, a button is revealed

I have a test page on my website: If you'd like to check it out, feel free to visit: I am trying to create a feature where when you hover over an image, a black button with text and links will appear. When you move your mouse away from the image, ...

csshovermouseovercenter