How to narrow the size of webpage [duplicate]

This question already has an answer here:

In my app we are reviewing the webpages. There is a button which loads the webpage for ex-: As shown in image after clicking button it opened Now I want to show the webpage in every device width but while doing it the webpage loses its responsiveness. Select Resolution(marked with red ink) is chrome extension which is meant to change the width of any webpage and the url of webpage should not be changed(can’t use frames).image after changing width

var html = '
'; $('body').append(html); var div ='
'; var body = $('body'); var head = $('head'); $('html').append(div); $('#maindiv').append(body); $('#maindiv').append(head); $('#selectDevice').change(function(){ var selectHeight=$("#selectDevice").find('option:selected').attr('data-height'); var selectWidth=$("#selectDevice").find('option:selected').attr('data-width'); if(($("#selectDevice").val()=="My Screen")){ $('#maindiv').css('width','100px'); } else{ $('#maindiv').css('width','100px'); }


How to get button inserted through CSS/Javascript via chrome extension to always display on top of other content?

I have a chrome extension where I insert an element (button) through some javascript/css. I want the button to always be visible at specific points but I’m finding that sometimes the button is hidden or only partially visible on some websites.

    // Place div in upper right
    var div = document.createElement('button');

        // Positioning = 'fixed'; = 'border-box'; = 'block'; = 100000000000000000000000000000000000; = '140px'; = '20px';

In the CSS above, I made the zIndex very high thinking that it would force the button to always appear on top but I’m finding that this isn’t happening (the picture attached in an example where this doesn’t happen).

How do I get the button to always appear on top?

enter image description here

enter image description here

Divs disappear in Chrome Dev Tools

I ran into a really weird problem in Chrome’s Developer Tool. In short, the chrome tool, in inspecting panel does not render my local index.html file correctly after adding some CSS, but the same code renders properly through CodePen.

body{ box-sizing: border-box; } *, *:before, *:after{ box-sizing: border-box; } img{ width: 100%; } body{ overflow: hidden; background: grey; } .main{ height: 100%; } @media(min-width: 1024px){ } .carousel{ display: flex; } @media(min-width: 1024px){ .carousel{ display: block; width: 100%; position: fixed; right: 0; bottom: 0; left: 0; top: 50%; margin-top: -100% } } .carousel__cell{ flex: 0 0 33.33%; } @media(min-width: 1024px){ .carousel__cell{ position: relative; width: 100%; display: flex; flex-direction: row-reverse } } @media(min-width: 1024px){ .carousel__content{ width: 50% } }

This problem happens after adding the following CSS

.carousel{display: flex;}
.carousel__cell{flex: 0 0 33.33%;}

As the below image shows, .carousel__cell and their children just vanish and the layout seems to be broken, but they show correctly when I exiting the Dev Tool.

enter image description here

I was following the mobile-first principle in terms of writing CSS. Also it doesn’t go back to the previous state by reloading the browser after removing the above two CSS lines, I have to use gulp watch to restart the whole server.

Css how can i find a css file from inspector

I have to search the exact css file where it has been a change on a rule but i can’t remember where is this rule. How can find the css file from inspector ?

Is there a way to find out the unused CSS? [duplicate]

This question already has an answer here:

I fix some small pages but in the code, there is a lot of CSS. I want to remove the unused or unloaded CSS but I don’t know how.

I think I saw some video or guide which shows how this can be code in Chrome DevTools, but strangely enough, I can’t find it now.

Is there a way to find what is the unused CSS in Chrome DevTools?

Chrome.tabs.executeScript(null, {file: ‘inject.js’});

I am trying to make an chrome extension where it injects code into the active tab… When I looked around and did some research I found that
Chrome.tabs.executeScript(null, {file: ‘example.js’});

is what to do… It looks like us so this is the code I’ve chosen to use:

This doesn’t work, obviously inject.js’s code matters so here it is…


testing... testing...


If my JavaScript isn’t proper please feel free to let me know…

That was just a contexted example to give a simple intro to my problem… Here’s what I’m really doing

Still this but then instead of injecting
click me
I want to inject this into my code —


The last part of the problem is that I am having difficulty injecting that code using js because of the quotes inside the code and whatnot… So thanks for all the help

Recap: how to use Chrome.tabs.injectScript(); how to inject HTML with lots of double and single quotes using JavaScript and please provide some working examples…

Opera addon, change url text color

I have a .html which contains:

My manifest.json looks like:

"manifest_version": 2,

"name": "Opera Extension",
"description": "description",
"version": "1.0"

, "background": {
    "scripts": ["background.js"]

, "permissions": [
  "tabs", "activeTab", "*://*/*", "http://*/*", "https://*/*", "file:///*/*"

, "web_accessible_resources": [

, "content_scripts": [{
    "matches": [""],
    "js": ["content.js"],
    "all_frames": true



chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.text === 'getNames') {
    var shouldBeColored = [];
    var arrayWithNames = document.getElementsByClassName("class44");
            for(var i=0; i


and finally background.js:

function (tabId, changeInfo, tab) {
    if (changeInfo.status == 'complete' && {
        chrome.tabs.sendMessage(, {text: 'getNames'}, gotNames);
function gotNames(arrayOfNames) {
var shouldBeColored = ['TextToColor', 'TextToColor2'];

    for(var i=0; i

Currently what I'm able to do it to show an alert with the names found in the page and which I'm trying to set a color to. My question is: How to set a specific color, visually visible on the screen to those elements.
Any manipulation is accepted including css/js injection, anything. I'm completly new to js and css and I'm sorry if something in the description doesn't make sense.

Searching for cause of scrolling causing repainting and bad performance

This site is in dev and I am troubleshooting an issue that causes “scroll updates” to recalculate styles and repaint. On the frontend it is janky and very bad.

This screenshot is a recording using Google’s performance

enter image description here

Reducing scroll jank when using overflow-y: scroll;

I’ve read several other posts but none of them seem to apply. This may be an Angular 5 task but I don’t know.

I am looking for help pin-pointing what is causing scroll performance issues. Using the link above, does anything stand out?

See exact CSS specificity in Chrome Dev Tools?

I know that in Chrome Dev Tools, for a selected HTML element, applicable CSS selectors are listen in order of specificity in the Styles tab.

But is it possible to see the exact exact CSS specificity value of each rule on the selected element?

How to push entire page to right 30px

Lets say as an example. What can I do to push the entire page 30 px to the right, so I have a margin in the left, without the things on the right being out of place.

This is what I want to do:
Youtube margin 1

I have tried something like body{position:relative;margin-left:30px} but it doesn’t affect the entire page, the left sidebar is intact, also the topbar on the right where it says Iniciar Sesión (Sign In) moves and remains out of place:
Youtube Margin 2
Youtube Margin 3
I said Youtube as an example, I’m doing one thing where I would like to have those 30px as reserved space on all the pages.
Any ideas? Thanks in advance 🙂