How to space out svgs in a list using css - css

I'm trying to space out the 'categories' along the black bar and put divider spacers in-between. The 'categories' are in a list. I was able to put them horizontally but am having trouble spacing them out. How would I go about doing this ? For visuals I mocked up the desired result in illustrator below.
Here is what I have so far:
HTML:
<div class="ride-stats">
<div class="ride-stats-content">
<ul>
<li>
<div class="ride-stats-col ride-stats-distance">
<span class="icon-distance">
<svg height= 10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 35.86">
<g id="prefix__Layer_2" data-name="Layer 2">
<g id="prefix__Layer_1-2" data-name="Layer 1">
<path class="prefix__cls-1"
d="M3.33 30a2.5 2.5 0 012.49-2.49h6.74a5.83 5.83 0 000-11.65h-.84v3.33h.84a2.5 2.5 0 010 5H5.82a5.82 5.82 0 000 11.64H25v-3.29H5.82A2.5 2.5 0 013.33 30zM6.73 0A6.73 6.73 0 000 6.73c0 5 6.73 12.5 6.73 12.5s6.73-7.45 6.73-12.5A6.73 6.73 0 006.73 0zm0 9.13a2.4 2.4 0 112.4-2.4 2.39 2.39 0 01-2.4 2.4zM30 16.64a6.73 6.73 0 00-6.73 6.73c0 5 6.73 12.49 6A6.72 6.72 0 0030 16.64zm0 9.13a2.41 2.41 0 112.4-2.4 2.41 2.41 0 01-2.4 2.4z" />
</g>
</g>
</svg>
</span>
<span class="ride-stats-label">Distance:</span>
<span> <h3>19.5</h3> <span>km</span></span>
</div>
</li>
<li>
<div class="ride-stats-col ride-stats-elevation">
<span class="icon-elevation">
<svg height= 10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 18.51">
<g data-name="Layer 2">
<path d="M36.75 18.52H0l6.32-9.26L12.63 0l6.32 9.26 1.53 2.24.19-.26 5.36-7.27 10.72 14.55z"
data-name="Layer 1" />
</g>
</svg>
</span>
<span class="ride-stats-label">Elevation:</span>
<span> <h3>120</h3>
<span>m</span>
</span>
</div>
</li>
<li>
<div class="ride-stats-col ride-stats-difficulty">
<span class="icon-difficulty">
<svg height=10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 35.87">
<g id="prefix__Layer_2" data-name="Layer 2">
<g id="prefix__Layer_1-2" data-name="Layer 1">
<path class="prefix__cls-1"
d="M27.83 0h8.92v35.86h-8.92zM0 23.91h8.92v11.95H0zM13.92 11.97h8.92v23.9h-8.92z" />
</g>
</g>
</svg>
</span>
<span class="ride-stats-label">Difficulty:</span>
<span> <h3>Easy</h3></span>
</div>
</li>
</ul>
</div>
</div>
CSS:
.ride-stats {
color: white;
margin: 0;
position: relative;
}
.ride-stats svg{
fill: red;
}
.ride-stats h3 {
font-family: sans-serif;
display: inline-block;
font-size: 25px;
font-weight: 700;
margin-bottom: 0;
}
.ride-stats-content {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin: 0 auto 0 auto;
max-width: 1100px;
background: #282828;
padding: 20px 0 20px 0;
}
ul li{
display: inline-flex;
text-align: center;
margin: 0 0 0px 0;
}
* {
box-sizing: border-box;
}
ul li .ride-stats-col{
text-decoration: none;
display: flexbox;
}
.ride-stats-col {
position: relative;
text-align: center;
flex-grow: 1;
flex-basis: 0; padding: 15px 0;
}
.ride-stats .icon-distance, .ride-stats .icon-elevation, .ride-stats .icon-difficulty{
display: block;
min-height: 55px;
}


Your issue is that you are setting the display:flex in the incorrect class, you have to apply to the ul instead
Snippet - with a bit of CSS improved
* {
box-sizing: border-box;
margin: 0
}
.ride-stats {
color: white;
}
.ride-stats svg {
fill: red;
}
.ride-stats h3 {
font-family: sans-serif;
display: inline-block;
font-size: 25px;
font-weight: 700;
}
.ride-stats-content {
margin: 0 auto;
max-width: 1100px;
background: #282828;
}
.ride-stats-content ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px;
list-style: none;
}
[class^='icon-'] {
display: block;
min-height: 55px;
}
.ride-stats-label {
display: block
}
<div class="ride-stats">
<div class="ride-stats-content">
<ul>
<li>
<div class="ride-stats-col ride-stats-distance">
<span class="icon-distance">
<svg height= 10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 35.86">
<g id="prefix__Layer_2" data-name="Layer 2">
<g id="prefix__Layer_1-2" data-name="Layer 1">
<path class="prefix__cls-1"
d="M3.33 30a2.5 2.5 0 012.49-2.49h6.74a5.83 5.83 0 000-11.65h-.84v3.33h.84a2.5 2.5 0 010 5H5.82a5.82 5.82 0 000 11.64H25v-3.29H5.82A2.5 2.5 0 013.33 30zM6.73 0A6.73 6.73 0 000 6.73c0 5 6.73 12.5 6.73 12.5s6.73-7.45 6.73-12.5A6.73 6.73 0 006.73 0zm0 9.13a2.4 2.4 0 112.4-2.4 2.39 2.39 0 01-2.4 2.4zM30 16.64a6.73 6.73 0 00-6.73 6.73c0 5 6.73 12.49 6A6.72 6.72 0 0030 16.64zm0 9.13a2.41 2.41 0 112.4-2.4 2.41 2.41 0 01-2.4 2.4z" />
</g>
</g>
</svg>
</span>
<span class="ride-stats-label">Distance:</span>
<span> <h3>19.5</h3> <span>km</span></span>
</div>
</li>
<li>
<div class="ride-stats-col ride-stats-elevation">
<span class="icon-elevation">
<svg height= 10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 18.51">
<g data-name="Layer 2">
<path d="M36.75 18.52H0l6.32-9.26L12.63 0l6.32 9.26 1.53 2.24.19-.26 5.36-7.27 10.72 14.55z"
data-name="Layer 1" />
</g>
</svg>
</span>
<span class="ride-stats-label">Elevation:</span>
<span> <h3>120</h3>
<span>m</span>
</span>
</div>
</li>
<li>
<div class="ride-stats-col ride-stats-difficulty">
<span class="icon-difficulty">
<svg height=10mm width= 12mm xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.75 35.87">
<g id="prefix__Layer_2" data-name="Layer 2">
<g id="prefix__Layer_1-2" data-name="Layer 1">
<path class="prefix__cls-1"
d="M27.83 0h8.92v35.86h-8.92zM0 23.91h8.92v11.95H0zM13.92 11.97h8.92v23.9h-8.92z" />
</g>
</g>
</svg>
</span>
<span class="ride-stats-label">Difficulty:</span>
<span> <h3>Easy</h3></span>
</div>
</li>
</ul>
</div>
</div>

Related

Scale SVG to fill 90% of available space (while maintaining aspect ratio)

I have a <div id="Frame"> element, within it is a <svg> element. I would like the <svg> element to be centered in the frame, and grow at a aspect ratio of 1/1, until one edge uses up say 90% of the available space (so it almost fills the whole space, but has a bit of a border).
But I can't get the SVG to grow. I read the many other similar SO answers, some say CSS overrides the width/height attributes of the SVG, but I tried removing them just incase (not ideal), but it still did not grow). The other common soluation is width: 100%; height: auto;, which did not work for me.
main {
padding: 0; margin: 0;
width: 100vw;
height: 100vh;
}
#FRAME {
padding: 0; margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: lightyellow;
position:relative;
}
#FRAME svg {
max-width: 90%;
max-height: 90%;
width: 90%;
height: auto;
aspect-ratio: 1/1;
flex-grow: 1;
}
<main>
<div id="FRAME">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 5v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"></path>
</svg>
</div>
</main>

