I really can't figure out what it could be that's causing my custom responsive theme to be desktop-viewed. It looks as if it's the banner, but it's not. When I remove it completely, the page still has a gap on the right side and desktop view. It's supposed to zoom in for a mobile friendly read. I'm using wordpress which may have something to do with the issue. Main front page doesn't have this problem as it doesn't use wordpress..
[temp link removed]
you need to initialize screen size in the head section of every page, or you can include same header in every page!
<meta name="viewport" content="width=device-width, initial-scale=1" />
Related
I'm not sure what the heck is going wrong here. Whenever I preview my site on a renderer like this, example, my site displays differently from an actual phone display. This is making it very difficult to test and adapt for other screen sizes.
I'm doing a mobile-first layout, but everything was working just fine until chrome started acting up (something my department isn't allowed to fix, so that's not an option) which is why I'm resorting to these types of sites. Also, the only other browsers I'm permitted to use are IE and Edge.
Any advice would be appreciated, thanks.
Your page is missing a viewport meta tag in the <head>
Adding <meta name="viewport" content="width=device-width, initial-scale=1"> should make the page render as expected on mobile devices.
Please take into consideration I am pretty new to programming and only know basic things!
Currently, the header on my shop has not got a width set and works fine on the desktop site > feel free to visit to view www.Part-Box.com
However, when the site is loaded on a mobile device or a tablet, the view changes and the header is cut off > you can test this by resizing the browser on a pc. Basically I want the mobile version and desktop version to be exactly the same. There is currently a zoom on the mobile version and half of the header gets cut off.
I've tried setting the header to have a width of 100% in the css which works but completley rearranges everything in the header, can anyone help? thanks guys.
(it would be a lot easier to understand with pictures sorry)
Solution found by removing a line of code
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Per comments above: the OP wanted their website to look the same on desktop and mobile. That is, no layout re-ordering, re-sizing or re-styling.
To do what you want we need the mobile browser to zoom out so the whole page can be seen. This happens to be what mobile browsers do by default.
The reason this is not happening for you is because you are using a meta tag that is widely used for Responsive Web Design layouts:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Remove that tag from the page and you should see the results you are looking for.
**I realize that this isn't an ideal user experience choice but this is what the OP asked for.
I have a problem with my website, where when opening the site on an iPad it does not scale to full with of all elements, on the right side the page is cropped.
But after zoom out (pinch) the page is displayed as it should.
My site uses this theme:
http://cubicthemes.com/develop/veteranfood/
Developers of the theme cannot help me :-(
I hope someone else can help to solve this (CSS?) issue?
Which generation of iPad giving you trouble?
Try the following
Adjust view port in the head of each page (easy)
<meta name="viewport" content="width=1020px"/>
Or not so easy is to start playing with CSS media tags in style.css
Using bootstrap, when I resize the width of browser window on PC, everything looks splendid, all elements relocate like they should. But when I visit this page on phone - it just loads the full website zoomed out, so it fits all the page, which looks like a fullscreen on PC, with minute letters and images, as if I didn't waste hours making it responsive! Am I missing something?
Are you using the viewport meta tag? If not, I think it might be the way to go:
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm trying to make a website responsive. The header should be 100% of the page width, on all devices, so I set the width like so:
width:100%;
It works perfectly well on all devices, however on smartphones, it only works the first time you visit a page. If you click on a link on the page and then click "back", the website "blows up", and is show completely wrong, and the header is definately not 100%.
Has anyone else ever had this problem?
First time you visit the page:
When you go to another page and then click "back" to this page:
I talking about the area with the red border that currently has no styling other than the red border.
Problem persists both with or without
Check your viewport settings. They should be
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">