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.
Related
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.
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.
Its been a little while by now, that I have been trying to understand MVC. I do understand the basics now and I also noticed, themes or css files can be added to a MVC site. When I try to do this, it seems my CSS file is not being found. This is the head of my _Layout.cshtml code:
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>#ViewBag.Title - Bierownie</title>
<link href="#Url.Content("~/Content/Earthlingtwo/style.css")"
rel="stylesheet" type="text/css" />
</head>
I am not really sure what I should put at the link tag. I noticed that in the other (standard auto-generated(Razor)) _Layout.cshtml file, something like this was being used:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
But it seemed that the code wouldn't understand if I put that same bit of code in the Layout's head, from which I want to use. I also tried to search on the web and I think it had something to do with the config file, although I'm not sure. A red curve would appear beneath Styles and Scripts.
If anyone could tell me how I simply could link a css file in a newly created layout file, I would be able to go further with my MVC site.
I am also not so sure if this question has already been asked and/or solved, so please let me know, as I couldn't find any answers.
As you can see in this picture:
There's a config file which will break the theme. Someone else noticed it and it did cause a problem.
You can just Drag&Drop css file from solution explorer to your layout page.
Bundle uses better. Try this:
ASP.NET - Using Bundle and Minification in ASP.NET MVC 4 and ASP.NET Web Forms 4.5
In your question, the path to style is noted as Content/Earthlingtwo/style.css, where in your graphic it's Content/Earthlingtwo/images/style.css. In the Earthlingtwo folder, is a site.css file Content/Earthlingtwo/Site.css
You need to correct your href to the correct path
<link href="#Url.Content("~/Content/Earthlingtwo/images/style.css")"
rel="stylesheet" type="text/css" />
or
<link href="#Url.Content("~/Content/Earthlingtwo/Site.css")"
rel="stylesheet" type="text/css" />
depending on which is the correct file.