I have very strange problem.
I am developing mobile version to my website and i have very strange problem.
When i open my page with mobile that is having screen height over 770px everything is working well. So when i open it with 771px it's works.
But if i change the screen height to 770px the javascripts is not working any more.
First of all i found all #media only screen and (min-width: 771px) { rules in my CSS files and replaced them to #media only screen and (min-width: 350px) { but even with that change it is not working.
I've searched for any occurence of 770 or 771 in all my CSS files and style rules and there is none like that, but still the javascript is not working.
Here is my complete javascript: http://pastebin.com/HJyDrVYd
Here is my complete css: http://pastebin.com/M3Cu5qfF
Here is my HTML output of the page on which i have this problem: http://pastebin.com/CBgedJmZ
I run out of suggestions from where the problem may come and why the mobile version have working js with screen height 771px or higher but not lower.
Can you give any suggestion and help ?
Thanks in advance!
Related
I am back here again with another question for responsive grid systems. I have this website http://www.waldenservices.com that uses The Responsive Grid system with various columns, I have CSS codes for 1024, 768 and 480. I am definitely inserting the css scripts on the page but I am not sure of the jQuery/java code I need to make it work.
My questions are: What script do i need to call these css styles?
And, Does these help me to detect the screen size of the user? (I think web browser size is one is my biggest concern, as different users cannot see the whole page but have to scroll from side to side to even see the whole menu).
Any help or input is very appreciated, I really don't want to have to redesign this whole page.
Thank you guys!
You don't even need to call script (I don't know what you meant by it), you just need responsive stylsheet.
All you need:
#media screen and (min-width: 1024px) {
.col-5 {
width: 50%;
}
}
#media is CSS # rule, used for media queries.
screen means these styles are just for screens, not for printers, or for presentations.
(min-width: value) and (max-width: value) are used to specify minumum or maximum screen size on which these styles will apply. You can combine (min-width) and (max-width).
Whenever, if you have problems with coding responsive grid systems, you can start using a framework (e.g. Bootstrap).
I am new to HTML and CSS development. I have created a html which looks fine on PC web browser.
However, when I use my Android cell phone browser to view it, since the cell phone screen is too small, there is a lot of sliding needs to be done to locate the area I want to bring into focus.
My webpage only has an index table in the center, while left and right of the body are all blank. I was thinking if there is any way to detect the browser to see if it is from a mobile device, then resize the body of the page?
Any advice is welcomed. Thanks in advance.
It is either:
you should take a look and learn at some responsive website code like this one.
Try to add this code after your opening head tag <meta content='width=device-width, initial-scale=1' name='viewport'/> if you don't want horizontal scrollbar on smaller screens.
The most popular method today is to use a CSS media query. Any code inside a media query will only apply to the parameters specified. This usually applies to height and width of the browser but it can also work for printed stylesheets, display resolution, and a few other things.
Heres an example that targets browser widths between 320px and 480px, common sizes for smartphones.
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body {
background: #999;
width: 100%;
}
}
You can find more examples here: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
My webpage is working fine while displaying on my 1920x1080 monitor.
But when I change to use 1024x768 monitor.The content of my webpage will be too big.
I used CTRL+Scroll to resize my webpage to 65% and everything seemed to be good!
Is there any code solution like CSS, javascript or etc.. to resize my entire webpage to 65%?
PS:I use Joomla to develop my website. Maybe an addon?...
.wrapper {
transform:scale(0.65,0.65);
-ms-transform:scale(0.65,0.65); /* IE 9 */
-webkit-transform:scale(0.65,0.65); /* Safari and Chrome */
}
You could try wrapping the entire site in <div class="wrapper"></div>
Edit: This would not be best practice, but does answer your question. Ideally you should create your website using % based layout so that it re sizes automatically to any screen resolution.
Can't for the life of me figure this one out. I'm building a site: http://ingenious.jit.su/ and I've set up a sidebar that follows you down part of the page. I was pretty damn happy with it until I discovered this bug.
If you open in in Chrome on a Windows machine, and you resize the browser width to between 781 and 798 ish, the sidebar becomes fixed over the content of the page : (
For some reason it seems my media query is activating before dropping below the max-screen width of 780px.
Any help would rock!
Well there's a couple ways to tackle this. Your JavaScript is causing your #followbarto be fixed, and you could either make edits there, or just add this to your css under your #media screen and (max-width: 780px)
#followbar
{
position:static !important;
}
That's just a quick fix. Your JavaScript could probably use a bit of tweaking, but this will handle it.
I have 2 questions;
For fixing iPad Safari issues, do we only need to update in the CSS...I mean can there be any kind of issue which might require a JS update as well to fix for iPad.
Also through JS, is user-agent check the only option OR is #media which is used in CSS can be used in JS as well, as an if..else condition?
Depends what you're trying to do, but Mobile Safari has a very good rendering engine I don't see where you would need to tweak CSS with JS to make it work.
Yes you can target just the iPad with the following syntax:
"
#media only screen and (device-width: 768px) {
/* For general iPad layouts */
}
More here