I want to place a child element vertically with the parent element
<!DOCTYPE html>
<html>
<head>
<title>Jajal</title>
<style type="text/css">
#body {
font-family: sans-serif, arial, 'Roboto';
}
#outer {
width: 280px;
background-color: white;
height: 253px;
background-color: #f0f0f0;
}
.imgbox {
height: 174px;
width: 270px;
overflow: hidden;
display: table;
margin: 0 auto;
background-color: black;
text-align: center;
}
.img_content {
max-height: 174px;
max-width: 270px;
margin: 0 auto;
vertical-align: middle;
display: table-cell;
}
.titlebox {
max-width: 270px;
text-align: center;
}
.title {
font-weight: 900;
font-size: 14px;
}
</style>
</head>
<body>
<div id="outer">
<div class="imgbox">
<img class="img_content" src="http://lorempixel.com/700/100" alt="coba">
</div>
<div class="titlebox">
<p class="title">Lorem ipsum Amet</p>
</div>
</div>
</body>
</html>
Why the img_content class doesn't place verticaly middle with imgbox class when the image is to width?
Add following CSS:
.imgbox {
height: 174px;
width: 270px;
overflow: hidden;
margin: 0 auto;
background-color: black;
text-align: center;
position: relative;
}
.img_content {
max-height: 174px;
max-width: 270px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
Use css3 flexbox. Following css should be added on parent element.
.parent {
justify-content: center;
align-items: center;
display: flex;
}
#body {
font-family: sans-serif, arial, 'Roboto';
}
#outer {
width: 280px;
background-color: white;
height: 253px;
background-color: #f0f0f0;
}
.imgbox {
justify-content: center;
align-items: center;
display: flex;
height: 174px;
width: 270px;
overflow: hidden;
margin: 0 auto;
background-color: black;
text-align: center;
}
.img_content {
max-height: 174px;
max-width: 270px;
}
.titlebox {
max-width: 270px;
text-align: center;
}
.title {
font-weight: 900;
font-size: 14px;
}
<div id="outer">
<div class="imgbox">
<img class="img_content" src="http://lorempixel.com/700/100" alt="coba">
</div>
<div class="titlebox">
<p class="title">Lorem ipsum Amet</p>
</div>
</div>
There are a lo of ways you could do this. You could wrap he img tag in a div with class of say, wrapper. then the wrapper div would have styling like so :
.wrapper {
vertical-align: middle;
display: table-cell;
}
, and remove the display:table-cell, and vertical-align:middle from the image
Working fiddle using another way if you dont wan any changes in the existing CSS
https://jsfiddle.net/mfkxq728/
Also,you could use either of flex(Browser support might be a concern) or the good old relative-absolute position with a translate-Y. The translate-Y would however need browser prefixes for consistent performance.
Cheers !!
Related
I am trying to create this simple landing page where there is one row, which contains two <div class="image">, which are container div's which hold the image, the image title, and the image description.
I am trying to get it to be responsive so that when a user on mobile device access the page, the two images will be on one column as opposed to one row. I have started over and over adjusting CSS trying to get what I want, and the closest I have gotten is the example provided in the below snippet.
CSS Stylings I have tried but failed:
#media (min-width: ){} to change max/min size when the screen goes above/below certain pixels
Set a minimum size for the image itself
Tried the same for the container of the image
I couldn't get any of the above to make my landing page responsive.
.container1 {
display: flex;
justify-content: center;
position: relative;
margin-left: 160px;
margin-right: 180px;
}
.container1 p {
text-align: center;
margin: 0;
padding-top: -10px;
}
.container1 h3 {
margin: 10px;
padding: 0;
}
.armycontracts {
width: 100%;
text-align: center;
padding-left: 20px;
}
.armycontracts h3 {
font-size: 15px;
font-weight: bold;
}
.usmccontracts h3 {
font-size: 15px;
font-weight: bold;
}
.usmccontracts {
width: 100%;
margin: 0 auto;
text-align: center;
}
.landinghead {
text-align: center;
font-size: 25px;
font-weight: bold;
}
.projectInfo {
text-align: center;
font-size: 15px;
margin-top: 0px;
}
#contentRow {
margin-top: -50px;
}
.container {
display: flex;
justify-content: center;
position: relative;
}
.ms-core-pageTitle {
display: none;
}
.row-one {
width: 100%;
text-align: center;
padding: 20px;
}
#media (min-width: 400px) {
.row-one {
display: flex;
justify-content: center;
}
}
.image {
position: relative;
width: 100%;
max-width: 400px;
min-width: 200px;
min-height: auto;
margin-left: 40px;
margin-right: 40px;
padding: 20px;
height: auto;
}
.image__img {
display: block;
width: 100%;
height: 100%;
border-radius: 5px;
}
.image__overlay {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-family: 'Quicksand', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s;
border-radius: 0px;
}
.image__overlay>* {
transform: translateY(20px);
transition: transform 0.25s;
}
.image__overlay:hover {
opacity: 1;
}
.image__overlay:hover>* {
transform: translateY(0);
}
.image__title {
font-size: 2em;
font-weight: bold;
}
.image__description {
font-size: 1.25em;
margin-top: 0.25em;
}
#contentRow {
overflow-y: hidden;
}
#sideNavBox {
DISPLAY: none
}
#contentBox {
margin-left: 0px
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background-color: #ffffff;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects Landing Page</title>
</head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<body>
<h3 class="landinghead">Projects Landing Page</h3>
<p class="projectInfo">Here you will find a collection of Active/Ongoing Projects</p>
<div class="row-one">
<div class="image">
<a href="https://www.google.com" target="_blank">
<img class="image__img" src="https://api.army.mil/e2/c/images/2021/01/26/4c5cde5d/max1200.jpg" alt="Army" />
<div class="image__overlay">
<div class="image__title">Team 1 Contracts</div>
<p class="image__description">
- Contr. 1 <br>
- Contr. 2 <br>
- Contr. 3 <br>
</p>
</div>
</a>
</div>
<div class="image">
<a href="https://www.google.com" target="_blank">
<img class="image__img" src="https://media.defense.gov/2021/Feb/01/2002574582/-1/-1/0/210124-M-WH885-1032.JPG" alt="Usmc" />
<div class="image__overlay">
<div class="image__title">Team 2 Contracts</div>
<p class="image__description">
- Contr. 1 <br>
- Contr. 2 <br>
- Contr. 3
</p>
</div>
</a>
</div>
</div>
</body>
.row-one{
width: 80%;
text-align: center;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.image{
flex: 1 45%;
position: relative;
width: 100%;
max-width: 400px;
min-width: 200px;
margin-left: 40px;
margin-right: 40px;
padding: 20px;
height: auto;
}
This works. JSFiddle
You can use 'flex-direction' to achieve what you want.
This page has pretty good information about it.
https://css-tricks.com/almanac/properties/f/flex-direction/
Apply a flex-direction to your 'row-image' class. Set it to 'column' when you want your elements to stack, set it to 'row' when the elements should flow in a line.
I'm very new to website development/design so I've been struggling with getting a top row menu to work on my site. Here's the code I have so far. Any suggestions for things that might fit with my theme? I'm going for a dark green/blurry style, I've gotten one of the boxes to work however when I try to insert something to act as a background for a centered nav-bar, it doesn't even show up.
#import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Montserrat+Alternates:wght#500&display=swap');
#import url(https://fonts.googleapis.com/css?family=Lato);
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
section
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: url(https://media.discordapp.net/attachments/692954070180298767/807238617075679252/unknown.png);
background-attachment: fixed;
background-size: cover;
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
}
section .box
{
position: relative;
max-width: 700px;
padding: 50px;
box-shadow: 0 10px 20px rgba(0,0,0,1);
overflow: hidden;
color: #000;
}
section .box:before
{
content: '';
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: url(https://media.discordapp.net/attachments/692954070180298767/807238617075679252/unknown.png);
backround-attachement: fixed;
background-attachment: fixed;
background-size: cover;
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
filter: blur(10px)
}
section .box h2
{
position: relative;
margin: 0 0 20px;
padding: 0;
font-size: 48px;
z-index: 2;
font-family: 'Montserrat', sans-serif;
}
section .box p
{
position: relative;
margin: 0;
padding: 0;
font-size: 18px;
z-index: 2;
font-family: 'Montserrat', sans-serif;
}
section .box
{
width: 50rem;
height: 10rem;
border-radius: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lorem ipsum</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="box">
<center>
<h2 style="color:#ffffff";>Lorem ipsum</h2>
<p style="color:#ffffff";>Lorem ipsum dolor sit amet</p>
</center>
</div>
</section>
</body>
First of all, welcome to web development! Have fun and keep learning.
A note in the beginning, try to use smaller images/background-images for the web (loading times for example).
For a navigation in your current layout, i would suggest something like this:
I removed ur inline html styling, it's unnecessary if you are using a stylesheet file. I also removed the <center> html tag, it's deprecated
Next steps i added/changed the color of all box elements .box * to position: relative; (for showing "above" your :before element) and set the color to white and centered it.
Then i added a navigation (in your html a new box element with a list in it). Set the list items to display: inline-block for a very simple navigation alignment.
#import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Montserrat+Alternates:wght#500&display=swap');
#import url(https://fonts.googleapis.com/css?family=Lato);
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
section
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: url(https://media.discordapp.net/attachments/692954070180298767/807238617075679252/unknown.png);
background-attachment: fixed;
background-size: cover;
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
}
section .box
{
position: relative;
max-width: 700px;
padding: 50px;
box-shadow: 0 10px 20px rgba(0,0,0,1);
overflow: hidden;
color: #000;
}
section .box:before
{
content: '';
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: url(https://media.discordapp.net/attachments/692954070180298767/807238617075679252/unknown.png);
background-attachment: fixed;
background-size: cover;
display: grid;
align-items: center;
justify-content: center;
height: 100vh;
filter: blur(10px);
}
section .box h2
{
position: relative;
margin: 0 0 20px;
padding: 0;
font-size: 48px;
z-index: 2;
font-family: 'Montserrat', sans-serif;
}
section .box p
{
position: relative;
margin: 0;
padding: 0;
font-size: 18px;
z-index: 2;
font-family: 'Montserrat', sans-serif;
}
section .box
{
width: 50rem;
height: 10rem;
border-radius: 5px;
}
section .box.navigation
{
width: 50rem;
height: 5rem;
border-radius: 5px;
margin-bottom: 1rem;
}
section .box * {
color: #ffffff;
position: relative;
text-align: center;
}
section .box.navigation ul li {
list-style-type: none;
display: inline-block;
}
section .box.navigation ul li a {
display: block;
margin: 10px;
}
<section>
<div class="box navigation">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="box">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
</section>
I want to align this image to the right side of the text but I am unable to do this. All the ways I have tried but in the end, the image appears below the text contrary to what I want actually.
In my assumption, I have written the correct code.
Please see the image here.
Here is what I have in my code:
<!--Intro Page start-->
<section id="intro">
<div class="wrapper">
<div class="intro-left">
<h1>Creative Insights to Grow your Business</h1>
<p>The world's most widely deployed real-time content recomendations engine. Brought to you by Pulse Analytics.</p>
<a href="#" class="intro-cta">
Try it for Free
</a>
</div>
<div class="intro-right">
<img src="images/undraw_growth_analytics_8btt.png" alt="">
</div>
</div>
</section>
And here is the CSS:
#intro{
position: absolute;
overflow: hidden;
min-height: 600px;
padding-top: 9em;
}
#intro .intro-left{
display: inline-block;
width: 100%;
max-width: 400px;
padding: 3em 0;
}
#intro .intro-left h1{
font-size: 2.5em;
color: #241b57;
line-height: 1.5em;
position: relative;
margin-bottom: 1em;
}
#intro .intro-left h1::after{
bottom: -24px;
left: 0;
width: 50px;
height: 4px;
content: '';
border-radius: 5px;
background: #ec4357;
opacity: 0.4;
position: absolute;
}
#intro .intro-left p{
font-size: 1.125em;
line-height: 1.75em;
}
#intro .intro-left a.intro-cta{
font-weight: 500;
display: block;
width: 100%;
max-width: 180px;
margin-top: 2em;
text-align: center;
color: #ffffff;
border-radius: 3px;
background-color: #ec4357;
padding: 1em;
}
#intro .intro-right{
position: relative;
display: inline-block;
margin-left: 6em;
}
#intro .intro-right img{
max-width: 600px;
}
Please let me know where is my error. Thanks!
use flex for wrapper class:
#intro {
position: absolute;
overflow: hidden;
min-height: 600px;
padding-top: 9em;
}
.wrapper {
display: flex;
}
#intro .intro-left {
display: inline-block;
width: 100%;
max-width: 400px;
padding: 3em 0;
}
#intro .intro-left h1 {
font-size: 2.5em;
color: #241b57;
line-height: 1.5em;
position: relative;
margin-bottom: 1em;
}
#intro .intro-left h1::after {
bottom: -24px;
left: 0;
width: 50px;
height: 4px;
content: '';
border-radius: 5px;
background: #ec4357;
opacity: 0.4;
position: absolute;
}
#intro .intro-left p {
font-size: 1.125em;
line-height: 1.75em;
}
#intro .intro-left a.intro-cta {
font-weight: 500;
display: block;
width: 100%;
max-width: 180px;
margin-top: 2em;
text-align: center;
color: #ffffff;
border-radius: 3px;
background-color: #ec4357;
padding: 1em;
}
#intro .intro-right {
position: relative;
display: inline-block;
margin-left: 6em;
}
#intro .intro-right img {
max-width: 600px;
}
<section id="intro">
<div class="wrapper">
<div class="intro-left">
<h1>Creative Insights to Grow your Business</h1>
<p>The world's most widely deployed real-time content recomendations engine. Brought to you by Pulse Analytics.</p>
<a href="#" class="intro-cta">
Try it for Free
</a>
</div>
<div class="intro-right">
<img src="http://placekitten.com/301/301" alt="">
</div>
</div>
</section>
I'd like the secondary label to be right under "Image Label". Currently it is all the way at the bottom.
I am forcing the secondary label to be under using a line break and then moving it to the right using margin-left. I don't think this is the way to go at all and I tried using margin bottom which will not move the element up.
What is the best way to achieve this using CSS? My code for current result is here: https://codepen.io/codeAligned/pen/gOOByOa
Current:
Desired:
.post-container {
width: 75%;
padding-right: 16px;
padding-left: 16px;
margin-right: 200px;
margin-left: 200px;
padding-bottom: 64px;
padding-top: 64px;
article {
header {
text-align: center;
margin: 0 auto 32px;
a {
text-decoration: none;
transition: color 0.3s ease;
&:focus {
text-decoration: none;
text-decoration-skip-ink: auto;
}
&:active {
text-decoration: none;
}
&:hover {
text-decoration: none;
}
}
}
.avatar {
margin: 16px auto;
text-align: center;
border-radius: 50%;
}
}
}
.bg-img-hero {
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
margin-right: 25px;
height: 400px;
border-radius: 15px;
}
.transition-3d-hover {
transition: all 0.2s ease-in-out;
}
.transition-3d-hover:hover,
.transition-3d-hover:focus {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.story-image {
margin-bottom: 32px;
align-self: center;
img {
display: block;
border-radius: 10px;
width: 80%;
height: 60%;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
}
.post-avatar {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.article-avatar {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-right: 16px;
margin-top: 10px;
margin-bottom: 10px;
}
.tag-text {
font-size: 12px;
}
.avatar-container {
padding-left: 30px;
padding-bottom: 16px;
}
.subtitle {
font-size: 16px;
text-align: left;
}
.subtitle-container {
border-top: solid 1px;
border-bottom: solid 1px;
border-spacing: 5px;
border-color: lightgray;
min-height: 100px;
}
.subtitle-date {
padding-left: 80px;
}
.subtitle-body {
-ms-flex: 1;
flex: 1;
}
.label-position {
margin-left: 80px;
}
<div class="subtitle">
<div class="subtitle-container">
<div class="article-avatar rounded-circle sb-avatar" style="display: inline-block; vertical-align: middle; width: 60px; height: 60px; font-family: Helvetica;">
<img class="article-avatar rounded-circle sb-avatar__image" width="60px" height="60px" src="https://www.kiplinger.com/slideshow/spending/T062-S001-things-millennials-are-changing-forever/images/intro.jpg" style="max-width: 100%; width: 60px; height: 60px;"></div>
<span class="subtitle-body font-size-1 ml-3">
Image label
<br/>
<small class="label-position">secondary label</small>
</span>
</div>
</div>
I recommend using flexbox for these things. You can go through https://www.w3schools.com/css/css3_flexbox.asp
Here your code with quick fix
.subtitle-container{
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.subtitle-container >div{
padding:10px;
}
<div class="subtitle">
<div class="subtitle-container">
<div class="article-avatar rounded-circle sb-avatar" style="display: inline-block; vertical-align: middle; width: 60px; height: 60px; font-family: Helvetica;">
<img class="article-avatar rounded-circle sb-avatar__image" width="60px" height="60px" src="https://www.kiplinger.com/slideshow/spending/T062-S001-things-millennials-are-changing-forever/images/intro.jpg" style="max-width: 100%; width: 60px; height: 60px;"></div>
<div>
<span class="subtitle-body font-size-1 ml-3">
Image label
<br/>
<small class="label-position">secondary label</small>
</span>
</div>
</div>
</div>
With flex you do
<div class="container">
<div>
// your image here
</div>
<div class="label">
<div><span>Image label</span></div>
<div><small>Secondary label</small></div>
</div>
</div>
And add your css
.container {
display: flex;
}
The default direction is row so divs inside .container will stand next to each other while the divs inside .label will stack on each other because div is a block element
I'm having a problem with my code and can't figure it out. I'm writing my own website and can't get my buttons to go to the center of the page. I tried almost everything I think but it always goes to about 30% or 70% for some reason... The website is not fully responsive for now I will work on that later. What's wrong with my code? What can I do to fix it next time? Thanks for any ideas!
function showHide() {
var navList = document.getElementById("nav-lists");
if (navList.className == '_Menus') {
navList.classList.add("_Menus-show");
} else {
navList.classList.remove("_Menus-show");
}
const body = document.querySelector('body')
const twitter = document.querySelector('.twitter')
twitter.addEventListener("mouseover", function () {
body.classList.add('linked')
},false)
twitter.addEventListener("mouseout", function () {
body.classList.remove('linked')
}, false)
}
#font-face {
font-family: 'familiar_probold';
src: url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff2') format('woff2'),
url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sansheavy_caps';
src: url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff2') format('woff2'),
url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'source_sans_problack';
src: url('fonts/SourceSans/sourcesanspro-black-webfont.woff2') format('woff2'),
url('fonts/SourceSans/sourcesanspro-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*{
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background-color: #f7f7f7;
font-family: sans-serif;
}
img {
width: 100%;
height: auto;
}
.navbar {
width: 100%;
background-color: #000;
}
.container {
max-width: 1140px;
margin: 0 auto;
height: 60px;
display: flex;
flex-wrap: wrap;
}
._Logo {
overflow: hidden;
text-align: center;
flex-basis: 230px;
}
._Logo img {
height: 100% !important;
width: 150px !important;
}
._Menus ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
._Menus ul li a {
display: block;
padding: 0 10px;
height: 60px;
line-height: 60px;
text-decoration: none;
color: #FFF;
outline: none;
font-family: 'uni_sansheavy_caps';
}
._Menus ul li a:hover {
background-color: #FFF;
color: #000;
}
._Iconbar {
display: none;
background-color: #000;
}
.menu-bar {
width: 45px;
align-self: center;
cursor: pointer;
}
.icon-bar {
height: 3px;
width: 100%;
background: #FFF;
margin: 7px 0;
display: block;
border-radius: 2px;
}
.toppadding{
padding-top: 0;
}
.topbackround{
width: 100%;
height: auto;
position: relative;
text-align: center;
color: white;
}
.sloganlefttextfirst{
position: absolute;
top: 20%;
left: 5%;
font-family: 'familiar_probold';
font-size: 200%;
color: grey;
}
.sloganlefttextsecond{
position: absolute;
top: 25%;
left: 5%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
}
.sloganlefttextthird{
position: absolute;
top: 35%;
left: 5%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
color: #DCC98E;
border-bottom: 6px solid #DCC98E;
padding-bottom: 3px;
}
.howitworkslefttextfirst a{
position: absolute;
top: 51%;
left: 5%;
font-family: 'familiar_probold';
font-size: 200%;
color: #B9CDBE;
border-bottom: 3px solid #B9CDBE;
padding-bottom: 3px;
text-decoration: none;
}
.howitworkslefttextsecond{
position: absolute;
top: 57%;
left: 5%;
font-family: 'Arial';
font-size: 200%;
color: white;
}
hr{
color: black;
background-color: black;
height: 8px;
border: none;
}
.midbackground{
background-color: #1B1C1E;
padding-bottom: 100px;
}
.tutorial{
padding-top: 3%;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
}
.tutorial p{
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
left: 50%;
font-family: 'Arial';
color: white;
font-size: 50%;
width: 100%;
}
.circles{
margin: 0 auto;
}
.circles > div {
overflow: hidden;
float: left;
width: auto;
height: auto;
position: relative;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #1B1C1E;
}
.circles > div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'uni_sansheavy_caps';
font-size: 400%;
color: grey;
}
.circles > div > div > div {
display: table;
width: 100%;
height: 100%;
}
.circles > div > div > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px)
{
.circles > div {padding: 50%;}
}
#media (min-width: 321px) and (max-width: 800px)
{
.circles > div {padding: 25%;}
}
#media (min-width: 801px)
{
.circles{width:800px}
.circles > div {padding: 12.5%;}
}
.circlescontent{
margin: 0 auto;
}
.circlescontent > div {
overflow:hidden;
float:left;
width:auto;
height:auto;
position: relative;
background: #1B1C1E;
}
.circlescontent > div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'familiar_probold';
font-size: 250%;
color: grey;
}
.circlescontent > div > div > div {
display: table;
width: 100%;
height: 100%;
}
.circlescontent > div > div > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px)
{
.circlescontent > div {padding: 50%;}
}
#media (min-width: 321px) and (max-width: 800px)
{
.circlescontent > div {padding: 25%;}
}
#media (min-width: 801px)
{
.circlescontent{width:800px}
.circlescontent > div {padding: 12.5%;}
}
.statement{
padding-top: 25%;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
}
.statement p{
padding-top: 20px;
padding-bottom: 0;
text-align: center;
left: 50%;
font-family: 'familiar_probold';
color: white;
font-size: 50%;
width: 100%;
}
.statementfinal{
padding-top: 0;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
} /*HERE*/
.buttonbkg{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: 'familiar_probold';
color: #B9CDBE;
box-shadow: 0 9px 18px rgba(0,0,0,0.2);
display: inline-block;
left: 50%;
margin: 3%;
align-content: center;
}
.steam{
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: inline-block;
align-content: center;
}
.gradient {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
bottom: auto;
margin: auto;
z-index: -1;
background: radial-gradient(90px circle at top center, rgba(238,88,63,.8) 30%, rgba(255,255,255,0));
transition: all 0s ease-out 0s;
transform: translatex(-140px);
animation: 18s linear 0s infinite move;
display: inline-block;
align-content: center;
}
#keyframes move {
0% {
transform: translatex(-140px);
}
25% {
transform: translatex(140px);
opacity: 0.3;
}
50% {
transform: translatex(140px);
opacity: 1;
background: radial-gradient(90px circle at bottom center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
}
75% {
transform: translatex(-140px);
opacity: 0.3;
}
100% {
opacity: 1;
transform: translatex(-140px);
background: radial-gradient(90px circle at top center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
}
}
#media (max-width: 900px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul{
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage{
display: none;
}
#media (max-width: 600px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul{
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage{
display: none;
}
}}
/*
#0C0028
#1D5EC3
#181A1B
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reff Skins</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS responsive navigation menu</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS responsive navigation menu</title>
</head>
<body>
<nav class="navbar">
<div class="container">
<section class="_Logo"><img src="images/brand.png" alt="REFF SKINS"></section>
<section class="_Iconbar">
<span class="menu-bar" onclick="showHide()">
<i class="icon-bar"></i>
<i class="icon-bar"></i>
<i class="icon-bar"></i>
</span>
</section>
<section class="_Menus" id="nav-lists">
<ul>
<li>ABOUT</li>
<li>HOW IT WORKS</li>
<li>FAQ</li>
<li>AVAILABLE SKINS</li>
<li>SIGN IN THROUGH STEAM</li>
</ul>
</section>
</div>
</nav>
<div class="toppadding"></div>
<div class="topbackround">
<img class="topbackround" src="images/awpasiimov.jpeg">
<div class="sloganlefttextfirst">WEBSITE WITH TRULY FREE SKINS</div>
<div class="sloganlefttextsecond">LOW ON SKINS?</div>
<div class="sloganlefttextthird">TIME TO GET NEW FREE!</div>
<div class="howitworkslefttextfirst">HOW IS THIS WORKING?</div>
<div class="howitworkslefttextsecond">check how it works page or visit our YouTube</div>
<!--<button class="btn1">HOW IT WORKS</button></div>
<button class="btn2">SKINS</button></div>
<button class="btn3">SIGN IN WITH STEAM</button></div>-->
</div>
<hr></hr>
<div class="midbackground">
<div class="tutorial">HOW CAN I DO IT?<p>If you want your new skins complete the four easy steps.</p></div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
1.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
2.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
3.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
4.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SIGN IN WITH STEAM
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
DO THE REFERR PROCESS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SELECT WANTED SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
GET YOUR SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="statement">IT'S THAT EASY<p>NO DEPOSITS, NO PAYMENT METHODS, NO RISKY GAMBLING, NO SKINS HOLDING</p></div>
<div class="statementfinal">WE SAID NO TO CATCHES!</div>
<div class="buttunbkg">
<span class="gradient"></span>SIGN IN WITH STEAM
<span class="gradient"></span>AVAILABLE SKINS
<span class="gradient"></span>HOW IT WORKS
</div>
</div>
</body>
</html>
Seems like you've got it half using flex, here's an answer sticking to it.
Firstly, you spelt buttonbkg wrong. Add flex-direction: column to it. Then like others said you will want to get rid of the left: 50%. On your .steam add your flex, and center align/justify.
.buttonbkg{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: 'familiar_probold';
color: #B9CDBE;
box-shadow: 0 9px 18px rgba(0,0,0,0.2);
display: inline-block;
margin: 3%;
align-content: center;
}
.steam{
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: flex;
justify-content: center;
align-items: center;
}
You need to add this to your button selector:
.button {
transform: translateX(-50%);
}
On your .button class you have left: 50%;, remove it. Also add margin: 3% auto
On you .steam class change display: inline-block; to display: block;
margin: 3% auto
3% -> top/bottom margin
auto -> left/right margin, auto will make left an right margin the same
Other solution would be to change your transform: translatez(0); to transform: translateX(-50%);, but I think transform is like shooting with a shotgun at a fly.