You'll need to add a viewBox to the SVG to determine the SVG viewport.
Whilst the width and height attributes help with keeping the aspect ratio, viewBox helps with scaling the SVG contents correctly.
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 5v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"></path>
</svg>

Safari ignores padding-right on inline-block element

I ran into a weird problem with Safari.
It seems to ignore the padding of a link when the span inside is inline-block.
Works in FF and Chrome but Safari just ignores the right padding.
I can add a padding to the span inside but then FF and Chrome have too much space on the right. The structure is generated by the speeddial component in primefaces so not easily changed.
Here's a Screenshot of the problem in Safari and Firefox for comparison.
Anyone ran into this problem before?
Thanks in advance!
ul{
width: 200px;
height: auto;
list-style: none;
}
li{
margin-bottom: 1em;
}
a{
display: inline-block;
background: red;
padding: 0 1em;
}
span{
white-space: nowrap;
}
svg{
margin-right: 0.5em;
max-width: 1.25rem;
vertical-align: bottom;
}
<ul>
<li>
<a href="#"><span>
<svg enable-background="new 0 0 20 21.4" viewBox="0 0 20 21.4">
<path d="m13.1 8.4v-6h1v-2h-8.2v2h1v6l-4.4 9.6c-.1.1-.1.3-.1.4v.5c0 .2 0 .4.1.6s.1.4.3.5c.2.3.4.5.7.7.2.2.5.3.9.3h11.2c.3 0 .7-.1 1-.3s.5-.4.7-.7c.2-.3.3-.6.3-1 0-.3 0-.7-.2-1zm-4.2.7c0-.1.1-.2.1-.2 0-.1 0-.1 0-.2v-6.2h2v6.2.2c0 .1 0 .2.1.2l2.1 4.7h-6.4z" fill="#fff"></path>
</svg>
Link text one
</span></a>
</li>
<li>
<a href="#"><span>
<svg enable-background="new 0 0 20 21.4" viewBox="0 0 20 21.4">
<path d="m13.1 8.4v-6h1v-2h-8.2v2h1v6l-4.4 9.6c-.1.1-.1.3-.1.4v.5c0 .2 0 .4.1.6s.1.4.3.5c.2.3.4.5.7.7.2.2.5.3.9.3h11.2c.3 0 .7-.1 1-.3s.5-.4.7-.7c.2-.3.3-.6.3-1 0-.3 0-.7-.2-1zm-4.2.7c0-.1.1-.2.1-.2 0-.1 0-.1 0-.2v-6.2h2v6.2.2c0 .1 0 .2.1.2l2.1 4.7h-6.4z" fill="#fff"></path>
</svg>
Link text
</span></a>
</li>
</ul>

How do I remove spacing around elements inside ".container-fluid"?

