Container with Image & Image Description to be Responsive - javascript

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.

Related

What is wrong with adding grid area in this code?

Since products were not responsive against resizing the browser like this:
I wanted to make my grid responsive so i added grid area like this:
.grid{
display: grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-gap:1em;
grid-area: 'head head head head'
'card card card card'
'foot foot foot foot' ;
}
but now footer is smaller and i have just one product instead of what should be in the body:
what is wrong with adding grid area in this code?
or if there is a better way to make them responsive what is it?
also this is the overall view of the site:
.header{
color: saddlebrown;
width: 100%;
height: 100px;
position: fixed;
background-color: burlywood;
opacity: 33px;
top: 0;
left: 0;
right: 0;
margin-top: 0;
margin-right: 0;
z-index: 1000;
grid-area: head;
}
body{
margin-top: 333px;
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.footer{
color: white;
background: sandybrown;
margin-top: 100px;
height: 100px;
margin-right: 0;
width: 100%;
grid-area: foot;
}
.card {
max-width: 400px;
margin: auto ;
text-align: center;
font-family: arial;
border-style: solid;
border-width: 6px;
position: relative;
grid-area: card ;
}
.grid{
display: grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-gap:1em;
grid-area: 'head head head head'
'card card card card'
'foot foot foot foot' ;
}
.card img{
height: 400px;
width: 400px;
vertical-align: middle;
}
.price {background-color: #f44336;
font-size:22px;
border-radius: 3px;
position: absolute;
bottom: 0px;
right: 0px;
padding: 3px;
}
.card button {
border: none;
color: white;
background-color: #000;
position: relative ;
cursor: pointer;
width: 100%;
height: 100px;
font-size: 44px;
align-items: center;
}
.card button:hover {
opacity: .5;
background-color: #330;
}
#id{
background-color: saddlebrown;
color: white;
margin: 0;
font-size: 30px;
height: 310px;
}
.number{
width: 50px;
height: 50px;
background-color: #330;
color: yellow;
border-radius: 50%;
position: absolute;
top: -22px;
right: -22px;
justify-content: center;
align-items: center;
display: flex;
font-size: 22px;
}
#media screen and (max-width: 1864px){
.card{
max-width: 300px;
}
.price{
font-size:20px;
}
.card img{
height: 300px;
width: 300px;
}
}
#media screen and (max-width: 1319px){
.grid{
grid-template-columns:1fr 1fr 1fr ;
}
}
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'main.css' %}">
<div class="header">
<h1 >header</h1>
</div>
</head>
<body style="background-color: #36454F;">
<div class="grid">
{% for i in p%}
<div class='card'>
<div class="number">{{i.Number}}</div>
<img src="{{i.image}}"></img>
<p id="id">{{i.description}}</p>
<a href="{{i.buy}}" target='_blank' rel='noopener noreferrer'>
<button><span class="price"> ${{i.price}}</span> buy</button>
</a>
</div>
{%endfor%}
</div>
<div class="footer">
<h1 >&copy All rights reserved</h1>
</div>
</body>
</html>
You want to set grid-area with head and foot which are outside of grid itself.
My propose is to remove grid-area from grid, and just use grid-template with media queries, or simply you can add display flex with flex-wrap.

Top Row Menu CSS

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>

How do I center my buttons on my website?

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.

Less clunky way of creating a responsive web header?

