{"id":635,"date":"2017-09-20T18:59:29","date_gmt":"2017-09-20T18:59:29","guid":{"rendered":"http:\/\/www.infinitee-designs.com\/webdesign\/blog\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\/"},"modified":"2022-01-24T18:29:04","modified_gmt":"2022-01-24T18:29:04","slug":"revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices","status":"publish","type":"blog","link":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\/","title":{"rendered":"Revised Tutorial Drupal 7 Adding Custom CSS for iPhone &#038; Mobile Devices"},"content":{"rendered":"<div>\n<h2>Drupal 7 Adding Custom CSS for iPhones &amp; Mobile Devices Tutorial &#8211; Revised<\/h2>\n<\/div>\n<p>&nbsp;<\/p>\n<div>\n<p><a class=\"colorbox-load\" title=\"Revised Tutorial Drupal 7 Adding Custom CSS for Mobile Devices\" href=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/mobile-devices.jpg\" rel=\"slide\"><img decoding=\"async\" class=\"size-full wp-image-623 alignleft\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2016\/02\/mobile-devices-300.jpg\" alt=\"Revised Tutorial Drupal 7 Adding Custom CSS for iPhone &amp; Mobile Devices\" width=\"300\" height=\"162\"><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Drupal tutorial on adding custom CSS files for mobile devices the Drupal way. Targeting iPhones, iPads and Galaxy phones with media queries and CSS for iPhones 4 through iPhone 6 Plus in both landscape and portrait views. It is best implemented on Drupal themes that are not 100% mobile friendly and or, you have created custom themes, regions within your theme or, added custom blocks that to not quite display as you would like them to on all mobile devices and in both portrait and landscape modes.<\/p>\n<p>&nbsp;<\/p>\n<div class=\"iwd-blockcontent\">\n<p class=\"blub16\">Work flow:<\/p>\n<ol>\n<li>Creating a mobile.css file and CSS directory.<\/li>\n<li>Linking the mobile.css file to your themes .info file.<\/li>\n<li>Creating an ipad.css file.<\/li>\n<li>Linking the ipad.css file to your themes .info file.<\/li>\n<li>Editing CSS off site and saving edits to your production site.<\/li>\n<\/ol>\n<\/div>\n<p>&nbsp;<\/p>\n<p><a class=\"right\" href=\"https:\/\/www.infinitee-designs.com\/webdesign\/optimizing-drupal-mobile-devices-css\"><strong>Go to tutorial &gt;<\/strong><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<\/div>\n","protected":false},"author":1,"featured_media":293,"template":"","meta":{"_eb_attr":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ngg_post_thumbnail":0},"vocabulary_1":[],"class_list":["post-635","blog","type-blog","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Adding Custom CSS revised for iPhone &amp; Mobile Devices<\/title>\n<meta name=\"description\" content=\"Adding Custom CSS revised for iPhone &amp; Mobile Devices the Drupal way. Targeting iPhones, iPads and Galaxy phones with media queries\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.infinitee-designs.com\/webdesign\/news\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Custom CSS revised for iPhone &amp; Mobile Devices\" \/>\n<meta property=\"og:description\" content=\"Adding Custom CSS revised for iPhone &amp; Mobile Devices the Drupal way. Targeting iPhones, iPads and Galaxy phones with media queries\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.infinitee-designs.com\/webdesign\/news\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\/\" \/>\n<meta property=\"og:site_name\" content=\"INFINITEE WEB DESIGN\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/infinitee.web.designs\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-24T18:29:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/mobile-devices.jpg?fit=640%2C346&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"346\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Infinitee_Web\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/news\\\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\\\/\",\"url\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/news\\\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\\\/\",\"name\":\"Adding Custom CSS revised for iPhone & Mobile Devices\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/news\\\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/news\\\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/wp-content\\\/uploads\\\/2010\\\/01\\\/mobile-devices.jpg\",\"datePublished\":\"2017-09-20T18:59:29+00:00\",\"dateModified\":\"2022-01-24T18:29:04+00:00\",\"description\":\"Adding Custom CSS revised for iPhone & Mobile Devices the Drupal way. Targeting iPhones, iPads and Galaxy phones with media queries\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/news\\\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/news\\\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/news\\\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/wp-content\\\/uploads\\\/2010\\\/01\\\/mobile-devices.jpg\",\"contentUrl\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/wp-content\\\/uploads\\\/2010\\\/01\\\/mobile-devices.jpg\",\"width\":640,\"height\":346,\"caption\":\"Web Design Tutorials Optimizing Drupal Websites for Mobile Devices &amp; iPhones with CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/news\\\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog entries\",\"item\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/news\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Revised Tutorial Drupal 7 Adding Custom CSS for iPhone &#038; Mobile Devices\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/#website\",\"url\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/\",\"name\":\"INFINITEE WEB DESIGN\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/#organization\",\"name\":\"Infinitee Designs\",\"url\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.infinitee-designs.com\\\/webdesign\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/infinitee-web-design-logo.png?fit=430%2C150&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.infinitee-designs.com\\\/webdesign\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/infinitee-web-design-logo.png?fit=430%2C150&ssl=1\",\"width\":430,\"height\":150,\"caption\":\"Infinitee Designs\"},\"image\":{\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/infinitee.web.designs\",\"https:\\\/\\\/x.com\\\/Infinitee_Web\",\"https:\\\/\\\/www.instagram.com\\\/infiniteewebdesign\\\/\",\"http:\\\/\\\/www.linkedin.com\\\/in\\\/infinitee\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding Custom CSS revised for iPhone & Mobile Devices","description":"Adding Custom CSS revised for iPhone & Mobile Devices the Drupal way. Targeting iPhones, iPads and Galaxy phones with media queries","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\/","og_locale":"en_US","og_type":"article","og_title":"Adding Custom CSS revised for iPhone & Mobile Devices","og_description":"Adding Custom CSS revised for iPhone & Mobile Devices the Drupal way. Targeting iPhones, iPads and Galaxy phones with media queries","og_url":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\/","og_site_name":"INFINITEE WEB DESIGN","article_publisher":"https:\/\/www.facebook.com\/infinitee.web.designs","article_modified_time":"2022-01-24T18:29:04+00:00","og_image":[{"width":640,"height":346,"url":"https:\/\/i0.wp.com\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/mobile-devices.jpg?fit=640%2C346&ssl=1","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@Infinitee_Web","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\/","url":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\/","name":"Adding Custom CSS revised for iPhone & Mobile Devices","isPartOf":{"@id":"https:\/\/www.infinitee-designs.com\/webdesign\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\/#primaryimage"},"image":{"@id":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\/#primaryimage"},"thumbnailUrl":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/mobile-devices.jpg","datePublished":"2017-09-20T18:59:29+00:00","dateModified":"2022-01-24T18:29:04+00:00","description":"Adding Custom CSS revised for iPhone & Mobile Devices the Drupal way. Targeting iPhones, iPads and Galaxy phones with media queries","breadcrumb":{"@id":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.infinitee-designs.com\/webdesign\/news\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\/#primaryimage","url":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/mobile-devices.jpg","contentUrl":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/mobile-devices.jpg","width":640,"height":346,"caption":"Web Design Tutorials Optimizing Drupal Websites for Mobile Devices &amp; iPhones with CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/revised-tutorial-drupal-7-adding-custom-css-iphone-mobile-devices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog entries","item":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/"},{"@type":"ListItem","position":2,"name":"Revised Tutorial Drupal 7 Adding Custom CSS for iPhone &#038; Mobile Devices"}]},{"@type":"WebSite","@id":"https:\/\/www.infinitee-designs.com\/webdesign\/#website","url":"https:\/\/www.infinitee-designs.com\/webdesign\/","name":"INFINITEE WEB DESIGN","description":"","publisher":{"@id":"https:\/\/www.infinitee-designs.com\/webdesign\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.infinitee-designs.com\/webdesign\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.infinitee-designs.com\/webdesign\/#organization","name":"Infinitee Designs","url":"https:\/\/www.infinitee-designs.com\/webdesign\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.infinitee-designs.com\/webdesign\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2022\/01\/infinitee-web-design-logo.png?fit=430%2C150&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2022\/01\/infinitee-web-design-logo.png?fit=430%2C150&ssl=1","width":430,"height":150,"caption":"Infinitee Designs"},"image":{"@id":"https:\/\/www.infinitee-designs.com\/webdesign\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/infinitee.web.designs","https:\/\/x.com\/Infinitee_Web","https:\/\/www.instagram.com\/infiniteewebdesign\/","http:\/\/www.linkedin.com\/in\/infinitee"]}]}},"_links":{"self":[{"href":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-json\/wp\/v2\/blog\/635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-json\/wp\/v2\/media\/293"}],"wp:attachment":[{"href":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-json\/wp\/v2\/media?parent=635"}],"wp:term":[{"taxonomy":"vocabulary_1","embeddable":true,"href":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-json\/wp\/v2\/vocabulary_1?post=635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}