{"id":624,"date":"2016-02-25T13:37:57","date_gmt":"2016-02-25T13:37:57","guid":{"rendered":"http:\/\/www.infinitee-designs.com\/webdesign\/blog\/optimizing-drupal-websites-all-mobile-devices\/"},"modified":"2022-01-24T18:44:32","modified_gmt":"2022-01-24T18:44:32","slug":"optimizing-drupal-websites-all-mobile-devices","status":"publish","type":"blog","link":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/optimizing-drupal-websites-all-mobile-devices\/","title":{"rendered":"Optimizing Drupal websites for all mobile devices"},"content":{"rendered":"<div>\n<h2>Drupal Mobile Devices &amp; CSS Tutorial Concept:<\/h2>\n<p><img decoding=\"async\" class=\"wp-image-293 size-medium alignleft\" src=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/mobile-devices-300x162.jpg\" alt=\"Web Design Tutorials Optimizing Drupal Websites for Mobile Devices &amp;amp; iPhones with CSS\" width=\"300\" height=\"162\" srcset=\"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/mobile-devices-300x162.jpg 300w, https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/mobile-devices.jpg 640w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Optimizing Drupal websites for all mobile devices, iPhones and iPads with CSS. This includes all iPhones 4 through iPhone 6 Plus in both landscape and portrait views tutorial. It is best implemented on Drupal themes that are not 100% mobile device 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<p>&nbsp;<\/p>\n<div class=\"iwd-blockcontent\">\n<p class=\"blub16\">Optimizing Drupal websites for mobile devices &#8211; Work flow:<\/p>\n<ol>\n<li>Creating a mobile.css file and assets directory.<\/li>\n<li>Linking the mobile.css file to your html.tpl.php 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<\/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-624","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>Optimizing Drupal websites for all mobile devices - INFINITEE WEB DESIGN<\/title>\n<meta name=\"description\" content=\"optimizing Drupal websites for all mobile devices, iPhones and iPads with CSS. This includes all iPhones 4 through iPhone 6 Plus.\" \/>\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\/optimizing-drupal-websites-all-mobile-devices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimizing Drupal websites for all mobile devices - INFINITEE WEB DESIGN\" \/>\n<meta property=\"og:description\" content=\"optimizing Drupal websites for all mobile devices, iPhones and iPads with CSS. This includes all iPhones 4 through iPhone 6 Plus.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.infinitee-designs.com\/webdesign\/news\/optimizing-drupal-websites-all-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:44:32+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\\\/optimizing-drupal-websites-all-mobile-devices\\\/\",\"url\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/news\\\/optimizing-drupal-websites-all-mobile-devices\\\/\",\"name\":\"Optimizing Drupal websites for all mobile devices - INFINITEE WEB DESIGN\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/news\\\/optimizing-drupal-websites-all-mobile-devices\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/news\\\/optimizing-drupal-websites-all-mobile-devices\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/wp-content\\\/uploads\\\/2010\\\/01\\\/mobile-devices.jpg\",\"datePublished\":\"2016-02-25T13:37:57+00:00\",\"dateModified\":\"2022-01-24T18:44:32+00:00\",\"description\":\"optimizing Drupal websites for all mobile devices, iPhones and iPads with CSS. This includes all iPhones 4 through iPhone 6 Plus.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/news\\\/optimizing-drupal-websites-all-mobile-devices\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/news\\\/optimizing-drupal-websites-all-mobile-devices\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/news\\\/optimizing-drupal-websites-all-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\\\/optimizing-drupal-websites-all-mobile-devices\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog entries\",\"item\":\"https:\\\/\\\/www.infinitee-designs.com\\\/webdesign\\\/news\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimizing Drupal websites for all 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":"Optimizing Drupal websites for all mobile devices - INFINITEE WEB DESIGN","description":"optimizing Drupal websites for all mobile devices, iPhones and iPads with CSS. This includes all iPhones 4 through iPhone 6 Plus.","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\/optimizing-drupal-websites-all-mobile-devices\/","og_locale":"en_US","og_type":"article","og_title":"Optimizing Drupal websites for all mobile devices - INFINITEE WEB DESIGN","og_description":"optimizing Drupal websites for all mobile devices, iPhones and iPads with CSS. This includes all iPhones 4 through iPhone 6 Plus.","og_url":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/optimizing-drupal-websites-all-mobile-devices\/","og_site_name":"INFINITEE WEB DESIGN","article_publisher":"https:\/\/www.facebook.com\/infinitee.web.designs","article_modified_time":"2022-01-24T18:44:32+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\/optimizing-drupal-websites-all-mobile-devices\/","url":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/optimizing-drupal-websites-all-mobile-devices\/","name":"Optimizing Drupal websites for all mobile devices - INFINITEE WEB DESIGN","isPartOf":{"@id":"https:\/\/www.infinitee-designs.com\/webdesign\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/optimizing-drupal-websites-all-mobile-devices\/#primaryimage"},"image":{"@id":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/optimizing-drupal-websites-all-mobile-devices\/#primaryimage"},"thumbnailUrl":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-content\/uploads\/2010\/01\/mobile-devices.jpg","datePublished":"2016-02-25T13:37:57+00:00","dateModified":"2022-01-24T18:44:32+00:00","description":"optimizing Drupal websites for all mobile devices, iPhones and iPads with CSS. This includes all iPhones 4 through iPhone 6 Plus.","breadcrumb":{"@id":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/optimizing-drupal-websites-all-mobile-devices\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.infinitee-designs.com\/webdesign\/news\/optimizing-drupal-websites-all-mobile-devices\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/optimizing-drupal-websites-all-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\/optimizing-drupal-websites-all-mobile-devices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog entries","item":"https:\/\/www.infinitee-designs.com\/webdesign\/news\/"},{"@type":"ListItem","position":2,"name":"Optimizing Drupal websites for all 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\/624","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=624"}],"wp:term":[{"taxonomy":"vocabulary_1","embeddable":true,"href":"https:\/\/www.infinitee-designs.com\/webdesign\/wp-json\/wp\/v2\/vocabulary_1?post=624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}