Responsive View<\/h2>\n\n\n\n
This feature allows you to see how your website will look at a variety of widths and on different devices.<\/p>\n\n\n\n
To find this feature, right-click anywhere on your website, and near the bottom, there will be an option called Inspect. You can also reach this by using the keyboard shortcut Ctrl+Shift+I.<\/p>\n\n\n\n Once inside the inspector, the left side will be the view of your website and the right side will be different elements of your website. To learn more about the left side of this page, look at the blog post here<\/strong>.<\/p>\n\n\n\n If your screen does not look like the one below, on the top far right next to the small x of the inspector, you can select the three dots and change where the dock (the right side of my screen) is located.<\/p>\n\n\n\n If the device toolbar does not automatically appear, click the device button on the upper right-hand corner (circled below). The keyboard shortcut to show the toolbar, it is Ctrl+Shift+M. This toolbar is what allows you to set the size of the screen to see what it will look like on a specified size screen.<\/p>\n\n\n\n With the toolbar set to the responsive setting, you can manually resize the web page by dragging the bar on the right side of the webpage as seen below.<\/p>\n\n\n\n On the top device toolbar, you can select a predetermined screen size based on common phones or the responsive option which lets you resize manually.<\/p>\n\n\n\n Below are a few examples of what my website looks like on different devices. Click on an image to enlarge it<\/p>\n\n\n\n Another feature of the inspector can be found by clicking the three dots on the device toolbar (closer to the middle of the screen). Two options in this menu are “Capture screenshot” and “Capture full size screenshot”. These options download a picture of your website.<\/p>\n\n\n\n For example, this is what these options look like on my site.<\/p>\n\n\n\n There are features in Google Chrome that can be very helpful while designing your domain, but they may be unknown for many. Responsive View This feature allows you to see how your website will look at a variety of widths and on different devices. To find this feature, right-click anywhere on your website, and near the bottom, there will be an option called Inspect. You can also reach this by using the keyboard shortcut Ctrl+Shift+I. Once inside the inspector, the left side will be the…<\/span>Continue Reading “Device Toolbar in Google Chrome”<\/span> ![\"\"](\"https:\/\/techbar.knight.domains\/wp-content\/uploads\/2020\/06\/inspector1-1024x549.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/techbar.knight.domains\/wp-content\/uploads\/2020\/06\/inspector2-1024x549.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/techbar.knight.domains\/wp-content\/uploads\/2020\/06\/inspector-new1-1-1024x550.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/techbar.knight.domains\/wp-content\/uploads\/2020\/06\/inspector4-new-1024x550.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/techbar.knight.domains\/wp-content\/uploads\/2020\/06\/15-June-2020-Loom-Recording.gif\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/techbar.knight.domains\/wp-content\/uploads\/2020\/06\/inspector5-1024x552.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/techbar.knight.domains\/wp-content\/uploads\/2020\/06\/inspector6-iphoneX.png\")
<\/a><\/a><\/a>Capture Screenshots<\/h2>\n\n\n\n
<\/figure>\n\n\n\n