Good day everybody! I am currently working on a web app, and I am using media-queries, in aims to support mobile and desktop.
I have tried to use max-width: 414px as my first break-point, to work on the current iPhones and other phones with smaller screen sizes. However, even after rereading various forum posts, responsive web design tutorials, and web documentations, to no luck, it wouldn't work the way I need it to.
See here that whenever I use max-width, even on screen sizes of 414px, or lower (I have tried), it really wouldn't work. The styles wouldn't apply.
Now, when I would use, min-width, it does work, however, I've read it's better RWD practice to use max-width for better functionality.
What are your suggestions? Thank you!
So I think your problem is that you are in zoom mode (like 2x or 3x). If you are in Safari responsive mode, please remember to go to use View > Actual Size , make sure it's not zoomed in in any way, as this will surely affect the media query used. Have a good day!
Related
I have encountered the strangest problem I have ever encountered in my web development career, and I just cannot seem to solve it.
I developed a website: www.ktngroup.co.uk a few months back, all worked perfectly upon launch across all devices. Now it would seem as though the site has developed some form of issue limited only to ipad. The strange thing is, I cannot replicate it when using css user agents and screen sizes, which is strange becuase it looks like a css problem.
I cannot describe the issue very well, but it looks as though all the content (Except the header) is pulled off the site on ipad/not displayed. Also, when using adobe edge inspect; I see that none of my css rules are being applied to the elements.
Comparing the desktop version at 1024px vs the ipad landscape is the best way to discover the issue.
UPDATE: When I cancel the iPad fully loading the site (roughly the first two panels) the site functions perfects on those two panels – almost as if its loading something further down that breaks the site?
If anyone has any guidance, I truly could not thank you enough.
For those who may encounter the issue – it's what Jack Pattishall suggested. The iPad didn't seem to respect vh as a unit, and as a result my images were huge.
To fix this I added a media query to handle the handheld tablets with a set pixel width/height.
Hopefully this can be of use to someone
I'm a graphic designer, I have a small question, Ive learnt some of css and completed the HTML tutorial package over the internet multi time, so I have a good base of html-css coding at least, I do want to start converting PSD webdesigns into HTML-CSS, I've seen many tutorials step by step guides etc.. and they were helpful for sure but I'm afraid of many points:
The flexible point of the website, which means the following: my monitor is currently 1920x1080, let's say that I will code the website to fit on my screen and someone with a small / big screen than mine would open the site, will he see the objects moved from its original place? because defining by px is measured to fit to the user's monitor as far as I know.
Ensuring that the site will be working on at least 3 browsers plus, I know that every browser has its own css base reader and its very hard to set the website to fit all browsers especially internet explorer.
So, I don't want a special help to be honest, all I need is some points / well-guided tutorials to follow to ensure that the points I've reviewed being at least 50% solved..
What you are talking about is Responsive Web Design. Literally just search it up on the internet and you'll find tons of resources and blogs.
My tips are:
For testing multiple browsers download all of them (Chrome, Firefox, Opera, IE) and when you save your work (do this all the time) open it in all browsers so you know where your errors are coming from
Use the developer tools on your browsers. Chrome and Firefox have very good developer tools and help me figure our my problems. You can also use it to emulate mobile browsers and show your media queries (explained later).
Use em instead of px. pixels may look nice on your screen, but if the users screen is small they may find it hard to read your text. here is a good px to em converter http://pxtoem.com/
Use percentages. For example you can make your content div have width of 80% so that you have some space on both sides of your screen (like the design of stackoverflow). This means that your content will fit on most desktops well. Another example is a navbar, you can make it 100% wide so that it always fits the screen no matter the desktop.
Then we have media queries. These allows us to change the content based on the size of the screen. For example you can hide the navbar using a media query when a mobile user is viewing your website. Here is onc elink about media queries:http://cssmediaqueries.com/what-are-css-media-queries.html
Some people still develop for IE8 but it is a pain in the ass. You need to decide whether your audience will be using IE8. I'm guessing as a graphics designer you're going to be making a graphics blog, meaning that your audience will probably be using up to date browsers. So have a think if you really need to develop for older browsers.
As for the first point: there are some ready css frameworks, with responsive elements included. The most popular, I suppose, is Twitter Bootstrap. It has a grid system to help you make your html blocks change their width and even get hidden depending on the viewport width.
If you want to understand the techniques, you can study how media queries work.
As about cross browser stuff: you will have to test your pages in all browsers you want to support. That's the rule. On your way, this link can be useful.
The flexible point of the website, which means the following: my
monitor is currently 1920x1080, let's say that I will code the website
to fit on my screen and someone with a small / big screen than mine
would open the site, will he see the objects moved from its original
place?
The general way to get around this is to build a centered window, thus:
<html>
<div id="container">
<!-- your design lives here -->
</div>
</html>
#container
{
width:728px;
margin: auto 0;
}
Your design is now set at 728px which should fit most resolutions. You can have graphics that expand beyond this, see the bar at the top of SO, but your content should live inside this container.
Another potential solution to this is to allow you design to be completely flexible and contain all your elements in divs that float about, see Masonry for an example of a tool that helps with this.
Ensuring that the site will be working on at least 3 browsers plus, I
know that every browser has its own css base reader and its very hard
to set the website to fit all browsers especially internet explorer.
This is a bain of every web designers life. There is no substitute for good testing here. Something that will help is a CSS rest script like this one. This will remove some of the inconsistencies across browsers. But really you just need to, test and test again.
I am buillding a website which looks great on a desktop however when i view it on a mobile it doesnt really work. I was wondering how I could set up a method/system which would automatically load the mobile site when being viewed on a device. Is there a way to do this? I have no problem with building 2 different sites but I would just like it to be automatic.
If you take a look you will see what I mean -
redchevron.co.uk
Thanks
As a general rule, you shouldn't build two separate sites if you can avoid it. The general best practice is to use responsive design techniques to build a single site that automatically adapts its appearance and behaviour to suit different devices.
To automatically adapt the layout and styling of your site for devices, use CSS Media Queries. That's a big subject - so here's some places to start your research:
Beginners guide to responsive web design
Media queries for standard devices
Mobile first responsive design
In short - Media Queries allow browsers to use styles (and ignore others), depending on properties of the device displaying the site. For mobile, the most common technique is to set up a media query for screens smaller than x pixels wide, and include your mobile styles within it.
To adjust behaviour for different devices, you can use javascript to detect various attributes of the user's device (is it a touch device, for example), and adjust to suit. It's worth noting though, that your site's functionality should work without javascript - it's important to create a solid, HTML only site as the foundation for whatever other work you do.
I'm relatively new to this so please excuse my novice question.
I am making a responsive site based on the Zurb responsive framework, and using firebug in Firefox the site looks as it should in Chrome/Safari/Firefox however however IE ignores the media queries so various margins etc don't disappear as the screen size is reduced.
Is there a way to get IE to respect media queries so it behaves like other browsers?
Thank you in advance for any time you may take to reply.
Kind regards,
Sam.
There are a couple of JS libraries that can give IE the same media query functionality as other browsers:
Respond
https://github.com/scottjehl/Respond
CSS3 madiaqueries
http://code.google.com/p/css3-mediaqueries-js/
While searching for an easy way to make my menu (http://www.ck-game.com/newIndex.html) fit screen size I stumbled over the possibility of using the browser's zoom functionalities (zoom, moz-zoom, etc.). I could imagine that it's much easier than using "em", "%" and media queries to make an elastic layout, more so because I have background-images which need to keep aspect ratio. Is there anything that speaks against using it besides someone wanting to actually zoom in/out and then the menu would adjust to it?
EDIT:
Proof of concept: http://www.ck-game.com/newIndex.html
Please try with different viewports and see how well it adapts :) Tested in IE9, latest FF and latest Chrome. Works on Android devices, breaks on most iOS devices.