I've been trying to make this responsive. When I shrink the size of the window or look at it on a phone, I would like it to put the second column in a new row so I have 3 rows and each has 100% of it.
Also, there might be a better way of doing this where you don't use tables so if you could suggest something else I would be grateful.
PHP
<!DOCTYPE html>
<html lang="hr">
<head>
<?php
$title = "Foto | Album";
$description = "Web aplikacija za besplatno dijelenje fotografija";
$keywords = "dijelenje fotografija, komentiranje, kategorije";
include "includes/head.php";
?>
</head>
<body>
<div class="red">
<?php include "includes/header.php"; ?>
</div>
<div class="red">
<table class="t-kolona-12 d-kolona-12">
<tr>
<td id="table1"> <?php include "includes/navigation.php"; ?> </td>
<td rowspan="2"><section id="sadrzaj" class="t-kolona-9 d-kolona-12">
<!--sadržaj-->
</section>
</tr>
<tr>
<td> <?php include "includes/aside.php"; ?></td>
</tr>
</table>
</div>
<div class="red">
<?php include "includes/footer.php"; ?>
</div>
</body>
</html>
CSS
body{
margin: 0;
}
#zaglavlje{
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
height: 310px;
background: url(../images/slike/header_img1.jpg) no-repeat center center/cover;
display: flex;
justify-content: center;
align-items: center;
}
#zaglavlje h1{
color: #ffffff;
margin: 0;
font-size: 50px;
text-shadow: 2px 2px 2px black;
}
#navigacija ul{
list-style-type: none;
margin: 0;
padding: 0;
padding: 0;
}
#navigacija li{
margin-bottom: 7px;
background-color: #d8dde2;
text-align: center;
box-shadow: 0 1px 3px rga(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
#navigacija a{
color: #000000;
text-decoration: none;
display: block;
padding: 10px;
}
#navigacija li:hover{
background-color: #c7cbcf;
}
#sadrzaj{
box-shadow: 0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24);
margin-bottom:20px;
min-height:500px;
max-height:2000px;
overflow:auto;
}
#prijava form{
padding: 15px;
background-color: #d8dde2;
color: #000000;
box-shadow: 0 1px 3px rga(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
#prijava h2{
text-align: center;
margin: 0 0 10px 0;
}
#prijava label{
display: block;
width: 90%;
margin: auto;
}
#prijava input[type="text"], #prijava input[type="password"]{
display: block;
width: 90%;
margin: auto;
}
#prijava input[type="submit"]{
display: block;
margin: auto;
color: #000000;
background-color: #d8dde2;
font-size: 16px;
}
#podnozje{
background-color: #bbbfc4;
color: #000000;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rga(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
#table1{
width: 300px;
}
/* responzivnost */
img, video, iframe, object{
max-width: 100%;
}
#media(min-width: 700px){
#navigacija li{
text-align: left;
}
}
#media(min-width: 750px){
#zaglavlje{
background: url(../images/slike/header_img_mobile1.jpg) no-repeat center center/cover;
}
}
/* layout */
*{
box-sizing: border-box;
}
.red:after{
content: "";
clear: both;
display: block;
}
/* mobile */
[class*="kolona"]{
float: left;
padding: 10px;
width: 100%;
}
/* tablet*/
#media (min-width:700px){
.t-kolona-1{width:8.33%;}
.t-kolona-2{width:16.66%;}
.t-kolona-3{width:25%;}
.t-kolona-4{width:33.33%;}
.t-kolona-5{width:41.66%;}
.t-kolona-6{width:50%;}
.t-kolona-7{width:58.33%;}
.t-kolona-8{width:66.66%;}
.t-kolona-9{width:75%;}
.t-kolona-10{width:83.33%;}
.t-kolona-11{width:91.66%;}
.t-kolona-12{width:100%;}
}
/* desktop */
#media (min-width:1100px){
.d-kolona-1{width:8.33%;}
.d-kolona-2{width:16.66%;}
.d-kolona-3{width:25%;}
.d-kolona-4{width:33.33%;}
.d-kolona-5{width:41.66%;}
.d-kolona-6{width:50%;}
.d-kolona-7{width:58.33%;}
.d-kolona-8{width:66.66%;}
.d-kolona-9{width:75%;}
.d-kolona-10{width:83.33%;}
.d-kolona-11{width:91.66%;}
.d-kolona-12{width:100%;}
}
Related
I would like to add a badge to my navbar. It should look like the one in the image below.
My current Approach
I use two divs for this. One above and one below. The lower one should do the rounding.
My approach works not so good and I find it more hacky as good.
Question
I wonder if there is a better, cleaner way? Can somebody help me?
Thanks in advance, Max
* {
margin: 0;
padding: 0;
font-family: Verdana,Geneva,sans-serif;
}
body {
background-color: #f1f1f1;
}
nav {
height: 80px;
background-color: white;
padding:10px 80px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.badge-top {
background: #ccc;
margin-top:-10px;
height:25px;
padding-top:20px;
padding-left:5px;
padding-right:5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-size:0.8rem;
font-weight:bold;
width:30px;
text-align: center;
}
.badge-bottom {
background: #ccc;
color:#ccc;
border-radius:50px;
margin-top:-10px;
}
.badge-bottom:after {
content: '.';
}
<nav>
<div>logo</div>
<div>
<button class="btn nav-btn">SUBMIT</button>
</div>
<div>
<div class="badge-top">123</div>
<div class="badge-bottom"></div>
</div>
</nav>
Really no reason for multiple elements. Note that I've put box-sizing: border-box on your stylesheet. This makes sizing calculations much easier by including padding, etc. Most layout libraries do this.
* {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, sans-serif;
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
}
nav {
height: 80px;
background-color: white;
padding: 10px 80px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.badge {
background: #ccc;
width: 40px;
height: 60px;
padding-top: 26px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-size: 0.8rem;
font-weight: bold;
text-align: center;
border-radius: 0 0 20px 20px;
}
<nav>
<div>logo</div>
<div>
<button class="btn nav-btn">SUBMIT</button>
</div>
<div class="badge">
123
</div>
</nav>
div {
position: relative;
width: 2.5rem;
height: 4.5rem;
border-bottom-left-radius: 1.25rem;
border-bottom-right-radius: 1.25rem;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4);
background-color: #bfbfbf;
}
span {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translate(-50%);
color: #222;
font-weight: bold;
}
<div>
<span>420</span>
</div>
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>
I have this page which is a page for showing a product and what I'm trying to do is to have the image of the product on the right side and on the left side having the name, price and add to cart button. I use vertical align on img so the text goes to top but doing this means I have to use display inline-block so I can't use block to make the texts go one every line. I also tried to use <br> but it makes the text go under the image.
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
display: inline-block;
}
<body>
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name">name of product</div><br>
<div class="price">$59.99</div>
</article>
</body>
And this is what I'm trying to make:
.image{
margin: 0 50px;
float: right;
border: 1px solid black;
width: 100px;
height: 100px;
}
.text{
float: right;
}
<body>
<span class="image">IMAGE</span>
<span class="text">text</span><br>
<span class="text">text</span>
</body>
instead of adding outside div , add it inside.
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
display: inline-block;
}
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name">name of product<br><div class="price">$59.99</div></div><br>
</article>
just style it
* {
margin: 0;
font-family: Iransans;
box-sizing: border-box;
}
* a:link {
text-decoration: none;
}
body {
background-color: #f5f5f5;
height: 100%;
min-height: 100%;
}
article{
background-color: #ffffff;
width: 85%;
padding: 20px 20px;
text-align: right;
direction: rtl;
border-radius: 3px;
margin: 20px auto;
-webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
}
img{
border: 1px solid #d9d9d9;
display: inline-block;
vertical-align: top;
}
.name{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 5px 50px;
padding: 0 10px;
border-right: 5px solid #13bf19;
}
.price{
font-size: 15px;
font-weight: normal;
}
<body>
<article>
<img src="https://images.food52.com/8yjdBI07757aOjYnJJNPiI7XsPA=/375x0/fca306c8-d23b-46b6-8ce0-c0744830f596--2018-0716_sin_porcelain-paper-mug_silo_ty-mecham_001_1-.jpg" width="100" height="100">
<div class="name"><h2>name of product</h2><h3 class="price">$59.99</h3></div>
</article>
</body>
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.
I have div that have box-shadow on it and have also div:hover box-shadow.
When i check results at JSfiddle its all fine.
But when i check the results at my site i get the box-shadow right side removed:
Here is the Live code: JSfiddle
And here is the Code:
.nitz {
font-family: sans-serif;
font-size: 0;
width: 300px;
height: 76px;
direction: rtl;
background-color: #e4e5e8;
border-radius: 5px;
display: block;
box-shadow: inset rgba(255, 255, 255, 0.75) 0px 0px 0px 1000px,
inset rgba(255, 255, 255, 0.6) 0px 1px 0px,
inset rgba(255, 255, 255, 0.4) 0px 0px 0px 1px,
rgba(0, 0, 0, 0.2) 0px 1px 3px;
}
.nitz:hover {
-webkit-box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
-moz-box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
box-shadow: 0px 0px 5px 6px rgba(251, 219, 90, 1);
background-color: #f8f8f9;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.boxtitle1 {
font-weight: bold;
text-align: right;
font-size: 14px;
padding-bottom: 3px;
}
.boxtitle2 {
text-align: right;
font-size: 14px;
}
.Cellbox2 {
display: inline-block;
margin-right: 15px;
margin-bottom: 15px;
vertical-align: top;
margin-top: 20px;
}
<a href="https://www.google.com" rel="">
<div class="nitz">
<div class="Cellbox2">
<div class="boxtitle1">That is a big test</div>
<div class="boxtitle2">That is a small one</div>
</div>
</div>
</a>
The over Divs are:
ipsWidget ipsWidget_vertical ipsBox
ipsWidget ipsWidget_vertical ipsBox
and
ipsList_reset
above all that divs.
The css of that divs are:
/* Blocks - styles for various widgets */
.ipsWidget {
position: relative;
padding: 0;
background: #fff;
}
.ipsWidget.ipsWidget_vertical {
margin-top: 15px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_title {
padding: 10px;
margin: 0;
font-size: 14px;
font-weight: 400;
position: relative;
color: #fff;
background: {theme="widget_title_bar"};
border-radius: 2px 2px 0px 0px;
}
.ipsWidget_inner{
padding: 10px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_inner {
color: #575757;
}
.ipsWidget.ipsWidget_horizontal {
padding: 0 0 10px 0;
}
.ipsWidget.ipsWidget_horizontal:not( .ipsWidgetHide ) + .ipsWidget {
margin-top: 10px;
}
.ipsWidget.ipsWidget_horizontal .ipsWidget_title {
font-weight: 400;
margin-bottom: 10px;
background: #f5f5f5;
padding: 10px;
}
.ipsWidget.ipsWidget_vertical .ipsWidget_inner {
color: #575757;
}
.ipsWidget.ipsWidget_horizontal .ipsTabs {
margin: -5px 0 5px 0;
}
.ipsWidget.ipsWidget_horizontal .ipsTabs_panel {
background: #fff;
margin: 0;
}
.ipsWidget_columns > [class*="ipsGrid"] {
margin-bottom: 0;
border-bottom: 0;
}
html[dir="ltr"] .ipsWidget_columns > [class*="ipsGrid"] {
border-right: 1px solid rgba(0,0,0,0.1);
padding-right: 10px;
}
html[dir="rtl"] .ipsWidget_columns > [class*="ipsGrid"] {
border-left: 1px solid rgba(0,0,0,0.1);
padding-left: 10px;
}
html[dir="ltr"] .ipsWidget_columns > [class*="ipsGrid"]:last-child {
border-right: 0;
}
html[dir="rtl"] .ipsWidget_columns > [class*="ipsGrid"]:last-child {
border-left: 0;
}
.ipsWidget_horizontal .ipsWidget_statsCount {
font-size: 22px;
line-height: 32px !important;
font-weight: 300;
}
.ipsWidget_horizontal .ipsWidget_stats {
margin-top: 15px;
}
.ipsWidget .ipsTabs_small {
padding: 0;
background: transparent;
}
.ipsWidget .ipsTabs_small .ipsTabs_item:not( .ipsTabs_activeItem ) {
color: rgba(50,50,50,0.6);
border-bottom: 1px solid transparent;
}
.ipsWidget .ipsTabs_small .ipsTabs_activeItem {
border-bottom: 1px solid rgba(0,0,0,0.25);
}
.ipsWidget .ipsDataItem_title {
font-size: 13px;
}
.ipsWidget.ipsWidget_primary {
background: #262e33;
}
.ipsWidget.ipsWidget_primary h3 {
color: #fff;
}
html[dir="ltr"] .ipsWidget_latestItem {
margin-left: 85px;
}
html[dir="rtl"] .ipsWidget_latestItem {
margin-right: 85px;
}
.ipsWidgetBlank {
margin-top: 16px;
padding-top: 30px;
}
I'm pretty sure the problem does not come from the code you linked.
Rather i guess that your button is on the border of a overflow : hidden div and the shadow falls outshide that div.
Or there is another invisible div beside the button hidding the shadow.
Look at that snippet and notice why part of the shadow doesn't show : The button is on the top right corner of the parent (".test") div.
I cannot check your code but i guess the problem comes from a parent div (maybe because you haven't fixed a width and it is stopping right after the button)
.test {
display: block
width: 400px;
height: 200px;
overflow: hidden;
}
.nitz {
font-family:sans-serif;
font-size: 0;
float: right;
width:300px;
height:76px;
direction:rtl; background-color:#e4e5e8;border-radius: 5px;
display:block;
box-shadow: inset rgba(255,255,255,0.75) 0px 0px 0px 1000px,
inset rgba(255,255,255,0.6) 0px 1px 0px,
inset rgba(255,255,255,0.4) 0px 0px 0px 1px, rgba(0,0,0,0.2) 0px 1px 3px;
}
.nitz:hover {-webkit-box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
-moz-box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
box-shadow: 0px 0px 5px 6px rgba(251,219,90,1);
background-color:#f8f8f9;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.boxtitle1 {font-weight: bold;text-align:right; font-size:14px; padding-bottom:3px;}
.boxtitle2 {text-align:right; font-size:14px;}
.Cellbox1
{width:50px; height:50px; display:inline-block; margin-bottom:15px; margin-right:15px; margin-top:15px; }
.Cellbox2
{display:inline-block; margin-right:15px; margin-bottom:15px; vertical-align:top; margin-top:20px;}
<div class="test">
<a href="https://www.google.com" rel="">
<div class="nitz">
<div class="Cellbox2">
<div class="boxtitle1">That is a big test</div>
<div class="boxtitle2">That is a small one</div>
</div>
</div>
</a>
</div>
You can add some padding to the parent "anchor" tag with some classname
.some-class-name {
padding: 0 15px;
display: inline-block;
box-sizing: border-box;
}