I'm looking to make div.box and button.navBtn responsive.
Currently when the page is resized to 871px width, the buttons instantly stack on top of each other and the long div.box is squished until it clashes into the buttons. The "final look" (around 500px wide) doesn't even look that bad honestly and is the ideal way this window would look on smaller screens. I'm just trying to make the transition to that size nicer.
Preferably I'd like the buttons to resize themselves gradually with div.box until they hit a certain width and then stack on top of each other however I can't figure out how to apply the correct media query to do this. I feel as if my divider is causing some type of issue a well with spacing but I'm not entirely sure. It does have some whitespace I can't get rid of and is set to 2em width.
I'm also not sure why div.main stops resizing once you hit around 495px width. I'm gonna make sure I use Bootstrap or something next time to avoid this...
Any help would be appreciated. Here's a big snippet of code:
html {
min-height: 100%;
}
body {
display: flex;
justify-content: center;
font-family: 'Lora', serif;
margin: .8em;
background-color: #151b20;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: scroll;
}
h1 {
color: rgb(250, 250, 250);
display: flex;
justify-content: center;
font-size: 3.5em;
margin-top: 0px;
margin-bottom: 10px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
h2 {
color: rgb(250, 250, 250);
display: flex;
font-size: 1.7em;
justify-content: center;
padding-top: 5px;
margin-bottom: 16px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a {
color: rgb(250, 250, 250);
}
ul {
padding-left: 0px;
}
li {
color: rgb(250, 250, 250);
display: flex;
justify-content: center;
list-style: none;
font-size: 1.5em;
margin-bottom: 5px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
button {
background: rgba(0, 0, 0, 0);
background-image: url(Pictures/blank.png);
color: #a5afaa;
border: 3.5px solid transparent;
border-radius: .6em;
padding: 2.8em;
/* transition: all 0.2s; */
background-repeat: no-repeat;
}
button:hover {
border-color: #fff8cc;
box-shadow: 0em 0em 1em 0em #fff8cc;
cursor: url('Pictures/glove-lg.png'), auto;
}
.main {
border: solid 2px #939388;
border-radius: 10px;
background-image: url(Pictures/texture.png);
background-color: #0f0f3de8;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
margin-top: 20px;
}
.inner {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin: 20px;
}
.decoration {
outline: 2px solid rgba(128, 128, 128, 0.4);
outline-offset: -5px;
border-radius: 10px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
}
.box {
background-color: #080824;
box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.6);
border-radius: 3px;
margin: 30px;
padding: 1px;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.navHome {
display: inline-block;
position: relative;
margin-top: 15px;
}
.navBtn {
border: solid 2px #939388;
background-image: none;
background-color: #0f0f3d;
width: 25em;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
}
.navText {
color: white;
font-family: 'Lora', serif;
font-size: 2em;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 0em;
}
.divider {
display: inline-block;
width: 2em;
height: auto;
}
.aboutText {
color: white;
font-family: 'Lora', serif;
font-size: 1.5em;
text-align: center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 1.5em;
}
#about {
padding-top: 25px;
}
#homeList {
margin-bottom: 0px;
}
#homeBox {
padding: 30px;
padding-top: 20px;
}
#media screen and (max-width: 992px) {
h1 {
text-align: center;
padding: 3px;
}
}
<body>
<div class="wrapper">
<div class="main">
<div class="decoration">
<div id="about">
<h1>I mean, it kinda works...</h1>
<ul id="homeList">
<li>Long List Item #1</li>
<li>Long List Item #2</li>
</ul>
<div id="innerHome" class="inner">
<div id="homeBox" class="box">
<a href="" class="navHome">
<button class="navBtn">
<div class="navText">About</div>
</button>
</a>
<div class="divider"></div>
<a href="" class="navHome">
<button class="navBtn">
<div class="navText">Items</div>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
For the buttons to resize themselves you can't give them an explicit width like you do in .navBtn. You need to make them have a certain percentage of the parent and when they hit their minimal witdh they wrap.
Without that change the best that can be done is making the parent smaller when the elements wrap like so:
#homeBox {
width: min-content;
}
#media (min-width: 992px) {
#homeBox {
width: auto;
}
}
html {
min-height: 100%;
}
body {
display: flex;
justify-content: center;
font-family: 'Lora', serif;
margin: .8em;
background-color: #151b20;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: scroll;
}
h1 {
color: rgb(250, 250, 250);
display: flex;
justify-content: center;
font-size: 3.5em;
margin-top: 0px;
margin-bottom: 10px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
h2 {
color: rgb(250, 250, 250);
display: flex;
font-size: 1.7em;
justify-content: center;
padding-top: 5px;
margin-bottom: 16px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a {
color: rgb(250, 250, 250);
}
ul {
padding-left: 0px;
}
li {
color: rgb(250, 250, 250);
display: flex;
justify-content: center;
list-style: none;
font-size: 1.5em;
margin-bottom: 5px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
button {
background: rgba(0, 0, 0, 0);
background-image: url(Pictures/blank.png);
color: #a5afaa;
border: 3.5px solid transparent;
border-radius: .6em;
padding: 2.8em;
/* transition: all 0.2s; */
background-repeat: no-repeat;
}
button:hover {
border-color: #fff8cc;
box-shadow: 0em 0em 1em 0em #fff8cc;
cursor: url('Pictures/glove-lg.png'), auto;
}
.main {
border: solid 2px #939388;
border-radius: 10px;
background-image: url(Pictures/texture.png);
background-color: #0f0f3de8;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
margin-top: 20px;
}
.inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20px;
}
.decoration {
outline: 2px solid rgba(128, 128, 128, 0.4);
outline-offset: -5px;
border-radius: 10px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
}
.box {
background-color: #080824;
box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.6);
border-radius: 3px;
margin: 30px;
padding: 1px;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.navHome {
margin-top: 15px;
display: inline-block;
position: relative;
}
.navBtn {
border: solid 2px #939388;
background-image: none;
background-color: #0f0f3d;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
/* max-width: 25em; */
width: 25em;
}
.navText {
color: white;
font-family: 'Lora', serif;
font-size: 2em;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 0em;
}
.divider {
display: inline-block;
width: 2em;
height: auto;
}
.aboutText {
color: white;
font-family: 'Lora', serif;
font-size: 1.5em;
text-align: center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 1.5em;
}
#about {
padding-top: 25px;
}
#homeList {
margin-bottom: 0px;
}
#homeBox {
padding: 30px;
padding-top: 20px;
}
#homeBox {
width: min-content;
}
#media (min-width: 992px) {
#homeBox {
width: auto;
}
}
#media screen and (max-width: 992px) {
h1 {
text-align: center;
padding: 3px;
}
}
<body>
<div class="wrapper">
<div class="main">
<div class="decoration">
<div id="about">
<h1>I mean, it kinda works...</h1>
<ul id="homeList">
<li>Long List Item #1</li>
<li>Long List Item #2</li>
</ul>
<div id="innerHome" class="inner">
<div id="homeBox" class="box">
<a href="" class="navHome">
<button class="navBtn">
<div class="navText">About</div>
</button>
</a>
<div class="divider"></div>
<a href="" class="navHome">
<button class="navBtn">
<div class="navText">Items</div>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
Related
Need to make lines opposite to each other, now the lines are under each other. Tried a lot of methods but nothing work, please help! Really stuck with that. See the code below and a picture that shows the desired result, idk what to do. Tried to add margin; top; bottom; padding, these methods didn't do anything.
Here's the CSS and HTML:
.crypto-card{
width: 250px;
height: 230px;
background: white;
-webkit-box-shadow: 0px 3px 8px 0px rgba(194,192,194,1);
-moz-box-shadow: 0px 3px 8px 0px rgba(194,192,194,1);
box-shadow: 0px 3px 2px 0px rgba(240,240,240,1);
border-radius: 6px;
transition: .3s;
margin-left: 15px;
margin-right: 25px;
margin-bottom: 20px;
border: 1px solid rgb(245, 245, 245);
}
.crypto-card:hover{
transform: translateY(-1px);
-webkit-box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
-moz-box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
}
.crypto-card .body{
width: 100%;
border-top: 1px solid rgb(240, 240, 240);
padding: 10px;
}
.crypto-card .logo-sprite{
width: 29px;
height: 29px;
margin: 10px;
}
.crypto-symbol{
border-left: 1px solid rgb(220, 220, 220);
padding-left: 10px;
font-size: 1.3rem;
/* font-family: 'Loto', sans-serif; */
letter-spacing: 5px;
text-transform: uppercase;
/* color: #3c3c3c; */
font-weight: 500;
color: rgb(70, 70, 70);
padding-bottom: 4px;
position: relative;
top: 4px;
}
.crypto-card .price-label{
width: 100%;
text-align: left;
color: rgb(190, 190, 190);
font-weight: 500;
font-size: .8rem;
}
.crypto-card .price{
font-size: 1.5rem;
font-weight: 100;
right: -60px;
top: 4px;
text-align: right;
}
<div class="d-flex justify-content-left" style="margin-top: 10px; padding-left: 5%; padding-right: 5%;">
<div class="row" style="">
<div class="crypto-card">
<span>
<img src="https://s2.coinmarketcap.com/static/img/coins/64x64/1.png" class="logo-sprite" width="16" height="16" alt="Bitcoin">
<span class="crypto-symbol">BTC</span>
</span>
<div class="body">
<span class="price">$3865.58</span>
<div class="price-label"><span class="title">Price</span></div>
<span class="volume">$67,585,868,137</span>
</div>
</div>
But I need it similar to this
Using a display: grid would make this super easy.
Here's and example:
* {
box-sizing: border-box;
}
.container {
width: 500px;
margin: auto;
padding: 20px;
}
.card {
display: grid;
grid-template-columns: 50px auto;
grid-template-rows: 50px 200px;
border: 1px solid #eee;
border-radius: 5px;
}
.card .image {
display: block;
align-self: stretch;
justify-self: stretch;
padding: 5px;
border: 1px solid #eee;
border-top: 0;
border-left: 0;
}
.card .header {
padding: 10px;
border-bottom: 1px solid #eee;
}
.card .side {
border-right: 1px solid #eee;
white-space: nowrap;
display: flex;
align-items: center;
}
.card .side .text {
rotate: -90deg;
translate:-12px 0;
}
.card .content {
padding: 10px;
}
<div class="card">
<img
src="https://s2.coinmarketcap.com/static/img/coins/64x64/1.png"
class="image"
alt="Bitcoin"
/>
<div class="header">BTC is a scam</div>
<div class="side">
<div class="text">BIG SCAM</div>
</div>
<div class="content">content in here</div>
</div>
I came across this issue where I cannot get mine top-box to organize the elements correctly. I've tried everything that I know off and cannot get it to work. I need to have my text 100% in middle and logo just to left but every time I try to do that the text moves to right and its offset. And the Navigation bar to be under the logo and text and that is centered like 100% of time every time I try.
I have a main div as a container, this top-box is a child.
<div class="top-box">
<div class="logo">
<a href="#">
<img src="Assets/Images/WebsiteLogo.png" alt="">
</a>
</div>
<div class="webname">
<a href="#">
<h1>Universal Web Designs</h1>
</a>
</div>
<div class="navigationbar">
<ul>
<li>Home</li>
<li>Designs</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</div>
</div>
Some CSS not all
.top-box {
display: flex;
width: 90%;
padding: 0;
margin: 0.5rem 0 0 0;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background: rgba(0, 0, 0, 0.75);
border-top: solid white 1px;
border-right: solid white 1px;
border-left: solid white 1px;
}
.logo {
margin: 0;
padding: 0;
border: solid 1px red;
/* background: rgba(255, 255, 255, 1); */
/* border-radius: 5rem; */
}
.logo img {
width: 5rem;
margin: 0;
/* background: rgba(255, 255, 255, 1); */
/* border-radius: 5rem; */
}
.webname {
}
.webname a {
text-decoration: none;
}
.webname h1 {
padding: 0;
margin: 0;
font-size: 3.5rem;
color: rgba(26, 184, 212, 1);
text-shadow: 4px 2px 10px gray;
border: solid 1px red;
}
.webname h1:hover {
color: gray;
text-shadow: 4px 2px 10px rgb(26, 184, 212);
}
.navigationbar {
width: 100%;
text-align: center;
padding: 0;
margin: 0.2rem 0 0 0;
border: solid 1px red;
/* border-top: solid rgba(255, 255, 255, 0.1) 1px; */
}
.navigationbar ul {
list-style-type: none;
}
.navigationbar li{
display: inline;
text-transform: uppercase;
padding: 0;
margin: 0 2rem;
}
.navigationbar a {
text-decoration: none;
font-size: 1.2rem;
color: white;
text-shadow: 2px rgb(26, 184, 212);
}
.navigationbar a:hover {
color: #dc3545;
text-decoration: underline;
}
Thanks
Solution to you question with CSS grid:
.top-box {
width: 90%;
padding: 0;
margin: 0.5rem 0 0 0;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background: rgba(0, 0, 0, 0.75);
border-top: solid white 1px;
border-right: solid white 1px;
border-left: solid white 1px;
}
.grid {
display: grid;
grid-template-columns: 1fr 555px 1fr;
}
.logo {
margin: 0;
padding: 0;
border: solid 1px red;
/* background: rgba(255, 255, 255, 1); */
/* border-radius: 5rem; */
}
.logo img {
width: 5rem;
margin: 0;
/* background: rgba(255, 255, 255, 1); */
/* border-radius: 5rem; */
}
.webname {
margin: 0 auto;
}
.webname a {
text-decoration: none;
}
.webname h1 {
padding: 0;
margin: 0;
font-size: 3.5rem;
color: rgba(26, 184, 212, 1);
text-shadow: 4px 2px 10px gray;
/* border: solid 1px red; */
}
.webname h1:hover {
color: gray;
text-shadow: 4px 2px 10px rgb(26, 184, 212);
}
.navigationbar {
width: 100%;
text-align: center;
padding: 0;
margin: 0.2rem 0 0 0;
border: solid 1px red;
/* border-top: solid rgba(255, 255, 255, 0.1) 1px; */
}
.navigationbar ul {
list-style-type: none;
}
.navigationbar li{
display: inline;
text-transform: uppercase;
padding: 0;
margin: 0 2rem;
}
.navigationbar a {
text-decoration: none;
font-size: 1.2rem;
color: white;
text-shadow: 2px rgb(26, 184, 212);
}
.navigationbar a:hover {
color: #dc3545;
text-decoration: underline;
}
.logo {
width: 40px;
height:40px;
margin-left: auto;
margin-right: 10px;
align-self: center;
}
<div class="top-box">
<div class="grid">
<div class="logo">
<a href="#">
<img src="Assets/Images/WebsiteLogo.png" alt="">
</a>
</div>
<div class="webname">
<a href="#">
<h1>Universal Web Designs</h1>
</a>
</div>
</div>
<div class="navigationbar">
<ul>
<li>Home</li>
<li>Designs</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</div>
</div>
Just wrote some newbie css kind of code. I don't know how to fit the image inside the border! I want to fit the water icon inside the circular border! Please run the snippet below
.notice {
position: relative;
margin: 1em;
background: #f3fff2;
padding: 1em 1em 1em 2em;
border-left: 4px solid #DDD;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
}
.notice:before {
position: absolute;
top: 50%;
margin-top: -17px;
left: -17px;
background-color: #DDD;
color: #FFF;
width: 40px;
height: 40px;
border-radius: 100%;
text-align: center;
line-height: 30px;
font-weight: bold;
font-family: Georgia;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}
.info {
border-color: #e4ffe0;
}
.info:before {
content: url('http://www.free-icons-download.net/images/water-droplet-icon-72075.png');
background-color: #e4ffe0;
}
<div class="notice info">
<p>This is a an info notice, it provides feedback of a neutral nature to the user.</p>
</div>
Use content image as a background...it will be easy for you to control the size of image
Stack Snippet
.notice {
position: relative;
margin: 1em;
background: #f3fff2;
padding: 1em 1em 1em 2em;
border-left: 4px solid #DDD;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
}
.notice:before {
position: absolute;
top: 50%;
margin-top: -17px;
left: -17px;
background-color: #DDD;
color: #FFF;
width: 40px;
height: 40px;
border-radius: 100%;
text-align: center;
line-height: 30px;
font-weight: bold;
font-family: Georgia;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}
.info {
border-color: #e4ffe0;
}
.info:before {
content: "";
background: #e4ffe0 url('http://www.free-icons-download.net/images/water-droplet-icon-72075.png') center/20px no-repeat
}
<div class="notice info">
<p>This is a an info notice, it provides feedback of a neutral nature to the user.</p>
</div>
Why not put it in as a background?
.notice {
position: relative;
margin: 1em;
background: #f3fff2;
padding: 1em 1em 1em 2em;
border-left: 4px solid #DDD;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
}
.notice:before {
position: absolute;
top: 50%;
margin-top: -17px;
left: -17px;
background-color: #DDD;
color: #FFF;
width: 40px;
height: 40px;
border-radius: 100%;
text-align: center;
line-height: 30px;
font-weight: bold;
font-family: Georgia;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}
.info {
border-color: #e4ffe0;
}
.info:before {
content: '';
display: inline-block;
background: #e4ffe0 url('http://www.free-icons-download.net/images/water-droplet-icon-72075.png') no-repeat center/contain;
}
<div class="notice info">
<p>This is a an info notice, it provides feedback of a neutral nature to the user.</p>
</div>
I'm having some issues with my code.
I added this button to my HTML page and CSS with the styling of the button class and the hover effect:
.buton4e {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
cursor: pointer;
font-size: 16px;
}
.buton4e:hover {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
font-size: 16px;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 40px 0 rgba(0, 0, 0, 0.19);
}
.intro-header {
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
color: #f8f8f8;
background: url(../img/background.jpg) no-repeat center center;
background-size: cover;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-message>h1 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
font-size: 5em;
}
.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.intro-message>h3 {
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
<!-- Header -->
<header class="intro-header">
<div class="container">
<div class="intro-message">
<br /><br /><br />
<h3>90% of IT companies believe they need to partner to grow.<br /> Join <b>Channeliser</b> - the global network for building IT partnerships.</h3>
<hr class="intro-divider">
<button class="buton4e">JOIN FOR FREE</button>
</div>
</div>
</header>
The problem is that the effect works when I hover the button but there when the button is static it has no styling
*EDIT:
Sorry for not posting all the code.
This should be sufficient for the things I'm trying to modify.
Thanks in advance.
.styledButton {
font-family: Arial;
width: 100px;
height: 50px;
color: black;
background-color: grey;
border: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.styledButton:hover {
color: white;
background-color: black;
}
.styledButton:active {
opacity: 0.5;
}
<button class = "styledButton">Click Me!</button>
This should help. Any click animations I have trouble with.
Hopefully somebody can help me with my issue.
I'm trying to make my own website, but when I try to move one of the three individual boxes(see picture), all three of them move. three boxes issue
[The same issue also happens with the social icons box but I'm less concerned with that section]
I'm hoping someone can take a look at the code and hopefully tell me where I've gone wrong.
My Website Files
You have put position:block in your css. There is no position:block in css. You have to use display property to that. I have change your box div's css to display: inline-block; and made few changes in width too.(using calc).
#import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Source+Sans+Pro');
#import url('https://fonts.googleapis.com/css?family=Poppins');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: url(../css/images/background/backgroundimage.jpg);
}
/* HEADERBAR */
div#headerbar {
width: 100%;
height: 50px;
display: inline-block;
background-color: rgba(237,87,82, 0.65);
font-family: 'Source Sans Pro', sans-serif;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
-webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
}
.leftlogo {
float: left;
margin-top: 12px;
margin-left: 15px;
color: #fff;
text-shadow: 1px 1px 1px #000;
font-size: 20px;
font-family: 'roboto+condensed', sans-serif;
}
.leftlogo span {
font-weight: 300;
color: rgba(237, 87, 82, 0.8);
font-size: 20px;
font-family: 'roboto', sans-serif;
}
.version {
float: right;
margin-top: 14px;
margin-right: 10px;
}
/* CODE TEST */
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 21px/40px;
background-clip: padding-box;
text-align: center;
}
.button {
margin-top: 10px;
font-size: 1em;
padding: 14px;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
font-family: 'Source Sans Pro', sans-serif;
}
.button:hover {
background: rgba(255, 255, 255, 0.3);
border: 3px solid #000;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #000;
border-radius: 5px;
border: 5px solid #126b72;
width: 70%;
position: relative;
transition: all 5s ease-in-out;
color: #fff;
font-family: 'Roboto Condensed', sans-serif;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
div#updatesbox {
width: 900px;
height: 40px;
background-color: #000;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
}
.updatesbox1 {
width: 443px;
height: 30px;
background-color: rgba(255, 255, 255, 0.2);
display:inline-block;
margin-top: 5px;
margin-left: 5px;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
-webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
}
.updatesbox2 {
width: 443px;
height: 30px;
background-color: rgba(255, 255, 255, 0.2);
float: right;
display: inline-block;
margin-top: 5px;
margin-right: 5px;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
-webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
}
.twitter {
float: left;
margin-top: 7px;
margin-left: 40px;
}
.tweet {
color: white;
}
.facebook a {
color: rgba(273, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.facebookicon {
margin-left: 5px;
margin-top: 7px;
}
.steam a {
color: rgba(273, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.steamicon {
margin-left: 5px;
margin-top: 7px;
}
.instagram a {
color: rgba(273, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.instaicon {
margin-left: 5px;
margin-top: 7px;
}
.tweet a {
color: rgba(237, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
/* ALTERNATING TEXT */
#tickertape{
display: block;
margin-left: 600px;
margin-right: auto;
margin-top: 14.5px;
text-align: center;
width:400px;
height:20px;
}
.tickertape {
display: block;
margin-top: 6px;
margin-left: 20px;
margin-right: auto;
color: #000;
}
#subtickertape{
position:absolute;
width:443px;
height:20px;
}
.subtickertapefont{
font:bold 12px Verdana;
text-decoration:none;
color: rgba(237, 87, 84, 0.6);
text-shadow: 2px 2px 2px #000;
}
.subtickertapefont a{
color:white;
text-decoration:none;
}
/* BODY CONTAINER BOX */
div#bodycontainer {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
background-color: rgba(237, 87, 84, 0.3);
width: 90%;
height: 800px;
border: 2px dashed #000;
}
#bodycontainer #insidebox {
display: inline-block;
float: left;
width: calc(32.3% - 7.5px);
height: 500px;
margin: 15px;
margin-top: 70px;
background: rgba(237, 87, 84, 0.2);
border: 2px dashed #000;
}
#bodycontainer #centerbox {
display: inline-block;
float: left;
width: calc(32.3% - 7.5px);
height: 400px;
margin: auto;
margin-top: 200px;
background: rgba(255, 255, 255, 0.2);
border: 2px dashed #000;
}
#rightbox {
display: inline-block;
float: left;
width: calc(32.3% - 7.5px);
height: 710px;
margin: auto;
margin-top: 0px;
background: rgba(237, 87, 84, 0.2);
border: 2px dashed #000;
margin-left: 15px !important;
}
change your stylesheet.css to this and then you can move each box individually. Hope this helps you.