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.
Related
Im working on this responsive website (hosted site). If you use the inspect tool, it looks fine on desktop/tablet versions, but on the mobile version, the sections are still next to each other. I made this mobile-first so the media query shouldn't have affected the mobile version. To be even more clear the mobile version should look like this
I posted the code on github, but I believe the relevant code to be:
#media (min-width: 600px) {
.authentic {
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-areas: 'bowl content';
height: 100%;
margin: 0px;
}
.right-col {
grid-area: content;
padding: 0 10%;
text-align: left;
align-self: center;
}
img {
grid-area: bowl;
object-fit: cover;
height: 50vh;
}
}
I'm new to stack overflow so if i'm missing anything let me know. Ty!
You need to tell the browser to set the width of the page to follow the screen-width of the device with something like this in the head of your index.html:
<meta name="viewport" content="width=device-width, initial-scale=1" />
It seems you are missing the viewport meta tag inside the element of your html
<meta name="viewport" content="width=device-width, initial-scale=1">
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 was having a hard time figuring this out.
I have a responsible website and i was trying to call it by an Iframe.
It worked perfectly on the desktop but it seemed too little on the mobile device.
<iframe src="https://religious-freedom.herokuapp.com"></iframe>
CSS
iframe:focus {
outline: none;
}
iframe {
margin: none;
border: 0;
width: 100%;
height: 100%;
position: absolute;
display: block;
}
body {
display: block;
margin: 0;
-webkit-overflow-scrolling: touch;
}
It turns out that the physical size of the smartphone is wierd.
A viewport controls how a webpage is displayed on a mobile device. Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. Setting a viewport gives control over the page's width and scaling on different devices.
Pages optimized to display well on mobile devices should include a meta viewport in the head of the document specifying
width=device-width, initial-scale=1.
<meta name=viewport content="width=device-width, initial-scale=1">
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'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.