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.
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.
When I compare the mobile version of my site in Dreamweaver to the actual site when it is live, they both look incredibly different. The code is the exact same and I'm using the same browser with the same settings. You can see the clear differences between the two here:
In Dreamweaver: https://imgur.com/BzQqUrL
Live: https://imgur.com/A5Uzvr7
Any help would be much appreciated!
The issue was caused by me not including the following code in the head section:
<meta name="viewport" content="width=device-width, initial-scale=1">
https://i.stack.imgur.com/9pEp0.png
I don't know what's the name, but why i always get this style everytime i access http://forumesia.com
But the style is ok if i access it in desktop. Only in my mobile phone i got crop little part of the website, how to fix this?
I already using bootstrap css but it still croping like that, any suggestion?
This is usually because the device doesn't know to scale the website to the device width.
You should make sure that <meta name="viewport" content="width=device-width, initial-scale=1"> is added in the head section of your HTML
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'm trying to get my website to be displayed at full scale in any mobile device, like in this example:
As of now, the website opens automatically zoomed-in, and my clients don't like that. I thought adding the line
<meta name="viewport" content="width=device-width, initial-scale=1">
would solve this, but it does nothing. I've tried playing with the initial-scale value to see if it worked and it does nothing. I've set it to initial-scale=0.5, for example, and it didn't change the way the page displayed (to clarify, it doesn't work neither on desktop browser nor on mobile devices).
I've been working on this for days, any help would be greatly appreciated!
EDIT: To clarify, this is a mockup of what I get vs. what I need.
Try to add the meta tags below:
<meta name="viewport" content="user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes"/>
and see it your request will be resolved.