I am building a webapp with django, react, and material-ui. I am facing the same issue with firefox and chrome. On my localhost, the css looks fine. But when I load it to the webserver, a few things are wrong:
Material UI field labels are smushed down in production.
h3 element is bigger in production
Material UI button is not full width in production
I have read about adjusting the zoom levels on the browser directly, but since it is only effecting a few elements (the main containers on the screen are fine) I don't think this is the problem.
Another question suggested to ensure the meta tags are the same, which they're not exactly, but they're not different in a way that is obvious to me it would cause this.
The following is the meta tags for both production and development.
production meta (based off of chrome dev tools)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
development meta (based off chrome dev tools)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta name="theme-color" content="#000000">
<meta name="description" content="Web site created using create-react-app">
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width">
<link rel="manifest" href="/manifest.json"> (not in production)
The only difference I see is the viewport in development has minimum-scale=1. When I add that directly to my production code from the dev tools, the problem persists. The link to manifest is also not in production, but I am assuming react build accounts for this file.
Any ideas, I really don't want to maintain two code sources at this granular of a level. Thank you.
SOLVED:
In my django application I am importing bootstrap 5 at the top level html file, which I am embedding my React/ CSS scripts in. Bootstrap is interfering with my React css which is based on Material-UI.
There might be a better solution, but I just maintain 2 base.html files in my django application, one with bootstrap that handles my django related files, and one for my embedded react project.
Related
I have a problem that I'm almost sure is because of how I'm building my pages and not just a CSS issue. I am using Tailwind for my website. For my Sveltekit blog, I wanted the xyz.com/projects/some-project URL structure so I created a folder in routes called projects. Inside that I have two files, index.svelte and [project].svelte. Index should contain the listing of all posts and any project should be created at [project]. All this works fine, but the pages that are dynamically created have some weird layout issue that is causing it to not be responsive. For example, you can see how weirdly this page is formatted.
You can visit this page and see it for yourself. My code for this is here.
I read somewhere that I am supposed to use __layout.reset.svelte or something of that sort while creating dynamic routes? Is that what is wrong?
Why are my breakpoints and responsive CSS not working?
The reason I think its a Sveltekit issue is because the dynamic pages are the only pages where this is happening, so I'm assuming there is something wrong in how I've set it up.
Your /src/app.html's <head> section is where the problem is located. Yours is:
<head>
%svelte.head%
</head>
which is missing a critical piece, the <meta name="viewport" content="width=device-width, initial-scale=1" /> tag which is essential for mobile responsiveness.
This is normally present in default SvelteKit projects:
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%svelte.head%
</head>
I noticed you started your project from a custom template, and indeed that template's /scr/app.html skeleton is missing the above info.
This is something you have to watch out for when using such templates - how they deviate from a standard install and what the impact is for you. My advice is, start from the default, and add pieces knowingly, with full understanding of the incremental changes and full control of your source.
I am relative new, have built some static web pages but not an expert. I apologize if this has been answered else where, I am not sure what the error I am encountering would be called and have tried to search for an answer already and have not been successful. Please point me to another answer if an answer to this already exists.
For the project, I am building a static website for a school project and noticed that the html/css pages are displaying at different sizes (almost seems as if there was zoom effect). After looking at the code through the inspector I noticed that on the index.html page displays with a width of: 1236px and the other pages display with width of: 1350px in the same view port. Not sure how to to resolve this. Below is the link to the code on github. Again apologies if there is a better way to upload the code here, this is my first post on this forum.
https://github.com/teoherman/repice-site
Thanks in advance,
The issue is the fifth line in your index.html, or rather the lack thereof on your other pages. It is a good idea to always have a meta tag indicating viewport information.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Add this line into the head of your other pages. Note that you may want to keep most meta-tags in your <head> identical over different pages of one website. Most notably, these three:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
When I started I use Bootstrap for most of my school project. It help displaying pages in different screen sizes and there are many sample codes that you could use. Hope this might help you.
In my index file I have the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I am using React to load the page, but the main index file is an HTML file. (.pug)
This is inserted correctly into the DOM. However, the viewport is ignored - my page is showing the desktop version.
If I edit the DOM in the Chrome dev tools, eg. change 1 to 1.0 or any other part of the meta tag, it causes the page to re-calculate the viewport correctly, and will then display correctly straight away. Any ideas?
You might need to click the image to see the GIF animation.
Try using meta(name='viewport', content='width=device-width, initial-scale=1.0') in your index.pug file.
Based on your code, try using meta(name='viewport', content='width=device-width, initial-scale=1.0, maximum-scale=1.0')
Try using this. It works for me.
<meta name="viewport" content="width=device-width" initial-scale="1.00" maximum-scale="1.0" />
Well, you could try triggering the viewport recalculation manually on page load with, for example:
window.getComputedStyle(document.body)
Please, note that this is not the best solution. It should just be used while (or only if) the root cause issue is not found.
I just started learning html/css/javascript and decided to throw together a website for practice. I now know that a lot of the approaches I took in creating this website are seen as bad practice, which is why I will not continue to do them. What i'm having issues with is getting the mobile layout I see on Firefox's mobile emulator to appear as is on an actual mobile device. Any advice on how to fix this issue?
Thanks in advance!
Website Files
Most modern browsers have some basal CSS-styling already: if you type in a <h1>sentence</h1> like this without the basic HTML elements, Chrome will still deliver the webpage.
I built a basic web-design framework like Bootstrap, and these three lines are critical in making a responsive webpage. Make sure to add them at the top of the <head></head>.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="en">
<meta name="viewport" content="width=device-width">
The dropbox files wouldn't open, so I haven't seen your work. Try adding these and see if it works.
Try adding this meta tag to your pages, in the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
I had this issue with Bootstrap awhile ago and then found this nifty answer online. I also would recommend using something like Bootstrap or Materialize.
I am creating a template and I have faced the question weather I need to include
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
by default or just to use this:
<meta name="viewport" content="width=device-width, initial-scale=1" />
The template works for building layouts. And they will be responsive in most cases. That is why I want to include the no-scale option by default. Do you think it is a good idea? Do people really need it when they are creating the web app? I have just seen the article that tells no to do so. But it looks very shady and I don't want to trust it that easily. Here it is: http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
I have just seen the article that tells no to do so.
I don't really understand your doubts, since the page you've linked says:
If you are not coding a responsive site, just don’t use any meta
viewport. If you are coding a responsive website, all you need to
write is
<meta name="viewport" content="width=device-width, initial-scale=1">
Often people tell you to not use maximum-scale=1 and they are right, but the line that I have quoted here is really helpful and let's say required for responsive web pages.