Angular 2 web app using fluid layout not responding to more than one screen sizes - responsive-design

Here, I am creating a new web application using Angular 2 framework. I am new to this design. I had used two screen breakpoints i.e 600 and 960.
This is my code,
#media screen and (max-width: 600px) {
mat-card{
width:50%;
height:60%;
margin:9% 9% 9% 19%;
font-size:8px;
}
.fullwidth{
width:50%;
height:50%;
font-size:11px;
padding:10px;
}
mat-card-title{
font-size:13px;
font-weight:bold;
}
mat-card-subtitle{
font-size:11px;
}
}
#media screen and (max-width: 960px) {
mat-card{
width:50%;
height:60%;
margin:9% 9% 9% 19%;
font-size:8px;
}
.fullwidth{
width:90%;
height:50%;
font-size:11px;
padding:10px;
}
mat-card-title{
font-size:13px;
font-weight:bold;
}
mat-card-subtitle{
font-size:11px;
}
}
But in actual browser only media query for 960 is getting applied on 'fullwidth' class.
How can I apply media query to 600px size?
Also how many screen sizes needs to be queried for proper responsive design?

see if this helps you: https://codepen.io/panchroma/pen/pLaJZy
Remember that all CSS rules that are applicable will be applied to an element, and CSS rules cascade. With your original CSS, if the viewport was say 500px, your two media queries would be true, so the last one would be the styling that would be applied.
Instead of your original
#media screen and (max-width: 600px) {
...
}
#media screen and (max-width: 960px) {
...
}
Consider something like the following
#media screen and (max-width: 600px) {
...
}
#media screen and (min-width:601px) and (max-width: 960px) {
...
}
With the above CSS, if the viewport is 500px the first media query will apply, if the viewport is 700px the second media query will apply.
Hope this helps!

Related

Not able to solve the media query issue (responsive design)

I tried the following code for making my page responsive, but still the elements are moving out. Can anyone lease have a look at it and help me out?
#media only screen and (max-width: 500px) {
.top-bar-section ul {
margin-top: 15px;
}
}
#media only screen and (min-width: 300px) and (max-width: 500px) {
.widget-area {
display: none;
}
.stat {
margin-bottom: 30px;
}
.clients-style-2 .slides li .client-logo {
margin-bottom: 5px;
}
#clients .slides li .client-logo {
margin-bottom: 5px;
}
#icategories li {
margin-bottom: 10px;
}
}
Ref url: http://7drives.in/dsq/index.html
You have a YouTube video in an iframe, and that iframe has a hard coded width of 500px, so this will be a problem on narrower viewports.
CSS Tricks has one solution to this, jQuery below. There are other solutions for responsive iframes, I like that this is a simple drop fix which doesn't require any changes to your HTML, and also that it resizes both the width and the height of your video.
Hope this helps!
// By Chris Coyier & tweaked by Mathias Bynens
$(function() {
// Find all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
// (You'll probably want to debounce this)
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
});

Media query help, are these the right ones am using?

On the current RWD website am building, the media query used for mobile(iphone)/tab(ipad)/laptop screens(1366X768 px) are:
/* #Mobile (Portrait) 320px
----------------------------------------------------------------------*/
#media only screen and (min-width: 100px) and (max-width: 479px)
/* #Mobile (Landscape)
----------------------------------------------------------------------*/
#media only screen and (min-width: 480px) and (max-width: 767px)
/* #Tablet (Portrait)
----------------------------------------------------------------------*/
#media only screen and (min-width: 768px) and (max-width: 959px)
/* #Tablet (Landscape)
----------------------------------------------------------------------*/
#media all and (min-width: 1400px) and (max-width: 1920px)
/* Smaller than standard 960 (devices and browsers) and larger devices */
#media only screen and (min-width: 959px) and (max-width: 1177px)
/* Desktops and laptops (laptop browser version styles) ----------- */
#media only screen and (min-width : 1224px) and (max-width: 1366px)
Are these the right ones am using?
yes , also include these for a perfect RWD
// Little larger screen
#media only screen and (min-width: 480px) {
}
// Pads and larger phones
#media only screen and (min-width: 600px) {
}
// Larger pads
#media only screen and (min-width: 768px) {
}
// Horizontal pads and laptops
#media only screen and (min-width: 992px) {
}
// Really large screens
#media only screen and (min-width: 1382px) {
}
// 2X size (iPhone 4 etc)
#media only screen and
(-webkit-min-device-pixel-ratio: 1.5), only screen and
(-o-min-device-pixel-ratio: 3/2), only screen and
(min-device-pixel-ratio: 1.5) {
}
If you use Sass, here's a little trick I've been using:
$laptop-size: "only screen and (min-width: 768px)";
$desktop-size: "only screen and (min-width: 1382px)";
// etc
And then
#media #{$laptop-size} {
// Styling here...
}

