htmlcssresponsive-designmedia-queriesmobile-devices
Media Queries acting weirdly
I am using dream weaver to create a responsive about me page for my site (using the default about me template). When I use the dream weaver on-device previewing system, the page is fully responsive and on my iPhone it resizes perfectly fine to look like this:
However, when I upload the code to the website, the page no longer becomes responsive. It simply looks the same as it does on my laptop (as shown below)
Why is this issue occurring?
The html page is this. If you need me to post the code here as well, please tell me. Your help is much appreciated :)
Solution
For media queries to work on small screens, you need to include the viewport meta element in the head of your document. E.g.:
<meta name="viewport" content="width=device-width, initial-scale=1">
- I am a beginner and I just started to learn java servlets and jsp. Can someone help me find the error in this code?
- How to prevent text moving when transitioning sibling element's width
- Printing a HTML template as PDF - Angular 2
- MJML : Outlook 1px horizontal when using direction rtl on mj-section
- HTML dialog focusing button element when opened
- Dynamic html and js
- Input regex for UK postcodes constantly invalid
- Put a star notation in a HTML page
- Can I have an onclick effect in CSS?
- Tailwind CSS height screen in mobile browser
- How do I tell if an HTML element has gone off the bottom of a page?
- Why select is not a input type in HTML?
- Margin different in Windows (Chome, Edge, etc.) and Mac OS (Safari)
- Print only html table using javascript
- How do I use the reverse border radius at the top of a card? (CSS)
- Allow only numbers into a input text box
- Stacked Bootstrap progress to show multiple ranges with tooltip
- Anchor link only works by "Open link in new tab" command
- How to block +,-,e in input type Number?
- Printing a webpages raw html data unformatted with tags and similar information
- Creating an end screen for my game using javascript, css, and html
- How do I include a HTML file in a Jinja2 template?
- CSS table layout: why does table-row not accept a margin?
- Add fontawesome to shadowroot of webcomponent
- Darkening an image when clicked is requiring an initial click on that image, and I don't know why
- Adding margins between Bootstrap columns
- css border: 1px appear as 0.667px or 1px depending on the computer / display resolution (?)
- Button to download file and redirect to new page
- How to insert row with attributes using table.insertRow?
- Pass objects/vars between Page_PreInit and Page_Load