I do not understand why Twitter Bootstrap is considering the tablet size from 768 to 979, and not from 768 to 1024 (iPad). The problem is that if a client requests a custom design for tablet, that tablet design will not be visible on iPad in landscape mode.
Also if I have a content with sidebar (span9 + span3), if the sidebar is "hidden-tablet", the content will not expand, in fact it will have the same size and I have to overwrite bootstraps span dimmensions to achieve the desired layout.
Am I doing something wrong?
1) I think the idea here is that in general if someone is requesting a page that is over 980px its more likely that its from a desktop computer than it is from an ipad. Also you could just make your page ipad AND web friendly for those widths :).
If you have to have a different design for landscape ipad and the web, an option would be to do write a bunch of custom css for when the screen is between 980 and 1024px.
#media (min-width 980px) and (max-width: 1024px) {
//my custom css for ipad landscape
}
2) You are doing it right. All .hidden-tablet does is set display: none;
#media (min-width: 768px) and (max-width: 979px) {
// ... some other code
.hidden-tablet {
display: none !important;
}
}
It does not do any other type of resizing, so thats on you to do with media queries.
Related
Which is the better way to create a responsive website among grid, media queries, and HTML tables.
often neglected by developers when it comes to responsive websites: Typography.
Typography!
#media (min-width: 640px) { body {font-size:1rem;} }
#media (min-width:960px) { body {font-size:1.2rem;} }
#media (min-width:1100px) { body {font-size:1.5rem;} }
There are lots of ways to create a responsive behavior in css, you gave some good examples for them.
Personally, I'm using the Flexbox and Grid display methods to align html containers and contents, and by using Media Queries i can make them interact responsively for any device.
For example, if you wanna render a cards-based container, meaning there will be multiple div elements with their own contents, aligned in a straight line, i would use the flex-wrap property to break them instead of overflowing to one of the page sides. If the cards are getting small enough for the page, i'd use the vw value for my card's width at a certain page width, using media queries.
Of course you can have your own preferences for different responsive methods, and there are a lot you can search on the internet, i just gave some of my own.
Use media queries and flex,
Some example breakpoints,
// Extra large devices (large desktops, 1200px and down)
#media (max-width: 1200px) { ... }
// Large devices (desktops, 992px and down)
#media (max-width: 992px) { ... }
// Medium devices (tablets, 768px and down)
#media (max-width: 768px) { ... }
// Small devices (landscape phones, 576px and down)
#media (max-width: 576px) { ... }
I have created a site with the Blogger platform.
I have 4 pages on my blog, everything in the page list looks great on PC (this is my blog: https://www.onlinebouwdroger.be/p/home.html).
I want my mobile version to be just like the desktop version (so no Custom mobile template).
Here's the problem I'm encoutering (see screenshots below):
The pages bar shows only the first two pages on Mobile, and then puts
others in 'More...'
When clicking on 'More...' the page titles are
all messed up.
I would prefer to just have all 4 pages shown in the page list on mobile, just like on desktop.
I get that a mobile screen isn't wide enough to put the 4 titles in one row (like on desktop), but is there a way to put the last 2 page titles below the first 2 (so the titles are displayed 2x2)?
Or if not possible, the drop-down menu should at least look and work decently.
Like I mentioned, I want to show Desktop theme on mobile devices, not Mobile theme.
desktop view
mobile view without clicking on 'more'
mobile view after clicking on 'more'
How do I solve this issue so that the full page list is displayed on Mobile as well? (Without having to switch to Mobile template?) Or how do I make the drop-down menu look/function properly?
I've looked everywhere online, but can't seem to find a proper answer.
Thanks in advance!
Juliette
You can target smaller screens in your css like this:
#media screen and (max-width: 400px) {
myNavbar { css in here }
}
From there you can change how the links are displayed.
You have to add the CSS for the Tab inside media query to hide/show Tabs based on screen size
/* Extra small devices (phones, 420px and down) */
#media only screen and (max-width: 420px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) *\
#media only screen and (min-width: 420px) and (max-width: 768px) {...}
/* Medium devices (landscape tablets, 769px and up) */
#media only screen and (min-width: 769px) {...}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {...}
I have used the media queries for different width.I have used 3 Style sheets for mobile, tab and desktop views as follows:-
For Mobile View:-
#media only screen and (min-width : 120px) and (max-width : 640px) { }
For Tab View:-
#media only screen and (min-width : 640px)and (max-width : 980px){ }
For Desktop View:-
#media only screen and (min-width : 980px) { }
When I am re sizing my browser then it is showing the adaptive view but while checking in mobile device the web page is still showing the browser view.
The responsive view is also not adaptive while checking in the Device Emulator functionality of the google chrome browser.
However the side menu bar used for mobile view is still visible in the mobile view as expected but the remaining site is not adapting the width and height accordingly.
Can anyone explain the issue and reason behind it.
P.S. : I am restricted to media queries not able to use Bootstrap or any other framework for making my site responsive.
Here we go. As per your media queries, browser is not sure what layout should be adapted because you have defined the same width as break point.
What you need to do is define media queries like this.
For Mobile View:-
#media only screen and (min-width : 120px) and (max-width : 639px) { }
For Tab View:-
#media only screen and (min-width : 640px)and (max-width : 979px){ }
For Desktop View:-
#media only screen and (min-width : 980px) { }
Hope this help you.! Do come back if still having issue.!
Try to remove only screen and and leave it like #media (min-width : ...
these attributes is not required.
If it works but you really want to use screen and just remove the only keyword. From specs:
The keyword ‘only’ can also be used to hide style sheets from older
user agents. User agents must process media queries starting with
‘only’ as if the ‘only’ keyword was not present.
If at least something from #media section is working for your mobile device make sure that ALL your #media sections placed at the bottom of your CSS file and that this file are linked to you html the latest among all other CSS files. If it still doesn't work for you as expected check your actual CSS code or make a demo for us. How to make Minimal, Complete, and Verifiable example
PS.: You don't have to specify min-width for the smallest screen in the list of #media
I'm having different CSS files for different layout (Phone & Tablet). Since I have added styling in tablet view based on the view I get on my Samsung Note 8 with resolution 1200x800.
But when I run this application on Samsung Galaxy tab750 with resolution 1920x1080, I get smaller layout with smaller fonts since I have adjusted the fonts and layout based on Note 8.
So I get the suggestion to add the another CSS file for handling this. Next, when our QA tried running the application on iPad (Retina Display 2048x1536), again the third CSS is even small in it.
In 2012, there was a single tablet with a 2,560x1,600 resolution. In 2013, there were at least six. I suspect we'll see even more in 2014 (http://ces.cnet.com/8301-35302_1-57615742/tablets-at-ces-2014-the-calm-before-the-storm/#ixzz2nhc1BlAw).
With respect of this post Responsive Web Design and high resolution displays (iPhone 4/5),
We would be using media queries for required resolutions,
/* Large desktop */
#media (min-width: 1200px) {
font-size: 18px;
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
font-size: 16px;
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
font-size: 14px;
}
/* Landscape phones and down */
#media (max-width: 480px) {
font-size: 12px;
}
So my concern is can we handle this scenario, without going on adding more and more CSS and media queries, if so please suggests.
There are a number of media-query based ways of detecting high-density/retina devices.
I personally tend to use this, which seems to capture the vast majority of devices:
#media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (max--moz-device-pixel-ratio: 2),
screen and (min-device-pixel-ratio: 2) {}
Totally personal preference though!
Do bear in mind that - to the most part - 'high density' screens (rather than just high-resolution) report themselves as their non-HD resolution for the purpose of media queries.
For example: the Retina Apple iPads have an actual screen-resolution of 2,048 by 1,536, but still reports as 1,024 by 768px. Thus, the same screen-width/height media queries will capture the iPad 4 (retina) as the iPad 2 and - apart from being a little more blurry in the case of the older iPad - will look the same.
You can combine the media query I've included above with width/height to get a much more granular target on specifically-HD devices if you wish.
One very important exception to this is high-density display devices running Windows 8 Mobile which has a known bug with correctly reporting the viewport.
I am looking to add some responsive web design to my site for iPad Portrait. I have my main css file (style.css) and then i have added the line below:
<link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" />
However when i try to set a div's background colour to red or something then resize the window i cannot see any change when it gets to the iPad Portrait size.
The stylesheet im linking to looks like:
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
.myTile{background:red;}
}
I have tried it with and without this and no difference when i resize.
What am I doing wrong?
Any help would be great, I am just picking up responsive design.
Thanks
I would use:
#media screen and (max-width: 768px) {
/*styles*/
}
I also use max-width. What's the difference between max-width vs max-device-width? The difference, max-device-width only affects those devices that have a max width of XYZpx, so re-sizing a browser window on your desktop would yield no styling changes in relation to that particular media query. max-width, will yield styling changes on any device/browser that fits the media query. So re-sizing your your desktop browser and having the media query use max-width, you'd see the website as someone using an iPad would.
this is a great reference: Responsive Web Design