{"id":2755,"date":"2013-06-04T16:50:52","date_gmt":"2013-06-04T16:50:52","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2013\/06\/04\/links-stylesheets-responsive-templates\/"},"modified":"2023-12-04T11:15:33","modified_gmt":"2023-12-04T16:15:33","slug":"links-stylesheets-responsive-templates","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/","title":{"rendered":"Links to the stylesheets in Responsive Templates"},"content":{"rendered":"

Continuing our tutorial on how to create a Responsive Template, we are moving to step 3 of the process where we add the CSS links to the stylesheets on the head section. The previous tutorial explained what you need to create for the CSS stylesheets. This tutorial will explain how to link your stylesheets to your HTML document.<\/p>\n\n\n

\r\n

Launch your web presence quickly and easily with Shared Hosting<\/a>. Our user-friendly hosting is perfect for everyone, providing the fastest shared hosting experience possible, all powered by cPanel.<\/p>\r\n

\"checkFree Domain & SSL Certificates \"checkUnlimited Bandwidth \"check400+ One-Click Applications \"checkUSA & European Data Centers<\/p>\r\n

Shared Hosting Plans<\/a><\/p>\r\n<\/div>\n\n\n\n

Link for the Main Stylesheet<\/h2>\n\n\n\n

To get the general styles to work on your website, you will need to link to the file. Below is the code for the link to the style.css<\/em> file.<\/p>\n\n\n\n

<\/path><\/path><\/svg><\/span>
<<\/span>link<\/span> <\/span>rel<\/span>=<\/span>\"stylesheet\"<\/span> <\/span>href<\/span>=<\/span>\"style.css\"<\/span> \/><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/div>\n\n\n\n
Using CSS Media Attribute<\/h2>\n\n\n\n
Link for the Desktop Styles<\/h3>\n\n\n\n
The first style sheet will need to load when the browser size is the typical Desktop computer monitor size. Lately, wide screen monitors are popular, so we will have the large styles load when the browser is larger than 1440 pixels<\/em>. Below is the link to the desktop-style.css<\/em> stylesheet from the previous tutorial. You place the code in the head section of your site.<\/p>\n\n\n\n
<\/path><\/path><\/svg><\/span>
<<\/span>link<\/span> <\/span>rel<\/span>=<\/span>\"stylesheet\"<\/span> <\/span>media<\/span>=<\/span>\"screen and (min-device-width: 1440px)\"<\/span> <\/span>href<\/span>=<\/span>\"desktop-style.css\"<\/span> \/><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
The min-device-width<\/em> is set to 1440px to make the desktop-style.css<\/em> sheet load when the browser size is at 1440 pixels.<\/p>\n\n\n\n
Link for the Tablet Styles<\/h3>\n\n\n\n
When the browser window goes below 1440 pixels<\/em>, the medium stylesheet will load. The minimum width is 800 pixels<\/em> before it will switch to the mobile stylesheet. Below is the code that goes in the head section for your medium-style.css<\/em> stylesheet for tablets and smaller screens.<\/p>\n\n\n\n
<\/path><\/path><\/svg><\/span>
<<\/span>link<\/span> <\/span>rel<\/span>=<\/span>'stylesheet'<\/span> <\/span>media<\/span>=<\/span>'screen and (min-width: 800px) and (max-width: 1439px)'<\/span> <\/span>href<\/span>=<\/span>'medium-style.css'<\/span> \/><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Now when the browser goes from a minimum of 800 pixels to a maximum 1439 pixels, the medium-styles.css<\/em> sheet will load.<\/p>\n\n\n\n
Link for the Mobile Styles<\/h3>\n\n\n\n
The mobile style sheet will be set up to load when the width is a minimum width of 100 pixels<\/em> and a maximum width of 799 pixels<\/em>. This will make the website adjust to the mobile version when the width goes under 800 pixels. We will use the following link to the mobile-style.css<\/em> stylesheet.<\/p>\n\n\n\n
<\/path><\/path><\/svg><\/span>
<<\/span>link<\/span> <\/span>rel<\/span>=<\/span>'stylesheet'<\/span> <\/span>media<\/span>=<\/span>'screen and (min-width: 100px) and (max-width: 799px)'<\/span> <\/span>href<\/span>=<\/span>'mobile-style.css'<\/span> \/><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
This code will load the mobile-styles.css<\/em> sheet when the browser is below 799 pixels. The style sheet will stop shrinking at 100 pixels.<\/p>\n\n\n\n
CSS Media Attributes explained<\/h2>\n\n\n\n
Below is a brief explanation of what each attribute does.<\/p>\n\n\n\n
CSS Attribute<\/th>What the Attribute Does<\/th><\/tr><\/thead>
width<\/td>The width of the browser window area.<\/td><\/tr>
height<\/td>The height of the browser window area.<\/td><\/tr>
min-width<\/td>The minimum width of the browser window area.<\/td><\/tr>
max-width<\/td>The maximum-width of the browser window area.<\/td><\/tr>
device-width<\/td>The width of the device\u2019s entire display area regardless of browser window width.<\/td><\/tr>
min-device-width<\/td>The minimum width of the device\u2019s entire display area regardless of browser window width.<\/td><\/tr>
max-device-width<\/td>The maximum width of the device\u2019s entire display area regardless of browser window width.<\/td><\/tr>
device-height<\/td>The height of the device\u2019s entire display area regardless of browser window height.<\/td><\/tr>
orientation<\/td>The orientation of the device whether \u201clandscape<\/em>\u201d or \u201cportrait<\/em>\u201c.<\/td><\/tr>
aspect-ratio<\/td>Detects the aspect ratio of the \u201cbrowser width<\/em>\u201d to \u201cbrowser height<\/em>\u201d of the media. Example 2\/1<\/td><\/tr>
device-aspect-ratio<\/td>Detects the ratio of value of the \u201cdevice width<\/em>\u201cto \u201cdevice height<\/em>\u201d media.<\/td><\/tr>
color<\/td>Number of bits per color component of the device.<\/td><\/tr>
color-index<\/td>Number of entries in the color lookup table of the output device.<\/td><\/tr>
monochrome<\/td>Number of bits per pixel in a monochrome frame buffer.<\/td><\/tr>
resolution<\/td>The \u201cdpi<\/em>\u201d or \u201cdpcm<\/em>\u201d resolution on the device.<\/td><\/tr>
scan<\/td>The scanning process of a \u201ctv<\/em>\u201c.<\/td><\/tr>
grid<\/td>Detects whether the device is grid or bitmap.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
The entire code for the head section<\/h2>\n\n\n\n
\"ResponsiveTemplate<\/a><\/figure>\n\n\n\n
Once you understand how the stylesheets will load, you can add the code to your website. The below code is the entire head section you will need at the top of your HTML code. The links to the stylesheets are in red. Copy the following code and place it at the top of your HTML code<\/a>.<\/p>\n\n\n\n
<\/path><\/path><\/svg><\/span>
<<\/span>html<\/span> <\/span>xmlns<\/span>=<\/span>\"https:\/\/www.w3.org\/1999\/xhtml\"<\/span>>  <\/span><\/span>\n<<\/span>head<\/span>>  <\/span><\/span>\n<<\/span>meta<\/span> <\/span>http-equiv<\/span>=<\/span>\"Content-Type\"<\/span> <\/span>content<\/span>=<\/span>\"text\/html; charset=utf-8\"<\/span> \/><\/span><\/span>\n<<\/span>title<\/span>>Your Website Title<\/<\/span>title<\/span>><\/span><\/span>\n<<\/span>link<\/span> <\/span>rel<\/span>=<\/span>\"stylesheet\"<\/span> <\/span>href<\/span>=<\/span>\"style.css\"<\/span> \/><\/span><\/span>\n<<\/span>link<\/span> <\/span>rel<\/span>=<\/span>\"stylesheet\"<\/span> <\/span>media<\/span>=<\/span>\"screen and (min-device-width: 1440px)\"<\/span> <\/span>href<\/span>=<\/span>\"style.css\"<\/span> \/><\/span><\/span>\n<<\/span>link<\/span> <\/span>rel<\/span>=<\/span>'stylesheet'<\/span> <\/span>media<\/span>=<\/span>'screen and (min-width: 800px) and (max-width: 1440px)'<\/span> <\/span>href<\/span>=<\/span>'medium-style.css'<\/span> \/><\/span><\/span>\n<<\/span>link<\/span> <\/span>rel<\/span>=<\/span>'stylesheet'<\/span> <\/span>media<\/span>=<\/span>'screen and (min-width: 100px) and (max-width: 799px)'<\/span> <\/span>href<\/span>=<\/span>'mobile-style.css'<\/span> \/><\/span><\/span>\n<\/<\/span>head<\/span>> <\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Continuing our tutorial on how to create a Responsive Template, we are moving to step 3 of the process where we add the CSS links to the stylesheets on the head section. The previous tutorial explained what you need to create for the CSS stylesheets. This tutorial will explain how to link your stylesheets to Read More ><\/a><\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4346],"tags":[],"class_list":["post-2755","post","type-post","status-publish","format-standard","hentry","category-website-design"],"acf":[],"yoast_head":"\nLinks to the stylesheets in Responsive Templates<\/title>\n<meta name=\"description\" content=\"This article will explain how to use the CSS media attributes for lining your Responsive Template stylesheets.\" \/>\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.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Links to the stylesheets in Responsive Templates\" \/>\n<meta property=\"og:description\" content=\"This article will explain how to use the CSS media attributes for lining your Responsive Template stylesheets.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-06-04T16:50:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-04T16:15:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_website-responsive-template-head_view-with-styles.png\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41\"},\"headline\":\"Links to the stylesheets in Responsive Templates\",\"datePublished\":\"2013-06-04T16:50:52+00:00\",\"dateModified\":\"2023-12-04T16:15:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/\"},\"wordCount\":651,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_website-responsive-template-head_view-with-styles.png\",\"articleSection\":[\"Website Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/\",\"name\":\"Links to the stylesheets in Responsive Templates\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_website-responsive-template-head_view-with-styles.png\",\"datePublished\":\"2013-06-04T16:50:52+00:00\",\"dateModified\":\"2023-12-04T16:15:33+00:00\",\"description\":\"This article will explain how to use the CSS media attributes for lining your Responsive Template stylesheets.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_website-responsive-template-head_view-with-styles.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_website-responsive-template-head_view-with-styles.png\",\"width\":829,\"height\":830,\"caption\":\"Click here to view the larger image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Links to the stylesheets in Responsive Templates\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41\",\"name\":\"InMotion Hosting Contributor\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/jamesr\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Links to the stylesheets in Responsive Templates","description":"This article will explain how to use the CSS media attributes for lining your Responsive Template stylesheets.","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.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/","og_locale":"en_US","og_type":"article","og_title":"Links to the stylesheets in Responsive Templates","og_description":"This article will explain how to use the CSS media attributes for lining your Responsive Template stylesheets.","og_url":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2013-06-04T16:50:52+00:00","article_modified_time":"2023-12-04T16:15:33+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_website-responsive-template-head_view-with-styles.png","type":"","width":"","height":""}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41"},"headline":"Links to the stylesheets in Responsive Templates","datePublished":"2013-06-04T16:50:52+00:00","dateModified":"2023-12-04T16:15:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/"},"wordCount":651,"commentCount":4,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_website-responsive-template-head_view-with-styles.png","articleSection":["Website Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/","url":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/","name":"Links to the stylesheets in Responsive Templates","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_website-responsive-template-head_view-with-styles.png","datePublished":"2013-06-04T16:50:52+00:00","dateModified":"2023-12-04T16:15:33+00:00","description":"This article will explain how to use the CSS media attributes for lining your Responsive Template stylesheets.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_website-responsive-template-head_view-with-styles.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_website-responsive-template-head_view-with-styles.png","width":829,"height":830,"caption":"Click here to view the larger image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/links-stylesheets-responsive-templates\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Links to the stylesheets in Responsive Templates"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41","name":"InMotion Hosting Contributor","url":"https:\/\/www.inmotionhosting.com\/support\/author\/jamesr\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":{"id":4346,"name":"Website Design","slug":"website-design","link":"https:\/\/www.inmotionhosting.com\/support\/website\/website-design\/"},"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2755","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=2755"}],"version-history":[{"count":5,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2755\/revisions"}],"predecessor-version":[{"id":108201,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2755\/revisions\/108201"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=2755"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=2755"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=2755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Now that you have the code for the stylesheets and the HTML you will need to add the Viewpoint META tag for the mobile devices<\/a> to accept the styles.<\/p>\n","protected":false},"excerpt":{"rendered":"