I came across this amazing looking 404 error page https://codepen.io/dsenneff/pen/mjZgmN
I followed the tutorial here to make the SVG mobile responsive but I couldn't get it to work.
Any hint you can provide would highly be appreciated.
Thanks
CSS
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900");
body,
html {
margin: 0;
padding: 0;
font-size: 16px;
-webkit-font-smoothing: antialiased;
background-color: #09334f;
position: relative;
}
#yetiSVG {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: inline-block;
}
#lightSVG {
position: absolute;
top: -24rem;
left: 0;
overflow: visible;
display: inline-block;
}
.content {
padding: 5rem 3rem 0 25rem;
position: relative;
z-index: 10;
font-family: "Source Sans Pro", sans-serif;
color: #fff;
}
.content h3 {
margin: 0 0 0.8rem;
font-size: 2.625rem;
font-weight: 900;
line-height: 120%;
}
.content p {
font-size: 1.25rem;
font-weight: normal;
line-height: 150%;
color: #d1e2ed;
}
.content p span {
text-decoration: line-through;
}
svg {
max-width: 100%;
}
.svg-container {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
padding-bottom: 100%;
/* vertical-align: middle; */
/* overflow: hidden; */
}
Related
I seem to be having a weird problem when using border-radius and overflow: hidden together, please see the picture for my problem.
As you can see in the bottom right the image doesn't expand to the very edge of the div and a little curve is visible, any help will be much appreciated.
I also have a live version here, problem can be seen near the bottom of the page: http://hasky.infinityfreeapp.com/
Image
.content__card {
position: relative;
margin: 1em 0;
width: 80em;
max-width: 80%;
min-height: 35em;
border-radius: 0.8em;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
overflow: hidden;
border: none;
}
.content__card .info {
text-align: left;
margin: 1.5em 3em;
height: auto;
}
.content__card .info h2 {
font-family: "DemiBold", sans-serif;
}
.content__card .info p {
font-size: clamp(1rem, 2vw, 1.4rem);
font-family: "Medium", sans-serif;
margin: 1.5em 0;
}
.content__card a {
position: absolute;
bottom: 2em;
border-radius: 0.8em;
background: #fff;
color: #111;
text-decoration: none;
font-weight: 700;
z-index: 3;
padding: 0.6em 1.8em;
font-size: clamp(1rem, 3vw, 1.4rem);
font-family: "Medium", sans-serif;
}
.content__card img {
position: absolute;
right: 0;
bottom: 0;
width: 30em;
}
.content__card__three {
background: #7D44FD;
color: #fff;
}
<div class="content__card content__card__three span-2">
<div class="info">
<h2>Sekite mūsu</h2>
<h2>Youtube kanalą!</h2>
Youtube
</div>
<img src="https://i.imgur.com/5ZXj6fP.png">
</div>
I'm not sure what your problem is exactly, but this is the solution I can provide depending on what I understood.
added the basic styling and also remove some unnecessary code.
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #000;
}
.content__card {
position: relative;
margin: 1em 0;
max-width: 90%;
min-height: 35em;
border-radius: 0.8em;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
overflow: hidden;
}
.content__card .info {
text-align: left;
margin: 1.5em 3em;
width: 20rem;
}
.content__card .info h2 {
font-family: "DemiBold", sans-serif;
}
.content__card .info p {
font-size: clamp(1rem, 2vw, 1.4rem);
font-family: "Medium", sans-serif;
margin: 1.5em 0;
}
.content__card a {
position: absolute;
bottom: 2em;
border-radius: 0.8em;
background: #fff;
color: #111;
text-decoration: none;
font-weight: 700;
z-index: 3;
padding: 0.6em 1.8em;
font-size: clamp(1rem, 3vw, 1.4rem);
font-family: "Medium", sans-serif;
}
.content__card img {
position: absolute;
right: 0;
bottom: 0;
width: 30em;
}
.content__card__three {
background: #7d44fd;
color: #fff;
}
<div class="content__card content__card__three span-2">
<div class="info">
<h2>Sekite mūsu</h2>
<h2>Youtube kanalą!</h2>
Youtube
</div>
<img src="https://i.imgur.com/5ZXj6fP.png">
</div>
I need a 2nd pair of eyes. LESS keeps giving me a parse error, but I can't find it. I've broken the code down in sections and have removed/added things line-by-line with no luck. I've inherited this code from another teamj.
I suspect that they were using an older version of LESS, but they gave me no docs.
Any and all help is appreciated!
.panel-cards {
overflow-y: visible;
overflow-x: hidden;
.deck {
display: flex;
overflow: visible;
overflow-x: scroll;
//-webkit-overflow-scrolling: touch; //conflict with modal popups (and unnecessary?)
&:after {
content: '';
width: 1px;
height: 100px;
display: block;
flex-shrink: 0;
}
}
article {
flex-shrink: 0;
display: flex;
flex-direction: column;
width: unit(294/4.14,vw);
margin: 0 unit(15/4.14,vw) unit(30/4.14,vw) unit(15/4.14,vw);
.image {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
.box-sizing(border-box);
padding-top: 71%;
overflow: hidden;
max-width: 100%;
&.contain {
background-size: contain;
}
}
.copy {
.box-sizing(border-box);
.copy {
span {
width: 100%;
float: left;
p{
margin: 0px 0px 8px 0px;
line-height: 120%;
font-family: 'Roboto', Helvetica, Arial, sans-serif;
font-weight: 600;
text-align: left;
vertical-align: baseline;
}
}
h3 + p {
margin-top: 0;
}
p {
margin: unit(18/4.14,vw) 0;
font-weight: #medium;
line-height: 117%;
}
a:not(.btn) {
color: #green;
font-weight: #bold;
&:hover {
color: #green;
}
}
}
}
} //end panel-cards
Correct these: font-weight: #medium;
color: #green;
font-weight: #bold;
color: #green; and also, "}" has a mismatch between open and closes.
Is this what you're looking for?
.panel-cards {
overflow-y: visible;
overflow-x: hidden;
}
.panel-cards .deck {
display: flex;
overflow: visible;
overflow-x: scroll;
}
.panel-cards .deck:after {
content: '';
width: 1px;
height: 100px;
display: block;
flex-shrink: 0;
}
.panel-cards article {
flex-shrink: 0;
display: flex;
flex-direction: column;
width: 71.01449275vw;
margin: 0 3.62318841vw 7.24637681vw 3.62318841vw;
}
.panel-cards article .image {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
box-sizing: border-box;
padding-top: 71%;
overflow: hidden;
max-width: 100%;
}
.panel-cards article .image.contain {
background-size: contain;
}
.panel-cards article .copy {
box-sizing: border-box;
}
.panel-cards article .copy .copy span {
width: 100%;
float: left;
}
.panel-cards article .copy .copy span p {
margin: 0px 0px 8px 0px;
line-height: 120%;
font-family: 'Roboto', Helvetica, Arial, sans-serif;
font-weight: 600;
text-align: left;
vertical-align: baseline;
}
.panel-cards article .copy .copy h3 + p {
margin-top: 0;
}
.panel-cards article .copy .copy p {
margin: 4.34782609vw 0;
font-weight: medium;
line-height: 117%;
}
.panel-cards article .copy .copy a:not(.btn) {
color: green;
font-weight: bold;
}
.panel-cards article .copy .copy a:not(.btn):hover {
color: green;
}
My jekyll sight had been running fine for a while until I add a blog post, which works perfectly locally, but then I get an error via email from GitHub saying
SCSS file Desktop/my-blog/css/style.scss has an error on line 1: File to import not found or unreadable: ../_sass/bootstrap. Load path: /hoosegow/.bundle/ruby/2.4.0/gems/jekyll-theme-primer-0.4.0/_sass.
I went to report this as an issue on the theme I was using, but I noticed that others were having similar build issues with Jekyll. Here's the link to that thread
Also, here is my style.css file, which seems to be causing the error.
---
---
#import '../_sass/bootstrap';
#import '../_sass/syntax-highlighting';
%oswald { font-family: 'Oswald', sans-serif; }
%roboto { font-family: 'Roboto Condensed', sans-serif; }
body {
#extend %roboto;
font-size: 18px;
line-height: 30px;
padding-top: 51px;
-webkit-font-smoothing: antialiased;
}
p {
margin-bottom: 30px;
}
section, header, footer, main, article, nav, aside { position: relative; }
a {
outline: none !important;
text-decoration: none !important;
transition: all 225ms ease;
color: rgb(19, 100, 214);
&:hover { color: #6165FF; }
}
.btn {
text-transform: uppercase;
font-weight: 400;
#extend %oswald;
}
h1, h2, h3, h4, h5, h6 { #extend %oswald; }
::selection {
background: #086AFF;
color: #fff;
}
nav.navbar {
margin: 0;
a {
text-transform: uppercase;
font-size: 16px;
}
.navbar-brand {
text-transform: none;
i {
transition: inherit;
color: rgb(19, 100, 214);
transform: scale(1);
}
&:hover i {
color: rgb(19, 100, 214);
transform: scale(1.35);
}
}
}
.title-group {
text-align: center;
padding: 0 15px;
margin: 50px 0 100px;
p {
max-width: 800px;
margin: 25px auto 0;
}
}
h1.special {
position: relative;
text-align: center;
overflow: hidden;
margin: 4;
text-transform: uppercase;
#extend %oswald;
font-size: 69px;
line-height: 69px;
font-weight: 700;
color: rgb(19, 100, 214);
span {
display: inline-block;
position: relative;
padding: 0 15px;
max-width: 1000px;
&:before, &:after {
content: '';
position: absolute;
display: block;
height: 1px;
background: #e8e8e8;
width: 99999999px;
top: 50%;
transform: translateY(-50%);
}
&:before { left: 100%; }
&:after { right: 100%; }
}
}
.tile {
position: relative;
box-shadow: 0 0.15em 0.35em 0 rgba(0, 0, 0, 0.135);
margin-bottom: 125px;
.inner-guts { padding: 50px; }
h2 {
margin: 0;
font-size: 100px;
font-weight: 400;
letter-spacing: -0.05em;
line-height: 100px;
}
.featurette {
position: relative;
display: block;
overflow: hidden;
margin-bottom: 15px;
width: 100%;
height: 550px;
background-color: #e8e8e8;
.img {
background-size: cover;
background-position: 50% 0;
background-repeat: no-repeat;
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 225ms ease;
transform: scale(1);
&:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
content: '';
background: #000;
opacity: 0.4;
transition: all 225ms ease;
}
}
iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&:hover {
.img {
transform: scale(1.2);
&:before {
opacity: 0.2;
}
}
}
}
.excerpt {
font-size: 35px;
font-weight: 300;
line-height: 49px;
color: #484848;
p {
margin: 0;
}
}
.tags {
position: absolute;
left: 0;
top: 100%;
margin-top: 15px;
span {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
text-transform: uppercase;
#extend %oswald;
}
}
.read-more {
margin-top: 50px;
width: 100%;
max-width: 175px;
position: relative;
padding-right: 75px;
i {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-54%);
font-size: 31px;
line-height: 100%;
}
}
}
aside {
font-size: 17px;
color: #525252;
margin: 16px 0;
#extend %oswald;
span {
text-transform: uppercase;
margin: 0 5px;
}
}
.site-footer {
margin-top: 200px;
}
.pagination-wrap {
text-align: center;
}
.topper {
height: 500px;
position: relative;
.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
}
pre {
margin: 75px -100px;
}
#media only screen and (max-width : 991px) {
pre {
margin-left: 0;
margin-right: 0;
}
}
#media only screen and (max-width : 480px) {
.tile .featurette, .topper {
height: 300px;
}
h1.special,
.tile h2 {
font-size: 40px;
line-height: 44px;
}
.tile .inner-guts {
padding: 15px 25px;
}
.tile .excerpt {
font-size: 22px;
line-height: 35px;
}
}
Any advice is extremely helpful!
The error is telling you that the file bootstrap.scss can't be imported; either because it isn't in the location specified (the theme /_scss/ directory) or because it isn't called bootstrap.scss. The link you posted seems completely unrelated.
I'm showing icons from an icon font inside rounded containers.
This is the web page
This is the CSS for the icons
.icon .circle:before{
font-family: "PlayAgenda", sans-serif !important;
-webkit-font-smoothing: antialiased;
-o-transform: scale(1);
text-rendering: optimizeLegibility;
font-style: normal;
margin: 0 auto;
}
.icon .circle {
display: inline-block;
font-weight: normal;
border-radius: 50%;
width: 1px;
height: 1px;
padding: 32px;
margin: 0;
overflow: hidden;
font-size: 57px;
text-align: center;
position: relative;
}
.icon .circle:before{
color: #FFFFFF;
position: absolute;
margin-top: -0.4em;
margin-left: -25px;
display: block;
width: 50px;
top: 50%;
}
.icon.console .circle:before{ content: 'A'; }
.icon.board .circle:before{ content: 'G'; }
.icon.card .circle:before{ content: 'C'; }
.icon.war .circle:before{ content: 'B'; }
.icon.gdr .circle:before{ content: 'E'; }
.icon.console-background .circle{ background-color: #009EDB; }
.icon.board-background .circle { background-color: #8CC63E; }
.icon.card-background .circle{ background-color: #7F3F98; }
.icon.war-background .circle { background-color: #F04F38; }
.icon.gdr-background .circle{ background-color: #FAA619; }
I want to achieve this result
But on Android and OSX I get this
Could someone help me figure how to fix this?
How can you make absolutely positioned element appear under static element.
Z-index doesn't seem to work. The green box should be above the line (will be white).
http://jsfiddle.net/matthewabrman/pbL52gtj/
html:
<h3 class="line"><span>Lorem Ipsum</span></h3>
css:
h3.line {
font-size: 24px;
display: block;
font-weight: 300;
text-align: center;
margin:30px;
position: relative;
}
h3.line:after {
content: '';
position: absolute;
left: 0;
top: 15px;
width: 100%;
height: 1px;
background-color: #e0e0e0;
}
h3.line > span {
background-color: #afa;
padding: 10px 20px;
}
Try this. Hope you are trying to get this FIDDLE
h3.line {
font-size: 24px;
display: block;
font-weight: 300;
text-align: center;
margin:30px;
position: relative;
z-index:-1;
}
h3.line:after {
content: '';
position: absolute;
left: 0;
top: 15px;
width: 100%;
height: 1px;
background-color: #e0e0e0;
}
h3.line > span {
background-color: #afa;
padding: 10px 20px;
position: relative;
z-index:1;
}
OR FIDDLE
h3.line {
font-size: 24px;
display: block;
font-weight: 300;
text-align: center;
margin:30px;
position: relative;
}
h3.line:after {
content: '';
position: absolute;
left: 0;
top: 15px;
width: 100%;
height: 1px;
background-color: #e0e0e0;
z-index:-1;
}
h3.line > span {
background-color: #afa;
padding: 10px 20px;
}