When I try to use "grid-template-columns" and "grid-column-gap" a green line appears under them and says it's not a known CSS 3 property. Also, IE and Firefox cant compile the site well. My IDE is visual studio 2015 here comes my code:
.gridContainer{
display:grid;
grid-template-columns:1fr 1fr 1fr;
padding-top:150px;
grid-column-gap: 50px;
padding-bottom:150px;
}
.grid-item {
background-color: #99e4f5;
border: 1px solid rgba(0, 0, 0, 0.8);
font-size: 17px;
text-align: center;
border: 5px solid #ffffff;
box-shadow: 1px 1px 5px grey;
color: #676363;
Are there any alternatives to using?
thanks,
Saeed
I have two types of circles, one inside of .poi.licensed and one inside of .poi.unlicensed. I am trying to make it so that the .circle inside of .poi.unlicensed has a $tangerine border instead of $turqoise. How can I used the trailing amerpsand to do so in this situation. Keep in mind that there is a lot of other scss that I am excluding that is unrelated, so it has to stay in this general structure.
I was trying something along the lines of the following, but it compiles to .unlicensed #licensed-v-unlicensed .poi .circle {}
$turqoise: #40e8e3;
$tangerine: #ffa975;
#licensed-v-unlicensed {
.poi {
.circle {
border: 5px solid transparentize($turqoise, 0.1);
.unlicensed & {
border: 5px solid transparentize($tangerine, 0.1);
}
#include breakpoint(medium up) {
border-width: 10px;
}
border-radius: 50%;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}
}
}
I ended up using a trick I found on this blog, which was to use #at-root in order to start at the root and target the .unlicensed class. It's a lot more work than I had hoped to do, but the only solution discovered thus far.
$turqoise: #40e8e3;
$tangerine: #ffa975;
#licensed-v-unlicensed {
.poi {
.circle {
border: 5px solid transparentize($turqoise, 0.1);
#at-root #licensed-v-unlicensed .poi.unlicensed .circle {
border: 5px solid transparentize($tangerine, 0.1);
}
#include breakpoint(medium up) {
border-width: 10px;
}
border-radius: 50%;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}
}
}
I've been trying to troubleshoot this for hours but I just don't understand what I'm doing wrong. Maybe it's not me and it's a glitch in codekit? I have built a scss button mixin.
#mixin btn ($background : blue, $textcolor : $white, $size : medium, $fullWidth : false) {
display: inline-block;
width: auto;
border: 0;
border-radius: 4px;
text-align: center;
box-shadow: 0 0 4px rgba(0,0,0,.03), inset 0 1px 2px rgba(102,190,255,.75);
color: $textcolor;
text-decoration: none;
#include font(normal);
#include transition(box-shadow 150ms ease);
&:hover{
box-shadow: 0 0 4px rgba(0,0,0,.03), inset 0 -1px 2px rgba(102,190,255,0.75), inset 0 1px 2px rgba(0,0,0,0.5);
}
&:active{
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(102, 190, 255, .5) inset, 0px 3px 2px rgba(0, 0, 0, 0.5) inset
}
// Background
#if ($background == 'blue') {
/* #include gradient(#1673b9, #125e97); */
background: blue;
} #else if ($background == 'grey') {
/* #include gradient($grey-light, $grey-dark); */
background: grey;
}
// Sizes
#if $size == small {
}
#if $size == medium {
height: 32px;
line-height: 32px;
padding: 0 18px;
font-size: 14px;
}
#if $size == large {
}
#if $fullWidth == true {
width: 100%;
display: block;
}
}
The sizes and full-size conditionals work just fine. But the Background does not. It just doesn't do anything. For now the Scss that uses it is:
<div id="main-header">
Create New Content
Download CSV
</div>
.btn{
&.create{
#include btn(blue);
}
&.download{
#include btn(grey);
}
}
With that, I should be seeing two different color buttons. The markup and Scss will be improved but this is what it is for testing purposes. It seems to work fine here: http://sassmeister.com/gist/da3707a3e03609f8991c
Any help or suggestions will be greatly appreciated. Thanks!
Oh, as I looked over this question, I noticed I pasted the mixin that has #if ($background == 'blue'){ I have tried that without single quotes and without parentheses.
The condition should be
if($background == blue)
Also you have 2 other mixins inside which you should resolve or remove
#include font(normal);
#include transition(box-shadow 150ms ease);
Here's the whole SCSS file:
$white:white;
#mixin btn ($background : blue, $textcolor : $white, $size : medium, $fullWidth : false)
{
&:hover
{
box-shadow: 0 0 4px rgba(0,0,0,.03), inset 0 -1px 2px rgba(102,190,255,0.75), inset 0 1px 2px rgba(0,0,0,0.5);
}
&:active
{
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(102, 190, 255, .5) inset, 0px 3px 2px rgba(0, 0, 0, 0.5) inset;
}
// Background
#if ($background == blue)
{
background: blue;
}
#else if ($background == 'grey')
{
background: grey;
}
// Sizes
#if $size == small
{
}
#if $size == medium
{
font-size: 14px;
height: 32px;
line-height: 32px;
padding: 0 18px;
}
#if $size == large
{
}
#if $fullWidth == true
{
display: block;
width: 100%;
}
}
.btn
{
&.create
{
}
&.download
{
}
}
and its generated CSS:
.btn.create
{
background: blue;
border: 0;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.03), inset 0 1px 2px rgba(102, 190, 255, 0.75);
color: white;
display: inline-block;
font-size: 14px;
height: 32px;
line-height: 32px;
padding: 0 18px;
text-align: center;
text-decoration: none;
width: auto;
}
.btn.create:hover
{
box-shadow: 0 0 4px rgba(0, 0, 0, 0.03), inset 0 -1px 2px rgba(102, 190, 255, 0.75), inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.btn.create:active
{
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(102, 190, 255, 0.5) inset, 0px 3px 2px rgba(0, 0, 0, 0.5) inset;
}
.btn.download
{
border: 0;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.03), inset 0 1px 2px rgba(102, 190, 255, 0.75);
color: white;
display: inline-block;
font-size: 14px;
height: 32px;
line-height: 32px;
padding: 0 18px;
text-align: center;
text-decoration: none;
width: auto;
}
.btn.download:hover
{
box-shadow: 0 0 4px rgba(0, 0, 0, 0.03), inset 0 -1px 2px rgba(102, 190, 255, 0.75), inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.btn.download:active
{
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(102, 190, 255, 0.5) inset, 0px 3px 2px rgba(0, 0, 0, 0.5) inset;
}
I'm using this CSS to create a circular image 220px wide, centered within its container (a 3-column span of an 1180px grid):
.circular-image {
display: block;
margin: 0 auto;
width: 220px;
height: 220px;
border-radius: 110px;
-webkit-border-radius: 110px;
background: url(images/some-image.png);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}
And I know that you can cause images to automatically rescale using:
img {
height: auto;
}
How do I do this for circular images?
What is the exact problem with circular images? If you have problems with the "roundness" of the image you should change the border-radius property to a relative value:
.circular-image {
display: block;
margin: 0 auto;
width: 75%;
height: auto;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: red;
}
Here is a working jsFiddle.
border-radius: 50%; will make an element round for what ever size it is (so long as the width and height are the same).
I have an entertainment blog with a lot of pictures. Can someone please help me with a code that auto-numbers the pictures inside a post? (eg: www.chive.com, www.acidcow.com)
This is my CSS for pictures if it helps for anything...
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 0px solid $(image.border.color);
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);}