Skip to main content

Responsive CSS Breakpopints

/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

  //CSS

}

/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

  //CSS

}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

  //CSS

}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

  //CSS

}

/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

  //CSS

}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
 
  //CSS
 
}
Labels:

Comments

Post a Comment

Popular posts from this blog

Add JS to the bottom of the page in Drupal 7

How to add JS at bottom of a particular page in Drupal 7 Step 1: Get the page id. In case of front page "is_front"  Step 2: In template.php file of your theme add the below code : function illume_preprocess_page(&$variables) { if ($variables['is_front']) { drupal_add_js(path_to_theme().'/js/util.js', array('type' => 'file', 'scope' => 'footer')); drupal_add_js(path_to_theme().'/js/main.js', array('type' => 'file', 'scope' => 'footer')); drupal_add_js(path_to_theme().'/js/slideimage.js', array('type' => 'file', 'scope' => 'footer')); $variables['bottom_scripts'] = drupal_get_js(); } } This way you can add JS file using drupal_add_js() and define scope as footer. Step 3: Now you can use bottom_script variable to the page tpl file where you want to add JS print $bottom_scripts;
Post a Comment
Read more

Main menu dropdown parent item clickable in Drupal 8 using Bootstrap 4

 Edit menu--main.html.twig template file {# /**  * @file  * Bootstrap Barrio's override to display a menu.  *  * Available variables:  * - menu_name: The machine name of the menu.  * - items: A nested list of menu items. Each menu item contains:  *   - attributes: HTML attributes for the menu item.  *   - below: The menu item child items.  *   - title: The menu link title.  *   - url: The menu link url, instance of \Drupal\Core\Url  *   - localized_options: Menu link localized options.  *   - is_expanded: TRUE if the link has visible children within the current  *     menu tree.  *   - is_collapsed: TRUE if the link has children within the current menu tree  *     that are not currently visible.  *   - in_active_trail: TRUE if the link is in the active trail.  */ #} {% import _self as menus...
1 comment
Read more

Use Case Diagram for Online Book Store

1 comment
Read more