Change width of a certain page (no impact on source code) - html

I have a page which I use often to check some stuff, but it's not developed by me.
On this page, there is a label which is always to small and to read it completly, I go always to dev console, search the label and change the width manually.
This annoys me, is there a possibility to set the value fixed for myself? or with a chrome plugin so that I don't have to do it all the times?
This is the page, when I've loaded it:
You can see the yellow boarder, it's not wide enought, that I can see the whole text.
So to see it, I always open Developer Console and change the width of this css class to a width of 400px.
default it's set to 250px.
I'd like to find a way, that I don't have to do that every time manually.
But I don't have impact on the code, I'm not a developer of the page. Just a user.
And couldn't finde a solution, if there is a plugin or another way, how I can configure chrome that for this page, this width of the class will be changed automatically.

Try to add !important in your css code as there might be the case in your browser so go with an important tag hope it will help you to resolve your query

Related

Browser with fixed computed width

I want to test my media-queries, but my browser doesn’t shrink the width even when I change it, examples below:
Moto G4 screen appears with a fixed width of 980px:
The same when I test with any other device screen:
Does someone know why is that happening?
Note: The problem is not the code at all, you know? It's like, I commented all the lines of my html, no css applied, no tags, nothing, and when I open it in the browser the fixed width remains.
Note 2: Funny thing is that when I create any other HTML file, the same problem happens, but when I create a react project it doesn't. So it's not the browser as well, is there some meta tag or anything of the kind that I'm grossly forgetting?
PROBLEM SOLVED
I just forgot the most trivial thing of a HTML file, the initial meta tags, maybe it's due to so many time programming in React LOL

Iframe is wrong displayed ONLY on FIREFOX

Im havin a big problem.
Im programming a website for a company in germany.
Since there are so many sites on the page i took an iframe in my index.html file instead of using a div tag because this would need a lot more time since i need to write the div stuff on every page.
Every Browser like IE,Chrome,Opera and also Safari shows the website like i want it to be shown.
But Firefox shows the iframe part in a small window in the left upper side of the window.
So you cant see any content or even 100x bigger than normally and in a quite small window.
So do I have to change anything in my code or do i need to add something?
The bigger problem is actually that the man who is able to start the server doesnt want to start it for let the website goin online because that doesnt work on firefox.
He explained the problem to me that way. but my program (mirabyte) shows everything in the right way (ALSO FIREFOX) so what can I do now because I need to let him try every small change i will do. So it would be nice if anyone does know the EXACT answer because he or she already had the problem.
Any ideas?
Thank you so much
Sasse
Make sure that if you have the iframe in any sort of container, that container also has the applicable height attribute. Also make sure that the iframe height is applied to both the HTML and the body tags.
Beyond that, we would have to see the part of your code where you're declaring the iframe to say anything more specific.

Keep website from adjusting to window-size

I think I have a VERY basic question here. I've been trying to figure this out for a while now: I'm working with an html-template called "Oyster HTML" and I've been trying to disable all functions (or css) that make the site adjust to the window size.
This is the link to the demo of the template:
http://www.gt3themes.com/website-templates/oyster/portfolio_masonry_listing.html
As you decrease the window's width in your browser, you'll see that - for example on the right side of the header - the menu-content adjusts. (doesn't get overlapped)
Same thing happens here: https://learn.wu.ac.at
Now, on 'common' websites like www.ebay.com this is not the case (content gets overlapped by window and doesn't adjust to window resize)
My question: Is this a JavaScript issue? or CSS? (I tried disabling all .js and all .css but the content still adjusted.) Now if it's not in JS or CSS, where can I change this?
As I said, this might be a very basic (or even dumb) question, but I've been trying to wrap my mind around this for quite some time now, and I just couldn't figure it out)
Thanks a lot in advance!!

How to create HTML5 popup with minimize etc

I am really new to HTML and CSS but have created a prototype page to get a reasonable size, look, and feel to fit on a 768x1024 or larger display. I revised it to be used in landscape mode but it's apparent it won't fit in a typical browser window even at full screen with my minimum height and width criteria. The page doesn't contain text; just buttons, check boxes, text, and textarea "widgets". I think that I can fiddle with sizing and make it fit into a window if there is only a top "title" bar with the minimize and close buttons but absent all the other "stuff" such as the navigation bar, tool bar, etc. found in a typical browser.
I do use a couple of web apps that are like this so I know that it is possible. I've searched Google for examples and found popups but none are like this.
My question is: how do I do this, preferably without javascript, and what is this type of window called?
This should help with the minimizing: Is there a good jQuery plugin for a hide effect that looks like minimizing windows in Windows
You're going to have to include jQuery from http://www.jquery.com and call this animate script when the window you want to minimize is clicked.
This will help you with the 'closing'.
https://api.jquery.com/hide/
When you click on an element you can call .hide() on it, effectively closing it from the user's perspective.

Convert HTML with CSS to HTML with in line style

I've been tasked with reproducing the look and feel of an intranet site in SharePoint, at first I was thinking no problem just mod a Master page and voila.
The problem occurred when I opened the source of the site and saw that they are using 12 disparate CSS files that override each other, and are written in the worst way possible.
My question is is there a tool that can take the mess and generate the resulting HTML so I don't have to manually.
Base.css for example sets BODY width to 90%
custom.css then sets it to 960px !important
Mod.css lastly tries to set it to 100%
I would need it to look at this and generate BODY with the style to set the width to 960px
You can do this using chrome's developer tools:
Right click and inspect the element and then click on the computed tab on the far right top corner .
It will give you the styling that the element has after all the overrides and such.
As a starting point, you coud use window.getComputedStyle() for obtaining such information.
Have a look at: https://code.google.com/p/instyle/
It seems like it does what you need.