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
Related
I've created a test site. I've used media queries in css but when I load the page on mobile, I don't see the mobile version and when I re-size the browser the site is responsive. I've read at multiple places to not to use *-device-width. So, what am I missing? What could be the resolution?
Add this to the head of your website:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will set the width of your page to follow the screen width of your device.
It was my mistake. I used javascript to override meta tag and it was causing issue in proper responsiveness. Fixed javascript.
I'm experiencing a serious problem with viewport metatag while browsing on mobile.
Adding this line to my <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Makes the whole site display everything 10x bigger, won't display background images at all.
What am I doing wrong? This only applies to mobile version.
After using metatag:
EDIT:
I'll add another screenshot to show exactly this same part of the page.
i think i found problem)
all of you query start from min-width >700px
you can write #media(max-width: 968px) - and all must work fine
play with query rules
I have a blog website where I used the viewport property to scale the site in mobiles, it was working perfectly using:
<meta name="viewport" />
Then it stopped working for no reason, didn't touch the code at all. Now I've been trying with everything I find online, from max-width to initial-scale, etc. Still doesn't work.
What could be happening? Is there any update that cancelled the viewport property?
My website: www.fake-leather.com
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">
Any additional parameters in the content attribute usually screw up user’s experience.
Reference: Stop using the viewport meta tag (until you know how to use it)
Hi guys I hope there are someone that can give a solution for this:
When coding a responsive website I get the problem when the screen turns on a ipad it don't reset the zoom meaning that when users turn to vertical it will zoom in and you have to reload the page or zoom out to see the full design is there a way to force a reset on the zoom or reload when users turn the screen. I pref if the solution comes in css becuase it's only on ipad device the problem is and I can control this in the .ccs fil assignt to devices
I know there has been some questions about this but nothing of that I could use becuase I'm not trying to block that users can zoom in or out but I'm trying to reset the zoom on screen turn
Best regards
Lasse
Add the following meta tag in your HTML code (Inside head tag)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
link: http://www.kelvinhanssen.nl/projecten/marktmix_responsive/html/bedrijven_responsive.html
I made my first responsive webpage, and it doesn't act the way I want.
When I test it in this app: http://www.studiopress.com/responsive/
My website does what it's supposed to do.
But when you display it on your phone it look like it's been zoomed out
I can't attach any images because my reputation isn't high enough.
Any suggestions?
Add <meta name="viewport" content="width=device-width"> to your header.
This will make it so that the phone does not 'exaggerate' its actual width when rendering the page, which is how they typically get web pages to look decent.
I had this problem when I was doing my first website, it makes it look like its a desktop webpage, even though you have it set to look on a mobile webpage.
Just add this to your head part of your website, and it should work.
<meta name="viewport" content="width=device-width">
Let me know if it works.