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.
Related
My #media only screen and (max-width:860px;){ doesn't work on the browsers when I put the html-code inspector on mobile.
its mostly explained on this image.
It does work on my other #media codes for example:
#media only screen and (max-width: 1000px) {
.extramargin {
margin-left: 0;
}
#click {
margin-left: 40px;
width: 90%;
}
}
If more code is needed I can send more code. I don't know what part of my code cause I have 1200 lines of code and have to search a time before I will find everything to make a code snippet. But if its needed I can do that.
You have to tell the browser that you want the width of device to be the ACTUAL width of the device. So, you have to set the viewport.
Just include this in the <head> section
<meta name="viewport" content="width=device-width, initial-scale=1" />
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 have a page i've created which works fine in a desktop but get's messed up in a mobile browser.
This is the mobile version. I have a header and a .container(the one with gray background) set to width 100%. Inside .container i've a .wrapper set to width: 900px; and margin: 0 auto;. Why is the blue background and the gray background rendering till about half of the page witdh? What is the best way I can approach the problem to create a page like the desktop version on the mobile as well?
I believe your wrapper may be causing the issue. Instead of setting a fixed width for the object do:
.wrapper {
max-width:900px;
width:100%;
display:block; //for centering
margin:0 auto // for centering
}
Should solve your problem and make the website more responsive throughout different platforms.
Good luck! :)
NOTE
If you are not already doing so, take rajkumar's comment and add:
<meta name="viewport" content="width=device-width, initial-scale=1">
It's your wrapper and li width. Set them to percentages.
.wrapper {
width: 90%;
margin: 0 auto;
}
li {
width: 30%;
....
}
if you want create a site for both desktop and mobile..Try all width in percentage.because percentage only fit width automatically according to screen resolution.suppose you give in pixels the screen was not adjustable in all screen resolutions.its only fix according to your size only.
In your case please make sure for all width in percentage.
and also please conform the media type for get screen width in header section
<meta name="viewport" content="width=device-width, initial-scale=1">
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.