So I made a noob developers mistake and made the standard web page before the mobile version. So naturally when I open my Web page via mobile it's completely messed up. I can write a mobile css file and link it how ever I'm
Wondering if anyone knows of any black magic html or css formating I can append to my files as a fix.
I've manipulated viewport contents
Display width and #media but the solution eludes me.
Again I'm new but committed so thanks in advance.
You can configure your file by using this CSS
#media only screen and (max-width: 720px) {
body {
background-color: lightblue;
margin: 0px;
}
}
The 720px is the average size of most smartphones. You will need to add this meta tag to your html pages as well
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope this helps
The easy way would be to move all your desktop-specific code into a min-width media query that looks like this:
#media screen and (min-width: 1000px)
Where 1000px is wherever your website needs to switch to mobile styling. This way, all your desktop CSS will be applied down to your first breakpoint. In this example, once you get below 1000px your desktop-specific CSS will stop being applied and your mobile CSS can take over.
Place your mobile CSS outside of all your media queries. Once the desktop CSS stops being applied, the browser will fall back to the "default" mobile CSS.
Related
I am trying to get this working but somehow its not working in mobile. when i use chrome tool to overrides the screen size, it works fine. i am not sure what i am doing wrong. please help
#media screen and (min-device-width : 320px) and (max-device-width : 480px) {
.container .backgroundImage { display: none; }
}
There is a background image when viewed in browser. s i would like to remove that image when viewed in mobile BUT its not working somehow.. please help
=============
TESTING ON IPhone 3G, 4, 5, Android Galaxy Nexus
#Andy is right, double check your device-widths, or you could always just use min-width so you don't have to know every device width.
Regardless make sure you have a viewport tag, like <meta name="viewport" content="width=device-width,initial-scale=1.0">.
Fantastic - forgot the viewport too!
Fot all:
Just add
<meta name="viewport" content="width=device-width,initial-scale=1.0">
in your head
I know this is an old post, but I recently had an issue like this. I ended up fixing it by removing the CSS media query from the main CSS stylesheet, and entering the specific needs for mobile on the html style section instead. Don't know why it worked, but it did.
Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.
Thus this worked for me:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
I have this simple HTML generated from React
<!doctype html>
<html><head><title data-react-helmet="true"></title><style type="text/css" data-styled-components="" data-styled-components-is-local="true"></style></head><body><div id="app"><div data-reactroot="">Hello</div></div></body></html>
When I open it in Chrome with mobile view, the page dimension is bigger than screen size. In this example, the iPhone 5 dimension is 320x568 but my page width is already 980px. There is no CSS used on the
This forces me to use bigger font size which looks normal on that page but becomes really big on desktop. How the page size can be bigger than screen size? How's that happen?
What you're looking for is the #media selector. You read more about it here.
At the bottom of your code (or anywhere you like, but it's bet to put it at the bottom), you'd add
#media only screen and (max-width: ##px) {
}
Where you see "##", you'd put the max-width of the phone screens you're trying to display code in.
On the inside of the brackets, you can rewrite your entire website to fit specifically to a phone (and it'd only show up on a phone with a max-width of ##px or less), or you can simply edit one thing, such as the font-size in this post.
Say for instance in your primary post you had
.desktop {
font-size: 30px;
}
For phone, you'd put
#media only screen and (max-width: 568px) {
.desktop {
font-size: 15px;
}
}
I hope this helps out! If so, don't forget to upvote and mark as acceptable.
Found the solution here, simply adding meta tag for viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
There are pages in the website that require reworking, such as converting everything to a single vertical column for mobile screens. In the React Native EditScreenInfo title_uri, I added a query string: mob=yes. The value isn't important, but the server code uses it to determine if it's called from a mobile device. So the server code determines which layout is to be used. I also used JavaScript to make the text as big as possible in the various tags for mobile.
What's the best way of simply 'shrinking' a site to fit on to an iPad, while making it fully responsive when it comes to mobiles?
Here's my viewport tag:
<meta name="viewport" content="width=device-width">
I had hoped that the following media query would enable the whole 1060px wrapper div to be displayed by forcing the device to 'zoom out' thus displaying all, like a mini version of the desktop display
#wrapper {
background: green;
margin: 0 auto;
width: 1060px;
}
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
body { min-width: 1080px; }
wrapper { background: red; }
}
The media query itself works (wrapper background turns red on iPad), but I still need to zoom out to view the whole page.
However, if I change to my viewport tag to:
<meta name="viewport" content="width=1080px">
I get the desired result, but this is no good since the mobile version needs to be fully responsive. So am hoping there's something I can add to the media query to achieve it.
Sure I'm missing something very obvious here - and seem to remember this technique working in the past - any help appreciated!
Many thanks in advance!
EDIT:
It seems this has been raised before, same issue, and yet no solution:
How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?
I'm developing a mobile site for the first time and i'm trying to create a responsive design.
So far i'm having a lot of trouble with the viewstate settings. Mostly on Android but also some on iPhone.
I'm using these settings:
And i'm also using this in my CSS (just to be sure):
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
It works perfect most of the time on my iPhone. But sometimes when i change to landscape and then back to normal, the resolution of the page gets smaller. And sometimes it stays the same (as it should).
On the Android phone it works perfectly both in landscape and normal modes. Here my problem is, that sometimes when i refresh the page, it seems like the mobile doesn't read the viewport settings at all. It just looks like a normal webpage that isn't optimized for mobile.
Anyone have an idea about what i'm doing wrong here?
EDIT
i also tried to add the meta viewport tags (i don't know why my code doesn't show up in this post, but that doesn't Work either).
You could start by simplifying and rechecking your code.
In the head of your page make sure you have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If there are additional viewport tags, remove them for now.
For the media queries in your CSS use
#media (max-width: 767px){ /* adjust viewport width as req'd */
.selector{ ... }
}
and remove the the other # tags you've used (eg #-ms-viewport)
Good luck!
I've just completed a mobile site for a client, and I've mainly focused on the website's lightness and responsiveness. I haven't worked on redirecting the website because it's still a work in progress BUT all the vital components have been done.
Now if you view the website in your computer and resize your browser, you'll see how it changes according to the viewport's width. But I tried viewing it in my smartphone (Samsung Galaxy S2) and I end up seeing the whole website squished into the available viewport.
Why is this happening and what do I do to make it work?
Thank you very much for your time!
Mobile browsers won't know what to do unless you specifically instruct them.
The viewport metatag is essential when designing responsive layouts. To fix this problem, simply add the following tag to your website's <head>:
<meta name="viewport" content="width=device-width">
If you feel that you need to zoom out a tiny bit more (I personally prefer this), you can also make some small tweaks to get a cool look:
<meta name="viewport" content="width=device-width, initial-scale=0.7">
Have fun,
Adam.
Check your CSS. You haven't closed your curly brace. or you have typo error.
/* =Responsive: Small screen to tablet & IPAD
-------------------------------------------------------------- */
#media (min-width: 768px) and (max-width: 991px) {
.navbar .nav li a {
padding-right: 5px;
pading-left: 5px;
}
example css.