Responsive template alignment

I am developing a website by downloading some template from net.
I modified some width and height according to our requirement the output is fine in PC but when I check it in mobile the contents are overflowing against background.
Please help me with some solution to solve this problem.
Thanks in advance.
You need to consider below dimensions then you have to write accordingly in every media screen using #media queries.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

How JQGrid loads icons from single file

When I searched for the icons used by JQGrid, I found single PNG file with all the icons. I am wondering how it can use portion of the image as icon for buttons used in JQGrid.
jqGrid uses icons from jQuery UI Theme. Usage of multiple icons (pictures) in one PNG file is the standard optimization. If one separate icons in multiple files then loading of enery separate file follow long time because of round trip times. Even is multiple files will be loaded parallel (multiple parallel HTTP request) loading of one file is more effectively.
So it you examine jquery-ui.css of jQuery UI (for example here) you will find the following
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
width: 16px;
height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
background-image: url(images/ui-icons_469bdd_256x240.png);
}
.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_d8e7f3_256x240.png);
}
.ui-state-default .ui-icon {
background-image: url(images/ui-icons_6da8d5_256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
background-image: url(images/ui-icons_217bc0_256x240.png);
}
.ui-state-active .ui-icon {
background-image: url(images/ui-icons_f9bd01_256x240.png);
}
.ui-state-highlight .ui-icon {
background-image: url(images/ui-icons_2e83ff_256x240.png);
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
background-image: url(images/ui-icons_cd0a0a_256x240.png);
}
/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
...
Every row of the body of the grid have the class "ui-widget-content". So the icons will be from the image with the relative URL images/ui-icons_469bdd_256x240.png (see CSS rule for .ui-widget-content .ui-icon):
On the other side the pager have the class "ui-state-default". So the icons will be from the image with the relative URL images/ui-icons_6da8d5_256x240.png (see CSS rule for .ui-state-default .ui-icon) and so on.
So all icons will be loaded from one file. All icon have the same height and the width 16px, but different icons have different background-position. So different 16x16 px parts of the index will be used.
The optimization method have the name Image Sprites. You can read about it here. There are some server solution which allows to combine many images (PNG and GIF images, but not JPG) referenced from a CSS file into a single large image on the fly on the server (see here). There are also places in Internet (like here) which allows you to upload multiple files and to get one combined image. In any way the solution is very old already and it will be intensively used by web developers.

Masonry: remove gutter from last column

Been working with the new version of Masonry which seems to work much smoother, especially for the fluid/responsive build I am doing.
One issue I have encountered, however - I am not sure how to remove the gutter on the far right of the .masonry container so that items are flush with the edge.
Here is the codepen example: http://codepen.io/iamkeir/pen/xlcBj
I could potentially set a width and overflow:hidden to crop off that last gap, but not ideal.
Equally, I tried adding a padding-left: 1% but this changes the width of the container so the percentages are no longer accurate.
Any ideas/tips would be greatly appreciated!
#desandro kindly tweeted the solution - the issue was with my % calculations which should have been:
(container width - (columns * column width)) / number of gutters = gutter width
So, in my example: (100% - (4 * 24%)) / 3) = 1.33333333333333%
http://codepen.io/desandro/pen/ybluC
I was able to do this with calc(). Using 0 margin, 0 padding, a 20px gutter and a 1200px grid, here's a design for 1, 2, 3 and 4 columns that are flush left and right. Calc -10px would wrap, so I had to use -11px in my calculation:
#grid .item {
float: left;
padding: 0;
width: 100%;
margin: 0;
}
#media only screen and (min-width: 500px) {
#grid .item {
width: calc(50% - 11px);
}
}
#media only screen and (min-width: 800px) {
#grid .item {
width: calc(33% - 11px);
}
}
#media only screen and (min-width: 1200px) {
#grid .item {
width: 285px;
}
}
You can try wookmark or packery to remove the right gutter.

Resources