Html + Css good response on computer (even in minimized mode) but bad on mobile
I used a ready-made template for my project.
I don't know much about html and Css, I just deleted and customized some of the code by trial and error.
To test mobile response, I minimized my web browser on the PC. Everything was fine... Now I encountered this when I tested it on my phone.
This is the mobile browser - very bad
How is this possible? Everything is bad - see footer! It shows footer like PC not mobile - why? The best and fastest way to solve this problem in the whole project?
Bit reluctant to post this as an answer as it is fairly basic, but I do appreciate that there may be people who don't recognise its importance.
Make sure this line is in your head element.
<meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
See https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag for more detail.
And a warning - if you use other people's code remove stuff only if you understand it - and look up things you are not sure about on MDN for example.
- Saving the manipulated DOM/HTML after editing it with Firebug
- How to check file MIME type with JavaScript before upload?
- HTML list-style-type dash
- Show outside element part with opacity - fabric js - controlsAboveOverlay
- How do I make a transparent canvas in html5?
- Setting the width depending on the height of its parent
- adding event listener to input box and checking if it's empty
- How to make an HTML back link?
- how to set index by choosing in javascript
- Position a responsive circle in the top-right corner of the screen
- Failed to execute 'atob' on 'Window'
- Java/Swing offscreen rendering (Cobra HTMLPanel -> BufferedImage) Problem: Component doesn't finish redrawing first
- Can't upload file via HTML form using <calcite-input> component ("Failed to set the 'value' property on 'HTMLInputElement'")
- How to center an unordered list?
- Typed.js Not Working Properly Glitching Text and Double Cursor in ReactJS
- How to freeze thead section of the table
- Check if button pressed with if statement in JS
- Why is my regex valid with the RegExp u flag, but not with the v flag and does not work in HTML pattern attribute?
- How redirect php Window.location.href or Window.open () methods in php and JavaScript
- How do I change the font-size of an <option> element within <select>?
- How to use next.js Image component with HTML <picture> element?
- React scroll to anchor when opening URL in browser
- Is there a way to move HTML between bowser tabs in Angular?
- Pass data from html JS webview to C# in MAUI
- How can I vertically align elements in a div?
- html fields in livewire is not updating the data
- How can I center text (horizontally and vertically) inside a div block?
- How can I horizontally center an element?
- HTML/CSS - Why background-color turns white when printing?
- Collapse HTML table rows by default