I built a website with Foundation 4 and having some issues (lots of them) with the responsive part of it, decided to get rid of the viewports in the CSS which I thought would cause the website to render normally on small devices but the result is really bad and I'm not sure what's causing it. I have no more #media targetting small devices in the CSS and yet it still very very messed up.
You can look at the results on different devices there:
http://www.viewlike.us/
This is my website
http://broadcasted.tv/
Can anyone tell me what's wrong ? (Javascript or something ? I don't know, but it's bad...)
Is there a way to tell the browser to ignore diffferent width and handle everything the same way ?
Thanks
don't delete the #media queries, they are what is used to display things differently for each device. If you're trying to ignore different screen resolutions, you're not using responsive design.
EDIT: looking at your website, it seems to be fine for resolutions 1041+... with that knowledge, use those #media queries to get rid of that giant bar on the side.
Use a min-width for your header and divs so they don't become smaller than the desired size, I see something like that happens to your header.
For example, I just tried adding min-width:1100px; to your top-bar div, and there seems to be less of a problem in that part.
I'm not saying having a 1100px header is recommended (because it's not) but I'm just using it as an example.
Related
I am Programming a webapp that uses a mobile-first design principle.
I have tested the design with my primary devices but then I discovered, that other devices with nearly the same display displays the page completely different.
The problem is because of the device-pixel-ratio, the app toggels to another media query and so the margins just look strange. On the Picture that does not look much, but on the device it really looks strange.
Is there a way I can modify the device-pixel-ratio within my javascript or css?
Consider the following site: 200minus.com
This site looks good on both a mobile phone and a desktop. It's as if when you view the site on a mobile phone, everything is appropriately shrunken. Where in the source code (HTML/CSS/JavaScript) is this being dealt with (or is this typically dealt with)?
In the CSS as media queries.
You can adapt the layout of CSS styling, depending on what size the browser window it's being viewed with is.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries, and
the official W3C documentation: http://www.w3.org/TR/css3-mediaqueries/
Theres 2 typical approaches to page design in mobile/desktop situations.
Adjust the page to suit the size of the display at load.
or...
Make the page respond to it's size dynamically( This is referred to as responsive design).
It is considered good form to use responsive design, as it has obvious advantages for screen resizes. Such as if a tablet/mobile was rotated or if a desktop user resized their window.
A good design should be implemented predominately in css as it is the fastest part of the page to update/ evaluate, and is simpler to implement than modifying the page style than JS. Proportional layout and forward planning help considerably when it comes to producing a layout that works well on many screen sizes and many guides will instruct you to design for mobiles first, then adjust for desktop sites. Personally I try to think of them as one part that is never a fixed size.
The bread and butter of responsive design is media queries; they allow you to only active certain css rules under one or more conditions. For example:
#media (min-width:650px){
.about_tablet{height:175px;}
}
#media (min-width:650px) and (max-width: 675px){ /* both conditions must be met */
.about_tablet{height:175px;}
}
#media (min-width:650px) , (max-width: 675px){ /* one or both conditions must be met */
.about_tablet{height:175px;}
}
Another very useful trick is viewports
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width" />
They can be a little strange, behaviour isn't uniform across older mobile devices and they don't work at all on desktops, but they are quite useful. You can force a page width and scale the page on a pixel by pixel basis (800 px image on a 400px wide screen for instance). Prevent the user from being able to zoom in, or limit the zoom. Most useful is the width=device-width" which prevents the horrible zoomed out effect you get on non optimised webpages when you view them on a phone.
If theres a more specific concept you want to talk about I'm happy to help, a vast majority of my work is done for mobiles.
This is simple Bootstrap. Just try it out! I think it's really good. Also mentioned in the answer above this is everything done with CSS. For example this:
#media (min-width:768px){.container{width:750px}
}
#media (min-width:992px){.container{width:970px}
}
#media (min-width:1200px){.container{width:1170px}
}
When the width is smaller than 992 px the container will be set to 750px.
Greetings
In CSS using media queries, as explained here:
http://css-tricks.com/css-media-queries/
For example:
#media screen and max-width:600px { /* CSS here */ }
Is a common brakepoint that I use.
For some specific handling I've found I have to use javascript or jQuery to really get the effect I want, but generally CSS media queries and some intelligent and creative use of showing/hiding objects with the display property will get you 99% of the way there.
I'm coding a web app with PhoneGap for smartphones so I need to have responsive CSS to adapt to the various width, but most important in my case, heights
So I have a main #wrapper with style height:100% and I want to tap a button and slide it up all the way to the top, but 50px.
If I would know the exact height of the screen, let's assume 480px, I would simply do translateY(-430px), done.
I tried using webkit-calc, but beside it's supported only by few browser, I got crashes everytime I use it. dunno why.
What's the best practice to solve this simple problem?
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 was looking around for a way to arrange content differently depending on screen size when I noticed this site. Quite a nice looking site too. As I change my browser's size, the column configuration changes? When I reduce to the very minimum size or visit it on a phone, the large image on top disappears completely, leaving only the small icons. I've turned off javascript, and this still happens. Also, it works in my ie8, so I'm guessing it's not an HTML5 thang. How is it being done?
Thanks!
This effect is not being done by Javascript, instead it is being done by CSS #media queries. Chris Coyier of CSS Tricks has a great intro to #media queries
Simply, it allows you to specify the scope of a stylesheet based on some boolean expression (such as checking if the window width is a specific width used in that example you saw) and then apply specific styles thus making it responsive design