I've created a child theme of twentyeleven and have copied header.php and removed the following code from the file:
<meta name="viewport" content="width=device-width" />
Also, I've removed all styles (in style.css of twentyeleven) starting from:
/* =Responsive Structure
----------------------------------------------- */
#media (max-width: 800px) {
all the way down to just before:
/* =Print
----------------------------------------------- */
But still the page width is responsive on the site here and all elements overlay each other when you resize the browser window.
I don't need the page to resize or any element to move when I resize the window or use a mobile/tablet browser.
Thanks!
You have
#page {
margin: 2em auto;
max-width: 1000px;
}
set in your style.css. Change this to
#page {
margin: 2em auto;
width: 1000px;
}
to set an explicit width and stop the page from resizing.
Related
www.yourtechpros.co.uk/test/
If you see the content is fine on a computer but on a mobile device there is a gap to the right with no content there just a white space? i've checked over the code of the media query and all seems to be fine, can anyone assist?
Ive checked all the code over and tried to adjust all the content inside
www.yourtechpros.co.uk/test/
May I suggest adding a viewport meta tag? You will see that the entire website changes dimensions.
Add this to the head:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
More info can be found here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Extra support:
Checked your page: add the following
#media screen and (max-width: 767px) {
.callbackicon {
display: none;
}
.aboutabccleaning {
width: 100%
}
}
And change:
.frame {
width: 130%;
}
too:
.frame {
width: 100%;
}
EXTRA extra support:
If you remove the margin from .aboutabccleaning the white space will go away.
I am working on this project: http://www.ing-czech.cz/ If I open this page on iPhone, the page is too wide and small. I used
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Thank you for your ideas.
Lukas
I looked to your code and found these CSS declarations :
#footer {
width: 940px;
}
/* ... */
#wrapper {
min-width: 1000px;
}
/* ... */
#bunka {
min-width: 800px;
}
The iPhone screen is too small to render these elements, so Safari zooms out your page to show your page.
I'm trying to accomodate a really really old website to mobile standards and for some reason it doesn't get a width of 320 or whatever pixel width when i activate the responsive view in chrome dev tools. The result of this makes the pixels small while still maintaining the original 900 px width (in the original pc version that's the fixed size according to which the site was built on)
This would be my media query CSS:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body * {
width: auto;
}
#container,
#header,
#nav,
#container #wrapper,
#content,
#sidebar,
#wrapper-bottom,
#footer,
#footer-inner,
#footer-content
{
width: auto;
height: auto;
float: none;
}
/* Header
-------------------------------------------------------------------*/
#header h1{
display: block;
text-align: center;
}
#header #search{
position: static;
display: block;
}
/* Navigation
-------------------------------------------------------------------*/
#nav ul{
position: static;
}
}
If you need more are viewing into the mobile device and media query is not working then please check the meta tag in head
<meta name="viewport" content="width=device-width, initial-scale=1">
You must use meta viewport along with your CSS. Something like this by instance :
<meta name="viewport" content="width=device-width, initial-scale=1">
If you're viewing on your PC remove the word device from min-device-width and max-device-width.
In addition, make sure to use the meta viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
It's likely that some element on the page has a fixed width that doesn't allow for the page to resize as desired. You need to go through the elements and find it. I've ran across this issue on several sites.
I am having trouble making content scale proportionally when it get to mobile devices.
On a desktop the site looks like this http://imgur.com/a/hhsIb (first image)
I set a media query to make it look like this (second image)
#media only screen and (max-width: 867px) {
#header-wrap{
padding: 0px 0px 0px;
max-height: 100%;
}
.right.nav {
float: none;
}
.nav{
}
ul {
display:inline-block;
padding: 0px 10px 0px;
min-width: 300px;
}
.left {
float: none;
}
.logo{
margin:auto
}
}
But when viewed on a mobile device it looks like the desktop (third image)
I am also trying to make the nav move from being floated right to aligned in the center once it hits the query but I don't know how to do so.
Here's the JS Fiddle http://jsfiddle.net/u9shm5af/
You need to add the viewport meta tag to the <head> section of the document:
<html>
<head>
<title>Robert Fikes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
...
</body>
</html>
Mobile browsers, without this tag, render web content at a fixed width, so that older sites that don't have responsive styles aren't cut off.
From the Safari Developer Library:
The majority of webpages fit nicely in the visible area with the viewport width set to 980 pixels in portrait orientation, as shown in Figure 3-10. If Safari on iOS did not set the viewport width to 980 pixels, then only the upper-left corner of the webpage, shown in gray, would be displayed. However, this default doesn’t work for all webpages, so you’ll want to use the viewport meta tag if your webpage is different.
I'm working on a web site that uses responsive images and a couple of fixed sidebars (first attempt at responsive design). The problem: The responsive images are working as expected in Chrome, but they aren't working at all in Firefox. Here's an example of the page in question:
http://ellenflaherty.com/projects/carland/
Any idea why the discrepancy?
Note: The responsive images aren't working when the browser is over 1000px. They actually are working as expected when things adjust for tablet/phone-sized screens.
I've had a look and in terms of Firefox I suggest you remove your display: inline-block and float: left; when your browser window reaches is re-sized to a larger screen size, like the 1000px that you have mentioned in your question, and then for smaller screen sizes you can reintroduce the display and float to make sure the page displays as it should.
I'm attaching an image below the code of what it looks like after the display and float are removed on a large screen.
.projectimg {
bottom: 0;
/* display: inline-block; REMOVE THIS */
/* float: left; /* REMOVE THIS */
height: auto;
margin-left: 220px;
margin-right: 30px;
overflow: hidden;
width: 80%; /* THIS */
}
Hope that helps
Add the <meta name="viewport" content="width=device-width, initial-scale=1.0"> in the header of HTML. It will help to adjust page size according to screen size.