Posts

Showing posts from April, 2019

Make any web page responsive using css

1.Put the code in <head> </head> tag ---------------------------------------------------------------- < meta name = "viewport" content = "width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" > < meta http - equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" > < meta name = "HandheldFriendly" content = "true" > ------------------------------------------------------------------- 2.Put it inside <style> </style> ------------------------------------------------------------------ /* Tablet Landscape */ @media screen and ( max - width : 1060 px ) { #primary { width : 67 % ; } #secondary { width : 30 % ; margin - left : 3 % ;} } /* Tabled Portrait */ @media screen and ( max - width : 768 px ) { #primary { width : 100 % ; } #secondary { width : 100 % ; ...

Make any web page responsive using css

1.DEsign a responsive layout...................... --------------------------------------------------------------------------- Fixed  the default size. For example, set the default width is 1100px. When we pleased with the non-responsive version, we will add media queries and slight changes to the code to make the code responsive. It’s way easier to focus on one task at a time. Then paste the following lines inside <head> and </head> tag. < meta name = "viewport" content = "width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" > < meta http - equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" > < meta name = "HandheldFriendly" content = "true" > A  media query consists of a media type and zero or more expressions that check for the conditions of particular media features.  By using media queries, presentations can be tailored to a spe...