Here I'm creating a header with display: flex; for perfect horizontally centering my elements inside that and not vertically centering them. Without using Bootstrap, everything works right, but as soon as I add Bootstrap CSS to my HTML, they just leap into the center of the .container with a little spacing between them, I want my .right-svg and .nike-svg to be placed at the very right and left spaces in their .container.
NOTE: The result f this snippet is exactly what I want it to look like, but please add Bootstrap CSS 3 to this HTML as I did, and the problem will be shown.
Any advises is welcome.
*,
*::after,
*::before{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
main{
max-width: 100%;
}
/*====================== header ======================*/
header .row{
margin: 0;
}
header .row .col-xs-12{
padding: 0;
}
header .row .gen-nav-header{
height: 60px;
background-color: #e38d13;
}
header .row .gen-nav-header .container-fluid{
width: 96%;
height: 100%;
margin: auto;
border: 1px solid #000;
display: flex;
/*align-items: center;*/
justify-content: space-between;
flex-direction: row-reverse;
}
header .row .gen-nav-header .container-fluid .right-svg{
display: flex;
justify-content: end;
align-items: center;
border: 1px solid #000;
flex-direction: row-reverse;
}
header .row .gen-nav-header .container-fluid .nike-svg{
display: block;
position: relative;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nike Official Site. Nike DE</title>
</head>
href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="images/nike-icon.jpg">
<body>
<main>
<!-- ================ header ============== -->
<header>
<div class="row">
<div class="col-xs-12">
<div class="gen-nav-header">
<div class="container-fluid">
<!------------------ right svg ------------------->
<div class="right-svg">
<span class="hamburger-menu-svg">
<svg width="24px" height="24px" fill="#111" viewBox="0 0 24 24"><path d="M21 13H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1zm0-8H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1zm0 16H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1z"></path></svg>
</span>
<span class="search-svg">
<svg class="pre-search-input-icon" fill="#111" height="30px" width="30px" viewBox="0 0 24 24"><path d="M21.71 20.29L18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.39zM11 18a7 7 0 1 1 7-7 7 7 0 0 1-7 7z"></path></svg>
</span>
<span class="shopping-svg">
<svg width="24px" height="24px" fill="#111" viewBox="0 0 24 24"><path d="M16 7a1 1 0 0 1-1-1V3H9v3a1 1 0 0 1-2 0V3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v3a1 1 0 0 1-1 1z"></path><path d="M20 5H4a2 2 0 0 0-2 2v13a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a2 2 0 0 0-2-2zm0 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7h16z"></path></svg>
</span>
</div>
<!----------------- end right svg ------------------->
<span class="nike-svg">
<svg class="pre-logo-svg" height="60px" width="60px" fill="#111" viewBox="0 0 69 32"><path d="M68.56 4L18.4 25.36Q12.16 28 7.92 28q-4.8 0-6.96-3.36-1.36-2.16-.8-5.48t2.96-7.08q2-3.04 6.56-8-1.6 2.56-2.24 5.28-1.2 5.12 2.16 7.52Q11.2 18 14 18q2.24 0 5.04-.72z"></path></svg>
</span>
</div>
</div>
</div>
</div>
</header>
</main>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>

Change the class name .container-fluid to something else as that is a bootstrap predefined class.
You can change the class name to anything else you want.
Codepen: https://codepen.io/manaskhandelwal1/pen/mdrzqOM

Add .col to <div class="col-xs-12">.
Is it possible, that you are using Bootstrap 4 while looking to Bootstrap 5 guide?
/*====================== header ======================*/
header .row {
margin: 0;
}
header .row .col-xs-12 {
padding: 0;
}
header .row .gen-nav-header {
height: 60px;
background-color: #e38d13;
}
header .row .gen-nav-header .container-fluid {
width: 96%;
height: 100%;
margin: auto;
border: 1px solid #000;
display: flex;
/*align-items: center;*/
justify-content: space-between;
flex-direction: row-reverse;
}
header .row .gen-nav-header .container-fluid .right-svg {
display: flex;
justify-content: end;
align-items: center;
border: 1px solid #000;
flex-direction: row-reverse;
}
header .row .gen-nav-header .container-fluid .nike-svg {
display: block;
position: relative;
left: 0;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<main>
<!-- ================ header ============== -->
<header>
<div class="row">
<div class="col col-xs-12"> <!-- ← ADD .col HERE ← -->
<div class="gen-nav-header">
<div class="container-fluid">
<!------------------ right svg ------------------->
<div class="right-svg">
<span class="hamburger-menu-svg">
<svg width="24px" height="24px" fill="#111" viewBox="0 0 24 24">
<path d="M21 13H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1zm0-8H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1zm0 16H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1z"></path>
</svg>
</span>
<span class="search-svg">
<svg class="pre-search-input-icon" fill="#111" height="30px" width="30px" viewBox="0 0 24 24">
<path d="M21.71 20.29L18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.39zM11 18a7 7 0 1 1 7-7 7 7 0 0 1-7 7z"></path>
</svg>
</span>
<span class="shopping-svg">
<svg width="24px" height="24px" fill="#111" viewBox="0 0 24 24">
<path d="M16 7a1 1 0 0 1-1-1V3H9v3a1 1 0 0 1-2 0V3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v3a1 1 0 0 1-1 1z"></path>
<path d="M20 5H4a2 2 0 0 0-2 2v13a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a2 2 0 0 0-2-2zm0 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7h16z"></path>
</svg>
</span>
</div>
<!----------------- end right svg ------------------->
<span class="nike-svg">
<svg class="pre-logo-svg" height="60px" width="60px" fill="#111" viewBox="0 0 69 32">
<path d="M68.56 4L18.4 25.36Q12.16 28 7.92 28q-4.8 0-6.96-3.36-1.36-2.16-.8-5.48t2.96-7.08q2-3.04 6.56-8-1.6 2.56-2.24 5.28-1.2 5.12 2.16 7.52Q11.2 18 14 18q2.24 0 5.04-.72z"></path>
</svg>
</span>
</div>
</div>
</div>
</div>
</header>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

React Carbon Modal Positioning

I'm using the React-Carbon library to design a new part of a frontend for a client, and I'm having problems with the positioning of a modal. As you can see in the image below, clicking on the button in the table opens the modal (and makes the 'darkening' div visible), but the position of the modal isn't relative to where the viewer is currently looking. As a result, it looks as if the modal hasn't opened until you scroll up.
The CSS for the modal is as follows:
.bx--modal {
align-items: center;
box-sizing: border-box;
display: flex;
height: 920px;
justify-content: center;
left: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: fixed;
top: 0px;
visibility: hidden;
width: 1680px;
z-index: 9000;
}
EDIT, the HTML is as follows:
<div role="dialog" class="bx--modal-container" aria-label="Edit requisition" aria-modal="true" tabindex="-1"><div class="bx--modal-header"><h3 id="bx--modal-header__heading--modal-125" class="bx--modal-header__heading">Settings</h3><button class="bx--modal-close" type="button" title="Close" aria-label="Close"><svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-label="Close" width="20" height="20" viewBox="0 0 32 32" role="img" class="bx--modal-close__icon"><path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></path></svg></button></div><div id="bx--modal-body--modal-125" class="bx--modal-content" aria-labelledby="bx--modal-header__heading--modal-125"><svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" class="bx--select__arrow"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg></div></div></div></div></div><div class="bx--modal-footer bx--btn-set"><button tabindex="0" class="bx--btn bx--btn--secondary" type="button">Cancel</button><button tabindex="0" class="bx--btn bx--btn--primary" type="button">Save</button></div></div>

If you render the modal into a separate div using React.createPortal (https://reactjs.org/docs/portals.html), you should be able to use the default Carbon modal CSS.
Here is an example codepen: jGBWpE.
H/T to user cbr who suggested this debugging step.

How to avoid getting a horizontal scroll bar?

I've tried fixing everything but I'm still getting a slight horizontal scroll to the right.
I applied box-sizing, so I don't know what the issue is.
What's going wrong?
Chart.defaults.global.defaultFontColor = '#A8A8A8'
let line = document.getElementById('line-chart').getContext('2d');
let myLineChart = new Chart(line, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['', '16-22', '23-29', '30-5', '6-12', '13-19', '20-26', '27-3', '4-10', '11-17', '18-24', '25-31'],
datasets: [{
backgroundColor: 'rgb(226,227,247, 0.6)',
borderColor: 'purple',
pointRadius: [0, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
pointBackgroundColor: 'white',
lineTension: 0,
data: [0, 600, 700, 650, 800, 900, 950, 1000, 850, 900, 550, 1000, 2000]
}]
},
// Configuration options go here
options: {
legend: false,
scales: {
yAxes: [{
gridLines: {
drawTicks: false
},
ticks: {
suggestedMax: 2500,
stepSize: 500,
padding: 10,
callback: function(value, index) {
if (value !== 0) return value;
}
}
}],
xAxes: [{
gridLines: {
tickMarkLength: 8,
drawTicks: false
},
ticks: {
padding: 10
}
}]
}
}
});
let bar = document.getElementById('bar-chart').getContext('2d');
let myBarChart = new Chart(bar, {
// The type of chart we want to create
type: 'bar',
// The data for our dataset
data: {
labels: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
datasets: [{
backgroundColor: '#7377BF',
data: [50, 75, 100, 60, 150, 220, 230, 110, 65, 250, 130, 120]
}]
},
// Configuration options go here
options: {
legend: false,
scales: {
yAxes: [{
gridLines: {
drawTicks: false
},
ticks: {
max: 250,
min: 0,
stepSize: 50,
padding: 10,
callback: function(value, index) {
if (value !== 0) return value;
}
}
}],
xAxes: [{
gridLines: {
tickMarkLength: 8,
drawTicks: false
},
ticks: {
padding: 10
}
}]
}
}
});
let doughnut = document.getElementById('doughnut-chart').getContext('2d');
let myDoughnutChart = new Chart(doughnut, {
// The type of chart we want to create
type: 'doughnut',
// The data for our dataset
data: {
labels: ['Phones', 'Tablet', 'Desktop'],
datasets: [{
data: [40, 40, 120],
backgroundColor: ['#7377BF', '#6FACB0', '#8BBD90', ]
}]
},
options: {
legend: {
position: 'right',
labels: {
boxWidth: 15
}
}
}
});
* {
box-sizing: border-box;
}
/* GRID AREA */
.header {
grid-area: header;
}
.side-navigation {
grid-area: side-navigation;
}
.traffic {
grid-area: traffic;
}
.daily-traffic {
grid-area: daily-traffic;
}
.mobile-users {
grid-area: mobile-users;
}
.social-stats {
grid-area: social-stats;
}
.new-members {
grid-area: new-members;
}
.recent-activity {
grid-area: recent-activity;
}
.message-users {
grid-area: message-users;
}
.settings {
grid-area: settings;
}
/* HEADER */
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
.icon-bell-div {
width: 40px;
height: 40px;
}
/* SIDE NAVIGATION */
.side-navigation {
display: flex;
justify-content: center;
}
.side-navigation>* {
width: 56px;
height: 56px;
margin-right: 10px;
}
/* TRAFFIC INFORMATION */
.traffic {
flex-direction: column;
}
.search-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.search-top input {
padding: 5px 5px;
flex-basis: 25%;
margin-right: 10px;
}
.traffic-titles {
display: flex;
align-items: center;
}
.traffic-titles p {
margin-right: auto;
}
/* SOCIAL STATS */
.social-stats {
display: flex;
flex-direction: column;
padding: 0 10px;
}
.social-stats-boxes {
/* Inside is various boxes */
display: flex;
border: 5px green solid;
justify-content: space-between;
}
.twitter-box,
.facebook-box,
.google-box {
flex-basis: 25%;
display: flex;
}
.twitter-svg-div,
.facebook-svg-div,
.google-svg-div {
background-color: #7377BF;
padding: 20px;
display: inline-block;
margin-right: 20px;
}
.twitter-svg,
.facebook-svg,
.google-svg {
height: 56px;
width: 56px;
text-align: center;
}
.twitter-path,
.facebook-path,
.google-path {
fill: white;
}
/* IMAGES */
img {
border-radius: 50%;
}
/* NEW MEMBERS */
.new-members {
display: flex;
flex-direction: column;
align-items: left;
}
.member-new {
display: flex;
}
.date {
margin-left: auto;
}
/* RECENT ACTIVITY */
.recent-activity {
display: flex;
flex-direction: column;
align-items: left;
}
.member-recent {
display: flex;
}
.arrow {
margin-left: auto;
transform: rotate(-23deg);
}
i {
border: solid black;
border-width: 0 5px 5px 0;
display: inline-block;
padding: 3px;
}
/* MESSAGE USER */
.message-users {
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: 10px;
}
.message-users input,
.message-users textarea {
margin: 10px 0;
padding: 10px 0;
}
/* SETTINGS */
.settings {
display: flex;
flex-direction: column;
padding: 0 10px;
}
select[name='timezone'] {
padding: 5px 0;
}
.switch-light {
display: flex !important;
justify-content: start !important;
}
.switch-light>* {
margin-bottom: 20px;
}
.switch-light>span {
width: 100px !important;
}
.switch-light>strong {
width: 250px !important;
}
.buttons {
display: flex;
}
.buttons>* {
flex: 1;
padding: 10px 0;
}
button:nth-child(1) {
margin-right: 30px;
}
.main-container {
display: grid;
grid-template-rows: repeat(auto-fit, 1fr);
grid-template-areas: "header" "side-navigation" "traffic" "daily-traffic" "mobile-users" "social-stats" "new-members" "recent-activity" "message-users" "settings"
}
/* #media (min-width: 768px) {
.main-container {
grid-template-rows: 50px repeat(auto-fit, 1fr);
grid-template-columns: 50px 1fr 1fr;
grid-template-areas:
"header header header"
"side-navigation traffic traffic"
"side-navigation daily-traffic mobile-users"
"side-navigation social-stats social-stats"
"side-navigation new-members recent-activity"
"side-navigation message-users settings"
}
} */
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/css-toggle-switch#latest/dist/toggle-switch.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<div class="main-container">
<div class="header">
<h1>YourApp</h1>
<div class="icon-bell-div">
<svg class="icon-bell-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g id="_x36__6_">
<g>
<path class="st0" d="M24,18v-8c0-5.5-4.5-10-10-10S4,4.5,4,10v8l-4,8h9.1c0.5,2.3,2.5,4,4.9,4s4.4-1.7,4.9-4H28L24,18z M14,28
c-1.3,0-2.4-0.8-2.8-2h5.6C16.4,27.2,15.3,28,14,28z M3,24l3-6v-8c0-4.4,3.6-8,8-8s8,3.6,8,8v8l3,6H3z"/>
</g>
</g>
</svg>
</div>
</div>
<div class="side-navigation">
<div class="dashboard">
<svg class="dashboard-svg" version="1.1" id="Line_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:black;}
</style>
<g id="_x31_0_20_">
<g>
<path class="st0" d="M25,18c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C22,16.7,23.3,18,25,18z M24,14h2v2h-2V14z M25,26
c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C22,24.7,23.3,26,25,26z M24,22h2v2h-2V22z M17,26c1.7,0,3-1.3,3-3
c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C14,24.7,15.3,26,17,26z M16,22h2v2h-2V22z M28,0H6C3.8,0,2,1.8,2,4v24c0,2.2,1.8,4,4,4h22
c2.2,0,4-1.8,4-4V4C32,1.8,30.2,0,28,0z M30,28c0,1.1-0.9,2-2,2H6c-1.1,0-2-0.9-2-2V8h26V28z M30,6H4V4c0-1.1,0.9-2,2-2h22
c1.1,0,2,0.9,2,2V6z M17,18c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C14,16.7,15.3,18,17,18z M16,14h2v2h-2V14z M9,26
c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C6,24.7,7.3,26,9,26z M8,22h2v2H8V22z M9,18c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3
c-1.7,0-3,1.3-3,3C6,16.7,7.3,18,9,18z M8,14h2v2H8V14z"/>
</g>
</g>
</svg>
</div>
<div class="members">
<svg class="members-svg" version="1.1" id="Line_5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:black;}
</style>
<g id="_x37__17_">
<g>
<path class="st0" d="M18,16.4c1.3-1.7,2-3.9,2-6.4c0-5.5-4-10-9-10C6,0,2,4.5,2,10c0,2.4,0.8,4.6,2,6.4c-2.3,0.8-4,3-4,5.6v4
c0,3.3,2.7,6,6,6h10c3.3,0,6-2.7,6-6v-4C22,19.4,20.3,17.2,18,16.4z M4,10c0-4.4,3.1-8,7-8c3.9,0,7,3.6,7,8s-3.1,8-7,8
C7.1,18,4,14.4,4,10z M20,25.5c0,2.5-2.2,4.5-4.9,4.5H6.9C4.2,30,2,28,2,25.5v-3c0-2.1,1.6-3.9,3.8-4.4C7.2,19.3,9,20,11,20
c2,0,3.8-0.7,5.2-1.9c2.2,0.5,3.8,2.2,3.8,4.4V25.5z M23,8h8c0.6,0,1-0.4,1-1c0-0.6-0.4-1-1-1h-8c-0.6,0-1,0.4-1,1
C22,7.6,22.4,8,23,8z M31,24h-6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1C32,24.4,31.6,24,31,24z M31,12h-8
c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1C32,12.4,31.6,12,31,12z M31,18h-6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h6
c0.6,0,1-0.4,1-1C32,18.4,31.6,18,31,18z"/>
</g>
</g>
</svg>
</div>
<div class="social-visits">
<svg class="social-visits-svg" version="1.1" id="Line_12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:black;}
</style>
<g id="_x35__10_">
<g>
<path class="st0" d="M14,0h-2c-1.1,0-2,0.9-2,2v28c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2V2C16,0.9,15.1,0,14,0z M14,29
c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1V29z M4,9H2c-1.1,0-2,0.9-2,2v19c0,1.1,0.9,2,2,2h2
c1.1,0,2-0.9,2-2V11C6,9.9,5.1,9,4,9z M4,29c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1V12c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1V29z M24,16h-2
c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2V18C26,16.9,25.1,16,24,16z M24,29c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1V19
c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1V29z"/>
</g>
</g>
</svg>
</div>
<div class="settings-side">
<svg class="settings-svg" version="1.1" id="Line_6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:black;}
</style>
<g id="_x32__16_">
<g>
<path class="st0" d="M26,24H14.9c-0.4-1.7-2-3-3.9-3c-1.9,0-3.4,1.3-3.9,3H6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h1.1
c0.4,1.7,2,3,3.9,3c1.9,0,3.4-1.3,3.9-3H26c0.6,0,1-0.4,1-1C27,24.4,26.6,24,26,24z M11,27.4c-1.3,0-2.4-1.1-2.4-2.4
c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4C13.4,26.3,12.3,27.4,11,27.4z M26,8H14.9c-0.4-1.7-2-3-3.9-3C9.1,5,7.6,6.3,7.1,8H6
C5.4,8,5,8.4,5,9c0,0.6,0.4,1,1,1h1.1c0.4,1.7,2,3,3.9,3c1.9,0,3.4-1.3,3.9-3H26c0.6,0,1-0.4,1-1C27,8.4,26.6,8,26,8z M11,11.4
c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4C13.4,10.3,12.3,11.4,11,11.4z M26,16h-2.1
c-0.4-1.7-2-3-3.9-3c-1.9,0-3.4,1.3-3.9,3H6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h10.1c0.4,1.7,2,3,3.9,3c1.9,0,3.4-1.3,3.9-3H26
c0.6,0,1-0.4,1-1C27,16.4,26.6,16,26,16z M20,19.4c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4
C22.4,18.3,21.3,19.4,20,19.4z M28,0H4C1.8,0,0,1.8,0,4v24c0,2.2,1.8,4,4,4h24c2.2,0,4-1.8,4-4V4C32,1.8,30.2,0,28,0z M30,28
c0,1.1-0.9,2-2,2H4c-1.1,0-2-0.9-2-2V4c0-1.1,0.9-2,2-2h24c1.1,0,2,0.9,2,2V28z"/>
</g>
</g>
</svg>
</div>
</div>
<div class="traffic">
<div class="search-top">
<h1>Dashboard</h1>
<input type="search" placeholder="Search">
</div>
<div class=alert>
<p>Alert! This is a test.</p>
</div>
<div class="traffic-titles">
<p>Traffic</p>
<button>Hourly</button>
<button>Daily</button>
<button>Weekly</button>
<button>Monthly</button>
</div>
<canvas id="line-chart"></canvas>
</div>
<div class="daily-traffic">
<p>Daily Traffic</p>
<canvas id="bar-chart"></canvas>
</div>
<div class="mobile-users">
<p>Mobile Users</p>
<canvas id="doughnut-chart"></canvas>
</div>
<div class="social-stats">
<p>Social Stats</p>
<div class="social-stats-boxes">
<div class="twitter-box">
<div class="twitter-svg-div">
<svg class="twitter-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path class="twitter-path" fill="red" d="M32,3.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6C25.8,0.8,24,0,22.2,0
c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5C10.3,7.8,5.5,5.2,2.2,1.2c-0.6,1-0.9,2.1-0.9,3.3c0,2.3,1.2,4.3,2.9,5.5
c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1
c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,3,10.1,3c12.1,0,18.7-10,18.7-18.7
c0-0.3,0-0.6,0-0.8C30,5.6,31.1,4.4,32,3.1z"/>
</svg>
</div>
<div class="twitter-info">
<p>Twitter</p>
<p>10,345</p>
</div>
</div>
<div class="facebook-box">
<div class="facebook-svg-div">
<svg class="facebook-svg" enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path class="facebook-path" fill="green" d="M40.43,21.739h-7.645v-5.014c0-1.883,1.248-2.322,2.127-2.322c0.877,0,5.395,0,5.395,0V6.125l-7.43-0.029 c-8.248,0-10.125,6.174-10.125,10.125v5.518h-4.77v8.53h4.77c0,10.947,0,24.137,0,24.137h10.033c0,0,0-13.32,0-24.137h6.77 L40.43,21.739z"/>
</svg>
</div>
<div class="facebook-info">
<p>Facebook</p>
<p>8,038</p>
</div>
</div>
<div class="google-box">
<div class="google-svg-div">
<svg class="google-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path class="google-path" fill="blue" d="M17.7,25.7c0-0.3,0-0.5-0.1-0.8c-0.1-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.2-0.4-0.3-0.7c-0.2-0.2-0.3-0.4-0.4-0.6
c-0.1-0.2-0.3-0.3-0.5-0.6c-0.2-0.2-0.4-0.4-0.5-0.5c-0.1-0.1-0.3-0.3-0.6-0.5c-0.3-0.2-0.5-0.4-0.6-0.4s-0.3-0.2-0.6-0.4
c-0.3-0.2-0.5-0.4-0.6-0.4c-0.2,0-0.5,0-1,0c-0.7,0-1.4,0-2,0.1c-0.7,0.1-1.4,0.2-2.1,0.5c-0.7,0.2-1.3,0.5-1.9,0.9s-1,0.8-1.3,1.4
c-0.3,0.6-0.5,1.3-0.5,2.1c0,0.9,0.2,1.7,0.7,2.3c0.5,0.7,1.1,1.2,1.8,1.6s1.5,0.7,2.3,0.9s1.6,0.3,2.4,0.3c0.8,0,1.5-0.1,2.2-0.2
c0.7-0.2,1.3-0.4,1.9-0.8c0.6-0.3,1.1-0.8,1.4-1.4C17.5,27.2,17.7,26.5,17.7,25.7z M15.4,9.1c0-0.8-0.1-1.6-0.3-2.5
c-0.2-0.9-0.5-1.7-0.9-2.5c-0.4-0.8-0.9-1.5-1.6-2c-0.7-0.5-1.5-0.8-2.3-0.8c-1.2,0-2.1,0.4-2.8,1.3c-0.7,0.9-1,1.9-1,3.2
c0,0.6,0.1,1.2,0.2,1.9c0.1,0.7,0.4,1.3,0.7,2c0.3,0.7,0.7,1.3,1.1,1.8c0.4,0.5,0.9,1,1.5,1.3c0.6,0.3,1.2,0.5,1.9,0.5
c1.2,0,2.1-0.4,2.7-1.2C15.1,11.4,15.4,10.4,15.4,9.1z M12.9,0h8.4l-2.6,1.5h-2.6c0.9,0.6,1.6,1.4,2.1,2.4s0.8,2.1,0.8,3.2
c0,0.9-0.1,1.8-0.4,2.5c-0.3,0.7-0.7,1.3-1.1,1.8c-0.4,0.4-0.8,0.9-1.3,1.2c-0.4,0.4-0.8,0.8-1.1,1.2c-0.3,0.4-0.4,0.8-0.4,1.3
c0,0.3,0.1,0.7,0.3,1c0.2,0.3,0.5,0.6,0.8,0.9c0.3,0.3,0.7,0.6,1.1,0.9c0.4,0.3,0.8,0.7,1.2,1.1c0.4,0.4,0.8,0.8,1.1,1.3
c0.3,0.5,0.6,1,0.8,1.6c0.2,0.6,0.3,1.3,0.3,2c0,2.1-0.9,3.9-2.7,5.4c-1.9,1.7-4.6,2.5-8.1,2.5c-0.8,0-1.5-0.1-2.3-0.2
c-0.8-0.1-1.6-0.3-2.3-0.6c-0.8-0.3-1.5-0.7-2.1-1.1c-0.6-0.4-1.1-1-1.5-1.7C1,27.6,0.8,26.9,0.8,26c0-0.8,0.2-1.6,0.7-2.6
c0.4-0.8,1-1.5,1.8-2.1c0.8-0.6,1.8-1.1,2.8-1.4c1-0.3,2-0.5,3-0.7c0.9-0.1,1.9-0.2,2.9-0.3c-0.8-1.1-1.2-2-1.2-2.9
c0-0.2,0-0.3,0-0.5c0-0.1,0.1-0.3,0.1-0.4c0-0.1,0.1-0.2,0.2-0.4c0.1-0.2,0.1-0.3,0.1-0.4c-0.5,0.1-1,0.1-1.3,0.1
c-1.9,0-3.5-0.6-4.9-1.9c-1.4-1.3-2-2.8-2-4.7c0-1.8,0.6-3.4,1.8-4.8C6,1.7,7.5,0.8,9.3,0.4C10.5,0.1,11.7,0,12.9,0z M32.8,4.9v2.5
h-4.9v4.9h-2.5V7.4h-4.9V4.9h4.9V0h2.5v4.9H32.8z"/>
</svg>
</div>
<div class="google-info">
<p>Google</p>
<p>9000</p>
</div>
</div>
</div>
</div>
<div class="new-members">
<p>New Members</p>
<div class="member-new">
<img src="images/member-1.jpg">
<div class="email-info">
<p>Victoria Chambers</p>
<p>victoria.chambers80#example.com</p>
</div>
<p class="date">10/15/15</p>
</div>
<div class="member-new">
<img src="images/member-2.jpg">
<div class="email-info">
<p>Dale Byrd</p>
<p>dale.byrd52#example.com</p>
</div>
<p class="date">10/15/15</p>
</div>
<div class="member-new">
<img src="images/member-3.jpg">
<div class="email-info">
<p>Dawn Wood</p>
<p>dawn.wood16#example.com</p>
</div>
<p class="date">10/15/15</p>
</div>
<div class="member-new">
<img src="images/member-4.jpg">
<div class="email-info">
<p>Dan Oliver</p>
<p>dan.oliver82#example.com</p>
</div>
<p class="date">10/15/15</p>
</div>
</div>
<div class="recent-activity">
<p>Recent Activity</p>
<div class="member-recent">
<img src="images/member-1.jpg">
<div class="member-recent-activity">
<p>Victoria Chambers commented on YourApp's SEO tips</p>
<p>4 hours ago</p>
</div>
<p class="arrow"><i class="arrow right"></i></p>
</div>
<div class="member-recent">
<img src="images/member-2.jpg">
<div class="member-recent-activity">
<p>Victoria Chambers commented on YourApp's SEO tips</p>
<p>4 hours ago</p>
</div>
<p class="arrow"><i class="arrow right"></i></p>
</div>
<div class="member-recent">
<img src="images/member-3.jpg">
<div class="member-recent-activity">
<p>Victoria Chambers commented on YourApp's SEO tips</p>
<p>4 hours ago</p>
</div>
<p class="arrow"><i class="arrow right"></i></p>
</div>
<div class="member-recent">
<img src="images/member-4.jpg">
<div class="member-recent-activity">
<p>Victoria Chambers commented on YourApp's SEO tips</p>
<p>4 hours ago</p>
</div>
<p class="arrow"><i class="arrow right"></i></p>
</div>
</div>
<div class="message-users">
<p>Message Users</p>
<input type="search" id="site-search" placeholder="Search for User">
<textarea rows="10" cols="50" placeholder="Message for User"></textarea>
<input type="submit" id="site-search" value="Send">
</div>
<div class="settings">
<p>Settings</p>
<label class="switch-light switch-ios" onclick="">
<input type="checkbox">
<strong class="switch-light-text">
Send Email Notifications
</strong>
<span class="switch-light-span">
<span>Off</span>
<span>On</span>
<a></a>
</span>
</label>
<label class="switch-light switch-ios" onclick="">
<input type="checkbox">
<strong class="switch-light-text">
Set Profile to Public
</strong>
<span class="switch-light-span">
<span>Off</span>
<span>On</span>
<a></a>
</span>
</label>
<select name="timezone">
<option value="volvo" selected>Select a Timezone</option>
<option value="volvo">Volvo</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<div class="buttons">
<button>Save</button>
<button>Cancel</button>
</div>
</div>
</div>
View on CodePen

I believe the horizontal scroll is due to rotated p.arrow elements inside .member-recent elements:
Preventing overflow of .member-recent elements seems to help.
.member-recent {
...
overflow: hidden;
}
Here's a demonstration:
Chart.defaults.global.defaultFontColor = '#A8A8A8'
let line = document.getElementById('line-chart').getContext('2d');
let myLineChart = new Chart(line, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['', '16-22', '23-29', '30-5', '6-12', '13-19', '20-26', '27-3', '4-10', '11-17', '18-24', '25-31'],
datasets: [{
backgroundColor: 'rgb(226,227,247, 0.6)',
borderColor: 'purple',
pointRadius: [0, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
pointBackgroundColor: 'white',
lineTension: 0,
data: [0, 600, 700, 650, 800, 900, 950, 1000, 850, 900, 550, 1000, 2000]
}]
},
// Configuration options go here
options: {
legend: false,
scales: {
yAxes: [{
gridLines: {
drawTicks: false
},
ticks: {
suggestedMax: 2500,
stepSize: 500,
padding: 10,
callback: function(value, index) {
if (value !== 0) return value;
}
}
}],
xAxes: [{
gridLines: {
tickMarkLength: 8,
drawTicks: false
},
ticks: {
padding: 10
}
}]
}
}
});
let bar = document.getElementById('bar-chart').getContext('2d');
let myBarChart = new Chart(bar, {
// The type of chart we want to create
type: 'bar',
// The data for our dataset
data: {
labels: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
datasets: [{
backgroundColor: '#7377BF',
data: [50, 75, 100, 60, 150, 220, 230, 110, 65, 250, 130, 120]
}]
},
// Configuration options go here
options: {
legend: false,
scales: {
yAxes: [{
gridLines: {
drawTicks: false
},
ticks: {
max: 250,
min: 0,
stepSize: 50,
padding: 10,
callback: function(value, index) {
if (value !== 0) return value;
}
}
}],
xAxes: [{
gridLines: {
tickMarkLength: 8,
drawTicks: false
},
ticks: {
padding: 10
}
}]
}
}
});
let doughnut = document.getElementById('doughnut-chart').getContext('2d');
let myDoughnutChart = new Chart(doughnut, {
// The type of chart we want to create
type: 'doughnut',
// The data for our dataset
data: {
labels: ['Phones', 'Tablet', 'Desktop'],
datasets: [{
data: [40, 40, 120],
backgroundColor: ['#7377BF', '#6FACB0', '#8BBD90', ]
}]
},
options: {
legend: {
position: 'right',
labels: {
boxWidth: 15
}
}
}
});
* {
box-sizing: border-box;
}
/* GRID AREA */
.header {
grid-area: header;
}
.side-navigation {
grid-area: side-navigation;
}
.traffic {
grid-area: traffic;
}
.daily-traffic {
grid-area: daily-traffic;
}
.mobile-users {
grid-area: mobile-users;
}
.social-stats {
grid-area: social-stats;
}
.new-members {
grid-area: new-members;
}
.recent-activity {
grid-area: recent-activity;
}
.message-users {
grid-area: message-users;
}
.settings {
grid-area: settings;
}
/* HEADER */
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
.icon-bell-div {
width: 40px;
height: 40px;
}
/* SIDE NAVIGATION */
.side-navigation {
display: flex;
justify-content: center;
}
.side-navigation>* {
width: 56px;
height: 56px;
margin-right: 10px;
}
/* TRAFFIC INFORMATION */
.traffic {
flex-direction: column;
}
.search-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.search-top input {
padding: 5px 5px;
flex-basis: 25%;
margin-right: 10px;
}
.traffic-titles {
display: flex;
align-items: center;
}
.traffic-titles p {
margin-right: auto;
}
/* SOCIAL STATS */
.social-stats {
display: flex;
flex-direction: column;
padding: 0 10px;
}
.social-stats-boxes {
/* Inside is various boxes */
display: flex;
border: 5px green solid;
justify-content: space-between;
}
.twitter-box,
.facebook-box,
.google-box {
flex-basis: 25%;
display: flex;
}
.twitter-svg-div,
.facebook-svg-div,
.google-svg-div {
background-color: #7377BF;
padding: 20px;
display: inline-block;
margin-right: 20px;
}
.twitter-svg,
.facebook-svg,
.google-svg {
height: 56px;
width: 56px;
text-align: center;
}
.twitter-path,
.facebook-path,
.google-path {
fill: white;
}
/* IMAGES */
img {
border-radius: 50%;
}
/* NEW MEMBERS */
.new-members {
display: flex;
flex-direction: column;
align-items: left;
}
.member-new {
display: flex;
}
.date {
margin-left: auto;
}
/* RECENT ACTIVITY */
.recent-activity {
display: flex;
flex-direction: column;
align-items: left;
}
.member-recent {
display: flex;
overflow: hidden;
}
.arrow {
margin-left: auto;
transform: rotate(-23deg);
}
i {
border: solid black;
border-width: 0 5px 5px 0;
display: inline-block;
padding: 3px;
}
/* MESSAGE USER */
.message-users {
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: 10px;
}
.message-users input,
.message-users textarea {
margin: 10px 0;
padding: 10px 0;
}
/* SETTINGS */
.settings {
display: flex;
flex-direction: column;
padding: 0 10px;
}
select[name='timezone'] {
padding: 5px 0;
}
.switch-light {
display: flex !important;
justify-content: start !important;
}
.switch-light>* {
margin-bottom: 20px;
}
.switch-light>span {
width: 100px !important;
}
.switch-light>strong {
width: 250px !important;
}
.buttons {
display: flex;
}
.buttons>* {
flex: 1;
padding: 10px 0;
}
button:nth-child(1) {
margin-right: 30px;
}
.main-container {
display: grid;
grid-template-rows: repeat(auto-fit, 1fr);
grid-template-areas: "header" "side-navigation" "traffic" "daily-traffic" "mobile-users" "social-stats" "new-members" "recent-activity" "message-users" "settings"
}
/* #media (min-width: 768px) {
.main-container {
grid-template-rows: 50px repeat(auto-fit, 1fr);
grid-template-columns: 50px 1fr 1fr;
grid-template-areas:
"header header header"
"side-navigation traffic traffic"
"side-navigation daily-traffic mobile-users"
"side-navigation social-stats social-stats"
"side-navigation new-members recent-activity"
"side-navigation message-users settings"
}
} */
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<div class="main-container">
<div class="header">
<h1>YourApp</h1>
<div class="icon-bell-div">
<svg class="icon-bell-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g id="_x36__6_">
<g>
<path class="st0" d="M24,18v-8c0-5.5-4.5-10-10-10S4,4.5,4,10v8l-4,8h9.1c0.5,2.3,2.5,4,4.9,4s4.4-1.7,4.9-4H28L24,18z M14,28
c-1.3,0-2.4-0.8-2.8-2h5.6C16.4,27.2,15.3,28,14,28z M3,24l3-6v-8c0-4.4,3.6-8,8-8s8,3.6,8,8v8l3,6H3z"/>
</g>
</g>
</svg>
</div>
</div>
<div class="side-navigation">
<div class="dashboard">
<svg class="dashboard-svg" version="1.1" id="Line_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:black;}
</style>
<g id="_x31_0_20_">
<g>
<path class="st0" d="M25,18c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C22,16.7,23.3,18,25,18z M24,14h2v2h-2V14z M25,26
c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C22,24.7,23.3,26,25,26z M24,22h2v2h-2V22z M17,26c1.7,0,3-1.3,3-3
c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C14,24.7,15.3,26,17,26z M16,22h2v2h-2V22z M28,0H6C3.8,0,2,1.8,2,4v24c0,2.2,1.8,4,4,4h22
c2.2,0,4-1.8,4-4V4C32,1.8,30.2,0,28,0z M30,28c0,1.1-0.9,2-2,2H6c-1.1,0-2-0.9-2-2V8h26V28z M30,6H4V4c0-1.1,0.9-2,2-2h22
c1.1,0,2,0.9,2,2V6z M17,18c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C14,16.7,15.3,18,17,18z M16,14h2v2h-2V14z M9,26
c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3C6,24.7,7.3,26,9,26z M8,22h2v2H8V22z M9,18c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3
c-1.7,0-3,1.3-3,3C6,16.7,7.3,18,9,18z M8,14h2v2H8V14z"/>
</g>
</g>
</svg>
</div>
<div class="members">
<svg class="members-svg" version="1.1" id="Line_5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:black;}
</style>
<g id="_x37__17_">
<g>
<path class="st0" d="M18,16.4c1.3-1.7,2-3.9,2-6.4c0-5.5-4-10-9-10C6,0,2,4.5,2,10c0,2.4,0.8,4.6,2,6.4c-2.3,0.8-4,3-4,5.6v4
c0,3.3,2.7,6,6,6h10c3.3,0,6-2.7,6-6v-4C22,19.4,20.3,17.2,18,16.4z M4,10c0-4.4,3.1-8,7-8c3.9,0,7,3.6,7,8s-3.1,8-7,8
C7.1,18,4,14.4,4,10z M20,25.5c0,2.5-2.2,4.5-4.9,4.5H6.9C4.2,30,2,28,2,25.5v-3c0-2.1,1.6-3.9,3.8-4.4C7.2,19.3,9,20,11,20
c2,0,3.8-0.7,5.2-1.9c2.2,0.5,3.8,2.2,3.8,4.4V25.5z M23,8h8c0.6,0,1-0.4,1-1c0-0.6-0.4-1-1-1h-8c-0.6,0-1,0.4-1,1
C22,7.6,22.4,8,23,8z M31,24h-6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1C32,24.4,31.6,24,31,24z M31,12h-8
c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h8c0.6,0,1-0.4,1-1C32,12.4,31.6,12,31,12z M31,18h-6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h6
c0.6,0,1-0.4,1-1C32,18.4,31.6,18,31,18z"/>
</g>
</g>
</svg>
</div>
<div class="social-visits">
<svg class="social-visits-svg" version="1.1" id="Line_12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:black;}
</style>
<g id="_x35__10_">
<g>
<path class="st0" d="M14,0h-2c-1.1,0-2,0.9-2,2v28c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2V2C16,0.9,15.1,0,14,0z M14,29
c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1V29z M4,9H2c-1.1,0-2,0.9-2,2v19c0,1.1,0.9,2,2,2h2
c1.1,0,2-0.9,2-2V11C6,9.9,5.1,9,4,9z M4,29c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1V12c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1V29z M24,16h-2
c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2V18C26,16.9,25.1,16,24,16z M24,29c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1V19
c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1V29z"/>
</g>
</g>
</svg>
</div>
<div class="settings-side">
<svg class="settings-svg" version="1.1" id="Line_6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:black;}
</style>
<g id="_x32__16_">
<g>
<path class="st0" d="M26,24H14.9c-0.4-1.7-2-3-3.9-3c-1.9,0-3.4,1.3-3.9,3H6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h1.1
c0.4,1.7,2,3,3.9,3c1.9,0,3.4-1.3,3.9-3H26c0.6,0,1-0.4,1-1C27,24.4,26.6,24,26,24z M11,27.4c-1.3,0-2.4-1.1-2.4-2.4
c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4C13.4,26.3,12.3,27.4,11,27.4z M26,8H14.9c-0.4-1.7-2-3-3.9-3C9.1,5,7.6,6.3,7.1,8H6
C5.4,8,5,8.4,5,9c0,0.6,0.4,1,1,1h1.1c0.4,1.7,2,3,3.9,3c1.9,0,3.4-1.3,3.9-3H26c0.6,0,1-0.4,1-1C27,8.4,26.6,8,26,8z M11,11.4
c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4C13.4,10.3,12.3,11.4,11,11.4z M26,16h-2.1
c-0.4-1.7-2-3-3.9-3c-1.9,0-3.4,1.3-3.9,3H6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h10.1c0.4,1.7,2,3,3.9,3c1.9,0,3.4-1.3,3.9-3H26
c0.6,0,1-0.4,1-1C27,16.4,26.6,16,26,16z M20,19.4c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4
C22.4,18.3,21.3,19.4,20,19.4z M28,0H4C1.8,0,0,1.8,0,4v24c0,2.2,1.8,4,4,4h24c2.2,0,4-1.8,4-4V4C32,1.8,30.2,0,28,0z M30,28
c0,1.1-0.9,2-2,2H4c-1.1,0-2-0.9-2-2V4c0-1.1,0.9-2,2-2h24c1.1,0,2,0.9,2,2V28z"/>
</g>
</g>
</svg>
</div>
</div>
<div class="traffic">
<div class="search-top">
<h1>Dashboard</h1>
<input type="search" placeholder="Search">
</div>
<div class=alert>
<p>Alert! This is a test.</p>
</div>
<div class="traffic-titles">
<p>Traffic</p>
<button>Hourly</button>
<button>Daily</button>
<button>Weekly</button>
<button>Monthly</button>
</div>
<canvas id="line-chart"></canvas>
</div>
<div class="daily-traffic">
<p>Daily Traffic</p>
<canvas id="bar-chart"></canvas>
</div>
<div class="mobile-users">
<p>Mobile Users</p>
<canvas id="doughnut-chart"></canvas>
</div>
<div class="social-stats">
<p>Social Stats</p>
<div class="social-stats-boxes">
<div class="twitter-box">
<div class="twitter-svg-div">
<svg class="twitter-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path class="twitter-path" fill="red" d="M32,3.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6C25.8,0.8,24,0,22.2,0
c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5C10.3,7.8,5.5,5.2,2.2,1.2c-0.6,1-0.9,2.1-0.9,3.3c0,2.3,1.2,4.3,2.9,5.5
c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1
c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,3,10.1,3c12.1,0,18.7-10,18.7-18.7
c0-0.3,0-0.6,0-0.8C30,5.6,31.1,4.4,32,3.1z"/>
</svg>
</div>
<div class="twitter-info">
<p>Twitter</p>
<p>10,345</p>
</div>
</div>
<div class="facebook-box">
<div class="facebook-svg-div">
<svg class="facebook-svg" enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path class="facebook-path" fill="green" d="M40.43,21.739h-7.645v-5.014c0-1.883,1.248-2.322,2.127-2.322c0.877,0,5.395,0,5.395,0V6.125l-7.43-0.029 c-8.248,0-10.125,6.174-10.125,10.125v5.518h-4.77v8.53h4.77c0,10.947,0,24.137,0,24.137h10.033c0,0,0-13.32,0-24.137h6.77 L40.43,21.739z"/>
</svg>
</div>
<div class="facebook-info">
<p>Facebook</p>
<p>8,038</p>
</div>
</div>
<div class="google-box">
<div class="google-svg-div">
<svg class="google-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path class="google-path" fill="blue" d="M17.7,25.7c0-0.3,0-0.5-0.1-0.8c-0.1-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.2-0.4-0.3-0.7c-0.2-0.2-0.3-0.4-0.4-0.6
c-0.1-0.2-0.3-0.3-0.5-0.6c-0.2-0.2-0.4-0.4-0.5-0.5c-0.1-0.1-0.3-0.3-0.6-0.5c-0.3-0.2-0.5-0.4-0.6-0.4s-0.3-0.2-0.6-0.4
c-0.3-0.2-0.5-0.4-0.6-0.4c-0.2,0-0.5,0-1,0c-0.7,0-1.4,0-2,0.1c-0.7,0.1-1.4,0.2-2.1,0.5c-0.7,0.2-1.3,0.5-1.9,0.9s-1,0.8-1.3,1.4
c-0.3,0.6-0.5,1.3-0.5,2.1c0,0.9,0.2,1.7,0.7,2.3c0.5,0.7,1.1,1.2,1.8,1.6s1.5,0.7,2.3,0.9s1.6,0.3,2.4,0.3c0.8,0,1.5-0.1,2.2-0.2
c0.7-0.2,1.3-0.4,1.9-0.8c0.6-0.3,1.1-0.8,1.4-1.4C17.5,27.2,17.7,26.5,17.7,25.7z M15.4,9.1c0-0.8-0.1-1.6-0.3-2.5
c-0.2-0.9-0.5-1.7-0.9-2.5c-0.4-0.8-0.9-1.5-1.6-2c-0.7-0.5-1.5-0.8-2.3-0.8c-1.2,0-2.1,0.4-2.8,1.3c-0.7,0.9-1,1.9-1,3.2
c0,0.6,0.1,1.2,0.2,1.9c0.1,0.7,0.4,1.3,0.7,2c0.3,0.7,0.7,1.3,1.1,1.8c0.4,0.5,0.9,1,1.5,1.3c0.6,0.3,1.2,0.5,1.9,0.5
c1.2,0,2.1-0.4,2.7-1.2C15.1,11.4,15.4,10.4,15.4,9.1z M12.9,0h8.4l-2.6,1.5h-2.6c0.9,0.6,1.6,1.4,2.1,2.4s0.8,2.1,0.8,3.2
c0,0.9-0.1,1.8-0.4,2.5c-0.3,0.7-0.7,1.3-1.1,1.8c-0.4,0.4-0.8,0.9-1.3,1.2c-0.4,0.4-0.8,0.8-1.1,1.2c-0.3,0.4-0.4,0.8-0.4,1.3
c0,0.3,0.1,0.7,0.3,1c0.2,0.3,0.5,0.6,0.8,0.9c0.3,0.3,0.7,0.6,1.1,0.9c0.4,0.3,0.8,0.7,1.2,1.1c0.4,0.4,0.8,0.8,1.1,1.3
c0.3,0.5,0.6,1,0.8,1.6c0.2,0.6,0.3,1.3,0.3,2c0,2.1-0.9,3.9-2.7,5.4c-1.9,1.7-4.6,2.5-8.1,2.5c-0.8,0-1.5-0.1-2.3-0.2
c-0.8-0.1-1.6-0.3-2.3-0.6c-0.8-0.3-1.5-0.7-2.1-1.1c-0.6-0.4-1.1-1-1.5-1.7C1,27.6,0.8,26.9,0.8,26c0-0.8,0.2-1.6,0.7-2.6
c0.4-0.8,1-1.5,1.8-2.1c0.8-0.6,1.8-1.1,2.8-1.4c1-0.3,2-0.5,3-0.7c0.9-0.1,1.9-0.2,2.9-0.3c-0.8-1.1-1.2-2-1.2-2.9
c0-0.2,0-0.3,0-0.5c0-0.1,0.1-0.3,0.1-0.4c0-0.1,0.1-0.2,0.2-0.4c0.1-0.2,0.1-0.3,0.1-0.4c-0.5,0.1-1,0.1-1.3,0.1
c-1.9,0-3.5-0.6-4.9-1.9c-1.4-1.3-2-2.8-2-4.7c0-1.8,0.6-3.4,1.8-4.8C6,1.7,7.5,0.8,9.3,0.4C10.5,0.1,11.7,0,12.9,0z M32.8,4.9v2.5
h-4.9v4.9h-2.5V7.4h-4.9V4.9h4.9V0h2.5v4.9H32.8z"/>
</svg>
</div>
<div class="google-info">
<p>Google</p>
<p>9000</p>
</div>
</div>
</div>
</div>
<div class="new-members">
<p>New Members</p>
<div class="member-new">
<img src="images/member-1.jpg">
<div class="email-info">
<p>Victoria Chambers</p>
<p>victoria.chambers80#example.com</p>
</div>
<p class="date">10/15/15</p>
</div>
<div class="member-new">
<img src="images/member-2.jpg">
<div class="email-info">
<p>Dale Byrd</p>
<p>dale.byrd52#example.com</p>
</div>
<p class="date">10/15/15</p>
</div>
<div class="member-new">
<img src="images/member-3.jpg">
<div class="email-info">
<p>Dawn Wood</p>
<p>dawn.wood16#example.com</p>
</div>
<p class="date">10/15/15</p>
</div>
<div class="member-new">
<img src="images/member-4.jpg">
<div class="email-info">
<p>Dan Oliver</p>
<p>dan.oliver82#example.com</p>
</div>
<p class="date">10/15/15</p>
</div>
</div>
<div class="recent-activity">
<p>Recent Activity</p>
<div class="member-recent">
<img src="images/member-1.jpg">
<div class="member-recent-activity">
<p>Victoria Chambers commented on YourApp's SEO tips</p>
<p>4 hours ago</p>
</div>
<p class="arrow"><i class="arrow right"></i></p>
</div>
<div class="member-recent">
<img src="images/member-2.jpg">
<div class="member-recent-activity">
<p>Victoria Chambers commented on YourApp's SEO tips</p>
<p>4 hours ago</p>
</div>
<p class="arrow"><i class="arrow right"></i></p>
</div>
<div class="member-recent">
<img src="images/member-3.jpg">
<div class="member-recent-activity">
<p>Victoria Chambers commented on YourApp's SEO tips</p>
<p>4 hours ago</p>
</div>
<p class="arrow"><i class="arrow right"></i></p>
</div>
<div class="member-recent">
<img src="images/member-4.jpg">
<div class="member-recent-activity">
<p>Victoria Chambers commented on YourApp's SEO tips</p>
<p>4 hours ago</p>
</div>
<p class="arrow"><i class="arrow right"></i></p>
</div>
</div>
<div class="message-users">
<p>Message Users</p>
<input type="search" id="site-search" placeholder="Search for User">
<textarea rows="10" cols="50" placeholder="Message for User"></textarea>
<input type="submit" id="site-search" value="Send">
</div>
<div class="settings">
<p>Settings</p>
<label class="switch-light switch-ios" onclick="">
<input type="checkbox">
<strong class="switch-light-text">
Send Email Notifications
</strong>
<span class="switch-light-span">
<span>Off</span>
<span>On</span>
<a></a>
</span>
</label>
<label class="switch-light switch-ios" onclick="">
<input type="checkbox">
<strong class="switch-light-text">
Set Profile to Public
</strong>
<span class="switch-light-span">
<span>Off</span>
<span>On</span>
<a></a>
</span>
</label>
<select name="timezone">
<option value="volvo" selected>Select a Timezone</option>
<option value="volvo">Volvo</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<div class="buttons">
<button>Save</button>
<button>Cancel</button>
</div>
</div>
</div>

You can achieve this by hiding the overflow on the body
Add this to your css
body{
overflow-x: hidden;
}

Resources