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
Related
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
I'm using Bootstrap to build a webpage. The page looks as it should on desktops and laptops. However, when viewed on mobile phones, the bottom half of the page's content is cutoff. This happens only on mobile phones or windows resized smaller than 991px wide.
I tried sifting through the included Bootstrap CSS file but couldn't find any style rules dictating any behaviors like the one I describe.
I've attached two screenshots: Fig. 1 is the intended behavior--the content ends with the embedded contact form. Fig. 2 is the puzzling behavior--the page just ends in the middle of the pricing table.
The site is grillemasters.info
[Fig. 1] http://i.stack.imgur.com/uH7MB.png
[Fig. 2] http://i.stack.imgur.com/h2190.png
Without seeing more information (e.g. try to post the minimum amount of HTML that still exhibits this error) it's hard to prescribe a solution. But here are three possible things to check out:
Mismatched (Incomplete) DOM
If you have an open-element (e.g. <div>) without its close (</div>), HTML behaves in mysterious and often irreproducible ways. This often includes mis-styling all elements after the mismatch.
Bad Character or Incomplete File
If you are uploading via FTP and the connection is interrupted, you may only be looking at a fragment of the file. Try deleting and re-uploading. The same thing would happen if the browser or FTP client encountered a character that made it stop reading the file — both of which might lead to a mismatched DOM.
Unnecessary body CSS
Make sure you don't specify the height of body or html anywhere (or any other global, all-containing elements). The page should flow naturally, without you specifying a height: 100%.
[EDIT] I looked at your site (which redirects to http://www.supsean.com/grillemasters/, in case others are interested in debugging outside a frame). Look at the top of your page when you resize the screen to such a small size; there are quite pervasive CSS issues, likely caused by position: fixed or absolutes where they needn't be.
Try resolving that, and I suspect you'll stumble across the solution to this question as well.
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.
In the process of testing a jQuery Mobile site on IE9 I discovered that something along the lines of
<img src=... width='100%' height='auto'/>
does not work with IE9 - the image appears as a long horizontal line with no height. It seems like IE does not to understand the auto attribute or appears to interpret it as meaning 0 . Leaving it out the height attribute altogether does the trick - the image appears as desired and this seems to be OK with all the other browsers too.
Problem solved? Well, not quite since this leaves me feeling a tad confused. I had always believed that specifying image height and width helps the browser with the job of rendering the page since it knows just how much space it needs to earmark for the image before it has been fetched. So the "leave out the height = auto" trick would mean that page rendering would slow down since the browser would hold off on fetching other page resources till it has got the image data and established the page layout yet to come?
"the browser would hold off on fetching other page resources till it has got the image data and established the page layout yet to come?" Is wrong. This hasn't been the case since netscape. In fact this was one of the key innovations in netscape that the page would continue to render till the image was fetched, size determined and page was simply "reflowed".
As mentioned in the comment. Remove the height if you do not know it. Setting it to auto does not help the browser in any way.
i know this is so basic ,its so basic that it hurts me to ask this question but the issue is starting to make my hair too fall out lol.
i'm making a liquid website so everything resizes,so far so good...my page has a couple of iframes ,they will resize just great in i.e using % for height and width but when it comes to firefox only the width will resize and not the height ,the frame ends up pushing over my tables and making the whole thing look wrong
does anyone have a fix/solution to this please.
thanks to everyone that tried to help ,it was a bit vauge i managed to solve it in the end simply by
putting the iframe i wanted inside a layer/div set the layer to absolute and size it in % and then add the iframe inside the layer worked a treat for all browsers.