I've currently got a website header that functions fine on a desktop. I had initially planned to stack the content so that the pages would then display under the logo. I have seen hamburger menus used for a drop-down which is what I'd ultimately like to achieve, retaining the logo on the left.
I know this will likely take time but I think I'm almost there. I just think it'd be easier to have the same elements be responsive rather than creating two separate headers and toggling visibility.
So currently I have this:
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.logo {
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}
.mobile-header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.mobile-logo-container {
float: left;
width: 60%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.mobile-navigation-container {
width: 20%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.mobile-logo {
height:8vh;
max-width: 60vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:2vh;
display: block;
object-fit: contain;
}
#media only screen and (max-width: 500px) {
.header {
visibility: hidden;
}
}
#media only screen and (max-width: 500px) {
.header-container {
visibility: hidden;
}
}
#media only screen and (max-width: 500px) {
.logo-container {
visibility: hidden;
}
}
#media only screen and (max-width: 500px) {
.navigation-container {
visibility: hidden;
}
}
#media only screen and (max-width: 500px) {
.logo {
visibility: hidden;
}
}
#media only screen and (min-width: 501px) {
.mobileheader {
visibility: visible;
}
}
#media only screen and (min-width: 501px) {
.mobile-header-container {
visibility: visible;
}
}
#media only screen and (min-width: 501px) {
.mobile-logo-container {
visibility: visible;
}
}
#media only screen and (min-width: 501px) {
.mobile-navigation-container {
visibility: visible;
}
}
#media only screen and (min-width: 501px) {
.mobile-logo {
visibility: hidden;
}
}
img{
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="./stylesheet.css">
</head>
<body>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
<div class="mobile-header">
<div class="mobile-header-container">
<div class="mobile-logo-container">
<img class="mobile-logo" src="/logo.png" alt="Logo">
</div>
<div class="mobile-navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
<div class="headerfill">
</div>
This looks fine, and is suitable for desktop use. I just need them to be responsive in a way when on mobile the elements adjust.
The icons don't have to switch and I know that can be done with event listeners if needed. Just not sure how to have the original elements format differently on mobile devices without creating two separate headers.
Hopefully the image gives a good enough idea of what I'm aiming for. First time I've tried to attempt this sort of drop-down navigation so thanks in advance :)
UPDATE
body, html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
.logo {
height:8vh;
max-width: 80vw;
padding-top:1vh;
padding-bottom:1vh;
padding-left:4vh;
display: block;
object-fit: contain;
}
img{
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 2.5vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="./stylesheet3.1.css">
</head>
<body>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="/logo.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<p class="nav">Page1</p>
<p class="nav">Page2</p>
<p class="nav">Page3</p>
<p class="nav">Page4</p>
</div>
</div>
</div>
Hope this helps. I need to find a way to incorporate that design (using the code I already have) with the answer from #Nyan. I've removed the media queries and the separate mobile and desktop headers. Can't figure this out.
let menu = document.querySelector('nav')
document.querySelector('button')
.addEventListener('click', e => {
menu.classList.toggle('active')
})
header{
position: relative;
display: flex;
background: #ccc;
justify-content: space-between;
}
nav{
display: flex;
}
nav a{
display: block;
padding: 10px;
background: #ddd;
border: 1px solid #aaa;
}
button{
display: none;
}
#media (max-width: 400px) {
nav{
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: right;
display: none;
}
nav.active{
display: block;
}
button{
display: block;
}
}
<header>
logo
<button>menu</button>
<nav>
Page1
Page2
Page3
Page4
</nav>
</header>
It'd run like that, with that structure but retain the initial design. (image above)
You can create just button, which is hidden on big screens and visible on small, and listen click event on it. Or if you don't want to create new elements at all, you can use ::after and ::before, and listen them.
Listener can, for example, toggle class active on list.
List itself can be absolutely positioned to bottom of header, and hidden when doesn't have active class.
let menu = document.querySelector('nav')
document.querySelector('button')
.addEventListener('click', e => {
menu.classList.toggle('active')
})
header{
position: relative;
display: flex;
background: #ccc;
justify-content: space-between;
}
nav{
display: flex;
}
nav a{
display: block;
padding: 10px;
background: #ddd;
border: 1px solid #aaa;
}
button{
display: none;
}
#media (max-width: 400px) {
nav{
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: right;
display: none;
}
nav.active{
display: block;
}
button{
display: block;
}
}
<header>
logo
<button>menu</button>
<nav>
one
two
three
four
</nav>
</header>
Which one of this steps cause you more questions?

Placing div vertical middle with parent

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 !!

Categories