I'm trying to create multiple bubbled words as buttons!
what is the best way to approach the design below using CSS or any JS library?
There can be many buttons (depends on the data from DB)
What I've tried:
#tagsContainer {
float: left;
width: 25vw;
margin-top: 10vh;
overflow: hidden;
}
#tags {
display: grid;
justify-content: space-between;
grid-gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}
#tag {
background-color: #2F3841;
border-radius: 8px;
margin-top: 10px;
width: max-content;
}
<div id="tagsContainer">
<h3 id="tagsTitle">TOP TAGS</h3>
<div id="tags">
<div id="tag">
<h4 id="tagTitle">Flutter</h4>
</div>
<div id="tag">
<h4 id="tagTitle">Deep Learning</h4>
</div>
<div id="tag">
<h4 id="tagTitle">Machine Learning</h4>
</div>
</div>
</div>
The problem is when using grid layout all the columns would be same in size!
Just use display:inline-block and style your container as you want.
P.s. you have the same id multiple times, use class instead because id must be unique
#tagsContainer {
/*float: left; REMOVE IT!!!*/
width: 25vw;
margin-top: 10vh;
overflow: hidden;
}
#tags {
/* NOT NECESSARY
display: grid;
justify-content: space-between;
grid-gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
*/
}
.tag {
background-color: #2F3841;
border-radius: 8px;
margin-top: 10px;
width: max-content;
display:inline-block;
}
<div id="tagsContainer">
<h3 id="tagsTitle">TOP TAGS</h3>
<div id="tags">
<div class="tag">
<h4 class="tagTitle">Flutter</h4>
</div>
<div class="tag">
<h4 class="tagTitle">Deep Learning</h4>
</div>
<div class="tag">
<h4 class="tagTitle">Machine Learning</h4>
</div>
</div>
</div>
Do you mean this?
body {
background: #202223;
}
#tags {
font-family: cursive;
width: 292px;
}
.tag {
font-family: inherit;
background: #2b333b;
font-size: 14px;
padding: 10px 33px;
border: none;
border-radius: 16px;
color: #d4d4d4;
font-style: italic;
display: inline-block;
width: max-content;
margin: 4px 4px;
}
.tag:hover {
opacity: 0.9;
}
.tag:focus {
outline: 1px solid #6868688f;
outline-offset: -3px;
}
<div id="tags">
<button class="tag">Flutter</button>
<button class="tag">Data Science</button>
<button class="tag">CSS</button>
<button class="tag">Deep Learning</button><button class="tag">Machine Learning</button>
</div>
Related
newbie here...
I am working on some simple project where I am trying to simulate bank app.
Thing is that when I click on send money button, I want to take value from input value, and then subtract this value from my whole account balance.
Really simple, but after first transaction I get value which I want, but after second time I get innerText displaying "Nan" instead of some number value.
Here it is javascript file, if you can see from this why I get error.
Also here it is html and css if you don't understand what I am talking about.
////////////////// TOTAL MONEY FROM CARDS ///////////////////////
const totalMoney = document.querySelector(`.totalMoney`);
const allcards = document.querySelectorAll(`.cards`);
let totalMoneyAccount = 0;
allcards.forEach((kartica) => {
let novacNaKartici = kartica.querySelector(`.novacNaKartici`).innerText;
novacNaKartici = parseInt(novacNaKartici);
totalMoneyAccount += novacNaKartici;
totalMoney.innerText = ` ${replika2} $`;
});
//////////////////////////// TRANSFER MONEY TO SOMEONE /////////////////////////////
const reciver = document.querySelector(`input[name='recivier']`);
let amount = document.querySelector(`input[name='amount']`);
const sendMoneyBtn = document.querySelector(`.sendBtn`);
const transakcijeParent = document.querySelector(`.transakcije`);
sendMoneyBtn.addEventListener(`click`, () => {
amount = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amount;
updateProfile(totalMoneyAccount);
});
function updateProfile(totalMoneyAccount) {
totalMoney.innerHTML = totalMoneyAccount;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200"
/>
<link rel="stylesheet" href="style.css" />
<title>Bank app</title>
</head>
<body>
<div class="container">
<div class="profile">
<div class="header">
<span class="material-symbols-outlined"> notifications </span>
<span class="material-symbols-outlined"> search </span>
</div>
<div class="person">
<img src="/img/cost1.jpg" alt="" />
<p>Random user</p>
<span class="totalMoney" style="font-size: 20px;"></span>
</div>
<div class="menu">
<div class="account flex">
<span class="material-symbols-outlined"> manage_accounts </span>
<p>Accounts</p>
</div>
<div class="transactions flex">
<span class="material-symbols-outlined"> receipt_long </span>
<p>Transactions</p>
</div>
<div class="bonus flex">
<span class="material-symbols-outlined"> star </span>
<p>Bonus</p>
</div>
<div class="invest flex">
<span class="material-symbols-outlined"> trending_up </span>
<p>Investments</p>
</div>
<div class="logOut flex">
<span class="material-symbols-outlined"> logout </span>
<p>Log Out</p>
</div>
</div>
</div>
<div class="main">
<div class="left">
<div class="naslov">
<p>Cards</p>
<span class="material-symbols-outlined">
add_circle
</span>
</div>
<div class="allCards">
<div class="cards changeJustify">
<div class="singleCard">
<img src="/img/visa.png" alt="" class="changeImg"/>
</div>
<div class="opis">
<p style="color: grey; font-size:20px">VISA</p>
<p style="color: black; font-size:16px" class="balance1 changeBalance">Balance:</p>
</div>
<div class="balance">
<span class="material-symbols-outlined changeSpan dots">
more_vert
</span>
<span style="font-size: 22px; color:grey(59, 59, 59);" class="novacNaKartici">2500$</span>
</div>
</div>
<div class="cards changeJustify">
<div class="singleCard ">
<img src="/img/american.jpg" alt="" class="changeImg"/>
</div>
<div class="opis ">
<p style="color: grey; font-size:20px">VISA</p>
<p style="color: grey; font-size:16px" class="balance1 changeBalance">Balance:</p>
</div>
<div class="balance ">
<span class="material-symbols-outlined changeSpan dots" >
more_vert
</span>
<span style="font-size: 22px; color:black;" class="novacNaKartici">3500$</span>
</div>
</div>
</div>
<p style="font-size: 30px;
color: grey;
font-weight: bold;">Transactions</p>
<div class="transakcije">
</div>
</div>
</div>
<div class="right">
<p style="font-size: 30px;
color: grey;
font-weight: bold;">Transfer money</p>
<div class="transfer">
<label for="recivier">Transfer to</label>
<input type="text" placeholder="antonio3101" name="recivier">
<label for="amount">Amount</label>
<input type="number" placeholder="$300..." name="amount">
<button class="sendBtn">Send</button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
background-color: #f1f2f6;
}
.profile {
height: 100vh;
width: 20%;
background-color: #1d1c57;
display: flex;
flex-direction: column;
color: white;
}
.profile .header {
display: flex;
padding: 30px;
align-items: center;
justify-content: space-between;
color: #7979a6;
}
.profile .header span {
font-size: 26px;
}
.profile .header span:hover {
color: white;
}
.profile .person {
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.profile .person img {
width: 150px;
height: 150px;
border-radius: 50%;
}
.profile .person p {
font-size: 26px;
color: #c6c5d8;
}
.profile .menu {
margin-top: 100px;
padding: 20px;
background-color: #262467;
border-radius: 30px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
height: 100%;
position: relative;
font-size: 22px;
color: #7c7eaa;
}
.profile .flex {
margin-left: 20px;
display: flex;
align-items: center;
gap: 20px;
}
.profile .flex:hover {
margin-left: 40px;
color: white;
transition: ease-in-out;
}
.logOut {
position: absolute;
bottom: 50px;
}
/*-------------------------- KARTICE ----------------------------------------- */
.main .naslov {
color: grey;
font-size: 30px;
font-weight: bold;
}
.naslov {
display: flex;
align-items: center;
justify-content: space-between;
}
.naslov span {
font-size: 32px;
}
.naslov span:hover {
color: black;
}
.main .left {
display: flex;
flex-direction: column;
margin-left: 30px;
}
.main .left .cards {
background-color: #ffffff;
padding: 20px;
display: flex;
padding: 20px;
border-radius: 20px;
}
.cards {
margin-top: 10px;
}
.cards .singleCard {
display: flex;
width: 100%;
}
.allCards {
display: flex;
flex-direction: column;
}
.cards .singleCard img {
width: 250px;
padding-right: 10px;
}
.cards .opis p {
margin: 0;
padding: 0;
margin-left: 10px;
}
.cards .opis {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.cards .balance {
margin-left: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
/*------------------------------- CHANGE CARD -------------------------------- */
.changeImg {
height: 50px;
object-fit: cover;
}
.changeSpan {
display: none;
}
.changeJustify {
display: flex;
align-items: center;
}
.changeBalance {
display: none;
}
/*-------------------------- TRANSAKCIJE ----------------------------------------- */
.transakcije {
background-color: white;
display: flex;
flex-direction: column;
padding: 10px;
}
.single-transaction {
display: flex;
margin-left: 10px;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid grey;
}
.single-transaction img {
height: 60px;
width: 60px;
border-radius: 50%;
object-fit: cover;
}
.single-transaction .destination {
font-size: 16px;
color: rgb(73, 73, 73);
font-weight: bold;
}
.single-transaction .amount {
color: rgb(30, 149, 30);
font-weight: bold;
font-size: 16px;
}
.single-transaction:last-child {
border-bottom: 0;
}
/*-------------------------- RIGHT SECTIONS ----------------------------------------- */
/*-------------------------- TRANSFER MONEY ----------------------------------------- */
.right {
display: flex;
flex-direction: column;
margin-left: 100px;
}
.right .transfer {
background-color: #1d1c57;
padding: 50px 20px;
border-radius: 10px;
margin-left: 10px;
margin-right: 20px;
}
.right .transfer input {
height: 30px;
font: 24px;
margin-left: 10px;
}
.right .transfer label {
margin-left: 20px;
color: white;
}
.right .transfer button {
padding: 10px 15px;
color: black;
background-color: white;
border-radius: 5px;
border: 0;
margin-left: 20px;
margin-right: 20px;
}
You are overwriting your amount variable (which points to an input element) with the value inputted into said input.
Hence, after the first click you no longer have a reference to the input element: your code tries to read the value property of the integer amount of the last transaction. This results in the following evaluation: parseInt(amount.value) -> parseInt(undefined) -> NaN.
Change this code:
sendMoneyBtn.addEventListener(`click`, () => {
amount = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amount;
updateProfile(totalMoneyAccount);
});
to something like this:
sendMoneyBtn.addEventListener(`click`, () => {
const amountValue = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amountValue;
updateProfile(totalMoneyAccount);
});
Credit to #JohnnyMopp for noticing it first.
So I've got two html pages that i want to run simultaneously because websockets were introducing problems with threading and clashing of data. I thought it would be better to run both as they are both light weight web pages and just display none one when the other is needed and vice versa.
I tried to incorporate that method into the header tag in the css file but nothing seemed to happen, any advice is appreciated!
EDIT: I already have the switching code that switches between both pages, i just need to know how to incorporate the display:none function to hide, in this example, the header tag.
'''
header {
height: 53px;
width: 53px;
background-color: black;
display: grid;
grid-template-columns: 118px 244px 118px;
padding-top: 3px;
font-size: 45px;
color: white;
text-align: center;
}
.headerBox {
background-color: #4472C4;
}
.leftDrive {
background-color: black;
display: grid;
grid-template-columns: repeat(2, auto);
grid-column-gap: 3px;
padding-inline-start: 3px;
padding-inline-end: 4px;
}
.battery {
background-color: #4472C4;
display: grid;
grid-template-columns: repeat(4, auto);
}
.rightDrive {
background-color: black;
display: grid;
grid-template-columns: repeat(2, auto);
grid-column-gap: 3px;
padding-inline-start: 4px;
padding-inline-end: 3px;
}
<header>
<div class="leftDrive">
<div class="headerBox" id="l_motor">0</div>
<div class="headerBox" id="l_inverter">0</div>
</div>
<div class="battery">
<div class="headerBox" id="battery_1">0</div>
<div class="headerBox" id="battery_2">0</div>
<div class="headerBox" id="battery_3">0</div>
<div class="headerBox" id="battery_4">0</div>
</div>
<div class="rightDrive">
<div class="headerBox" id="r_inverter">0</div>
<div class="headerBox" id="r_motor">0</div>
</div>
</header>
In the example i use some JS to alter the css.
The button i added changes the css of the header with ID 'header'.
But you could just change the display:grid to display:none.
function hideheader(){
document.getElementById("header").style.display = "none";
}
header {
height: 53px;
width: 53px;
background-color: black;
display: grid;
grid-template-columns: 118px 244px 118px;
padding-top: 3px;
font-size: 45px;
color: white;
text-align: center;
}
.headerBox {
background-color: #4472C4;
}
.leftDrive {
background-color: black;
display: grid;
grid-template-columns: repeat(2, auto);
grid-column-gap: 3px;
padding-inline-start: 3px;
padding-inline-end: 4px;
}
.battery {
background-color: #4472C4;
display: grid;
grid-template-columns: repeat(4, auto);
}
.rightDrive {
background-color: black;
display: grid;
grid-template-columns: repeat(2, auto);
grid-column-gap: 3px;
padding-inline-start: 4px;
padding-inline-end: 3px;
}
<header id="header">
<div class="leftDrive">
<div class="headerBox" id="l_motor">0</div>
<div class="headerBox" id="l_inverter">0</div>
</div>
<div class="battery">
<div class="headerBox" id="battery_1">0</div>
<div class="headerBox" id="battery_2">0</div>
<div class="headerBox" id="battery_3">0</div>
<div class="headerBox" id="battery_4">0</div>
</div>
<div class="rightDrive">
<div class="headerBox" id="r_inverter">0</div>
<div class="headerBox" id="r_motor">0</div>
</div>
</header>
<button onclick="hideheader()">hide</button>
I'm trying to apply classList.add during the mouseover and classList.remove during the mouseout. The class which should be added or removed is ".portraitBG". It has a #32353F for the background.
I don't know why this isn't working when I tell the code to apply this function to all my html class ".portrait.flex". I don't want to use jQuery at this moment.
See the whole code on https://codepen.io/gabrielacaesar/pen/Pmrpzm
My Javascript:
var portrait = document.querySelectorAll(".portrait.flex")
portrait.addEventListener("mouseover", function() {
portrait.classList.add("portraitBG");
});
portrait.addEventListener("mouseout", function() {
portrait.classList.remove("portraitBG");
});
My HTML:
<section class="container">
<div class="portraits flex">
<a class="portrait flex one" href="#" alt="Foto:">
<img src="http://cbn.globoradio.globo.com/estaticos/fotos/uploads2015/categorias/moreno-no-radio/11239_header.png">
<div class="portraitContent">
<p class="portraitName">
Eliseu Padilha
</p>
<p class="portraitGovernment">
governo Michel Temer
</p>
</div>
</a>
<a class="portrait flex two" href="#">
<img src="http://cbn.globoradio.globo.com/estaticos/fotos/uploads2015/categorias/moreno-no-radio/11239_header.png">
<div class="portraitContent">
<p class="portraitName">
Eva Chiavon
</p>
<p class="portraitGovernment">
governo Dilma Rousseff
</p>
</div>
</a>
<a class="portrait flex three" href="#">
<img src="http://cbn.globoradio.globo.com/estaticos/fotos/uploads2015/categorias/moreno-no-radio/11239_header.png">
<div class="portraitContent">
<p class="portraitName">
Jaques Wagner
</p>
<p class="portraitGovernment">
governo Dilma Rousseff
</p>
</div>
</a>
</section>
My CSS:
a {
text-decoration: none;
cursor: pointer;
}
.container {
padding: 0;
max-width: 1500px;
margin: 0 auto;
}
.flex {
display: flex;
}
.portraits {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding: 30px 80px;
}
.portrait {
max-width: 800px;
max-height: 340px;
flex-direction: column;
text-align: center;
padding-top: 30px;
}
.portraitBG {
background: #32353F;
border-radius: 5%;
}
.portrait img {
max-width: 800px;
max-height: 200px;
}
.portraitContent {
border: 3px #32353F solid;
border-radius: 5%;
background: #00EC85;
}
.portraitName {
font-size: 200%;
color: white;
padding-top: 7px;
}
.portraitGovernment {
font-size: 100%;
color: #32353F;
padding-bottom: 7px;
}
better to do it in CSS
.portrait:hover{
background: #32353F;
border-radius: 5%;
}
Pls see my codepen here: http://codepen.io/Chiz/pen/oLpGOB
It looks fine, until you resize the window and reduce the width of the browser window, and then the first card becomes positioned taller than the rest of the 3 cards! What causes this and how do I fix it?
Tks!
* {
box-sizing: border-box;
}
body {
height: 100vh;
font-family: "Open Sans";
}
.header {
background-color: #1b9ef2;
width: 100%;
height: 20rem;
}
.header h1 {
color: white;
font-size: 1.5rem;
line-height: 15rem;
text-align: center;
}
.CardContainer {
width: 90%;
margin: 0 auto;
text-align: center;
margin-top: -6rem;
}
.Card {
display: inline-block;
width: 20%;
height: 30rem;
margin: 0 1rem 0 1rem;
padding: 0rem;
background-color: rgb(250, 250, 250);
border: 1px solid black;
border-radius: 10px;
position:relative;
}
.Card h2 {
color: #1b9ef2;
font-size: 1.2rem;
font-weight: 600;
padding:2.5rem;
}
.cardimgcontainer
{
position:absolute;
top:50%;
transform:translateY(-50%);
}
.Card img
{
width:80%;
height:40%;
max-height:180px;
text-align:center;
}
.Card .Price
{
position:absolute;
bottom:0;
width:100%;
padding:2.5rem;
line-height:1.5rem;
color:rgb(70,70,70);
}
.Card .Price .bold
{
font-weight:800;
font-size:1.4rem;
}
<div class="header">
<h1>Choose your subscription plan</h1>
</div>
<div class="CardContainer">
<div class="Card">
<h2>2 Days Trial</h2>
<div class="cardimgcontainer">
<img src="https://s-media-cache-ak0.pinimg.com/originals/0d/e6/b3/0de6b34699563781365b286c45359692.jpg" />
</div>
<div class="Price"><span class="bold">$9.99</span><br />1 account</div>
</div>
<div class="Card">
<h2>Personal</h2>
<div class="cardimgcontainer">
<img src="http://static.vecteezy.com/system/resources/previews/000/090/876/original/rolling-hills-landscape-vector.jpg" />
</div>
<div class="Price"><span class="bold">$29.99</span><br />5 accounts</div>
</div>
<div class="Card">
<h2>Advanced</h2>
<div class="cardimgcontainer">
<img src="https://d13yacurqjgara.cloudfront.net/users/968424/screenshots/2287311/2015_10_12_flatlandscape_800x600_v01_1x.jpg" />
</div>
<div class="Price"><span class="bold">$39.99</span><br />10 accounts</div>
</div>
<div class="Card">
<h2>Business</h2>
<div class="cardimgcontainer">
<img src="https://s-media-cache-ak0.pinimg.com/736x/18/fe/3f/18fe3f54a4ae949f7993442a9d8a3447.jpg" />
</div>
<div class="Price"><span class="bold">$49.99</span><br />50 accounts</div>
</div>
</div>
Use vertical-align: top;
.Card {
display: inline-block;
width: 20%;
height: 30rem;
margin: 0 1rem 0 1rem;
padding: 0rem;
background-color: rgb(250, 250, 250);
border: 1px solid black;
border-radius: 10px;
position: relative;
vertical-align: top;
}
One more best solution is you can tile your cards into full width which I have shown in demo. (for responsive mode)
Responsive CSS:
#media only screen and (max-width: 800px) {
/*** You can change the responsive screen size as per your requirement.
.Card {
width: 100%;
margin-bottom: 20px;
}
}
Full Demo:
* {
box-sizing: border-box;
}
body {
height: 100vh;
font-family: "Open Sans";
}
.header {
background-color: #1b9ef2;
width: 100%;
height: 20rem;
}
.header h1 {
color: white;
font-size: 1.5rem;
line-height: 15rem;
text-align: center;
}
.CardContainer {
width: 90%;
margin: 0 auto;
text-align: center;
margin-top: -6rem;
}
.Card {
display: inline-block;
width: 20%;
height: 30rem;
margin: 0 1rem 0 1rem;
padding: 0rem;
background-color: rgb(250, 250, 250);
border: 1px solid black;
border-radius: 10px;
position:relative;
}
.Card h2 {
color: #1b9ef2;
font-size: 1.2rem;
font-weight: 600;
padding:2.5rem;
}
.cardimgcontainer
{
position:absolute;
top:50%;
transform:translateY(-50%);
}
.Card img
{
width:80%;
height:40%;
max-height:180px;
text-align:center;
}
.Card .Price
{
position:absolute;
bottom:0;
width:100%;
padding:2.5rem;
line-height:1.5rem;
color:rgb(70,70,70);
}
.Card .Price .bold
{
font-weight:800;
font-size:1.4rem;
}
#media only screen and (max-width: 800px) {
.Card {
width: 100%;
margin-bottom: 20px;
}
}
<div class="header">
<h1>Choose your subscription plan
</h1>
</div>
<div class="CardContainer">
<div class="Card">
<h2>2 Days Trial
</h2>
<div class="cardimgcontainer">
<img src="https://s-media-cache-ak0.pinimg.com/originals/0d/e6/b3/0de6b34699563781365b286c45359692.jpg" />
</div>
<div class="Price">
<span class="bold">$9.99
</span>
<br />1 account
</div>
</div>
<div class="Card">
<h2>Personal
</h2>
<div class="cardimgcontainer">
<img src="http://static.vecteezy.com/system/resources/previews/000/090/876/original/rolling-hills-landscape-vector.jpg" />
</div>
<div class="Price">
<span class="bold">$29.99
</span>
<br />5 accounts
</div>
</div>
<div class="Card">
<h2>Advanced
</h2>
<div class="cardimgcontainer">
<img src="https://d13yacurqjgara.cloudfront.net/users/968424/screenshots/2287311/2015_10_12_flatlandscape_800x600_v01_1x.jpg" />
</div>
<div class="Price">
<span class="bold">$39.99
</span>
<br />10 accounts
</div>
</div>
<div class="Card">
<h2>Business
</h2>
<div class="cardimgcontainer">
<img src="https://s-media-cache-ak0.pinimg.com/736x/18/fe/3f/18fe3f54a4ae949f7993442a9d8a3447.jpg" />
</div>
<div class="Price">
<span class="bold">$49.99
</span>
<br />50 accounts
</div>
</div>
</div>
just add vertical-align: top; for the Card class.
Your layout is looking good in big screen That's why you need to write this code only for small devices so You can try the below code.
#media (max-width: 768px){
.CardContainer .Card{
float: left;
}
}
You need to add vertical-align:top; to .Card.
Because you have used display:inline-block So, by default it is vertical-align:baseline;
And it will align the baseline of the element with the baseline of the parent element.
Your updated Codepen
.Card {
display: inline-block;
width: 20%;
height: 30rem;
margin: 0 1rem 0 1rem;
padding: 0rem;
background-color: rgb(250, 250, 250);
border: 1px solid black;
border-radius: 10px;
position:relative;
vertical-align:top;
}
I think this will do the job:
.CardContainer .card {vertical-align:top;}
I have a row of divs with images within them that looks like this:
And when I change the page size, essentially what it will look like on mobile devices the divs begin to fall below each other like this:
Which is amazing because it's exactly what I want. But I have another row of divs that look like this:
But when I change the page size, this set of divs don't fall under each other like the other divs. They're just cut off by the page so essentially these divs are not mobile responsive. Can anybody help me with have to get these second set of divs responsive like the first set?
Thank you in advance!
HTML:
<div class="row-fluid" id="extras">
<div class="container-fluid">
<div class="row-fluid flex">
<div class="block text-center">
<img src="http://mysite/wp-content/uploads/2016/05/socialmed.png" width="155" height="auto" max-width="100%"/>
</div>
<div class="block text-center">
<ul class="aboutli">
<li><a target="_blank" href="http://mysite/information">About Us</a></li>
<li><a target="_blank" href="http://mysite/information">FAQ's</a></li>
<li><a target="_blank" href="http://mysite/information">Contact Us</a></li>
<li><a target="_blank" href="http://mysite/information">Work With Us</a></li>
<li><a target="_blank" href="http://mysite/information">Terms and Conditions</a></li>
<li><a target="_blank" href="http://mysite/information">Privacy Policy<br></a></li>
<li><a target="_blank" img src="http://mysite/wp-content/uploads/2016/04/DrinkawareRed.png" href="https://www.drinkaware.co.uk/"><div id="drinkaware"></div></a></li>
</ul>
</div>
<div class="block text-center">
<div id="words">
<p class="become">become a driver</p>
<p class="driver-para">As an ever evolving new start up we'll constantly be looking for friendly drivers to join the team, so If you'd be interested in join our team click the button below to see the available opportunities we have available.</p>
<input type="submit" id="driver-btn" value="FIND OUT MORE" onclick="location='http://mysite/join-the-team/'"/>
</div>
</div>
<div class="block text-center">
<img src="http://mysite/wp-content/uploads/2016/07/testimg.png" width="200" height="auto"/>
</div>
</div>
</div>
</div>
CSS:
#extras {
height: auto;
width: 100%;
overflow: hidden;
background-color: #fff;
}
div.block {
padding: 10px 50px 10px 50px;
display: inline-flex;
justify-content: center;
flex-direction: column;
}
.flex {
display: flex;
}
#words {
width: 300px;
height: auto;
}
#linksdrinks {
margin-top: 70px;
margin-right: 70px;
width: 160px;
height: 238px;
display: inline-block;
vertical-align: top;
}
ul.aboutli {
color: #000000;
font-size: 13px;
margin: 0;
text-decoration: none;
list-style-type: none !important;
line-height: 0.8cm;
}
#drinkaware {
width: 156px;
height: 50px;
display:list-item;
background-image: url('http://mysite/wp-content/uploads/2016/04/DrinkawareRed.png');
background-size: 150px auto;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
vertical-align: top;
list-style-type: none !important;
}
#driver {
margin-left: 70px;
margin-right: 70px;
padding: 5px;
width: 300px;
height: auto;
display: inline-block;
}
.become {
color: #a6a6a6;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
.driver-para {
font-size: 13px;
}
#driver-btn {
color: #fd0e35;
font-size: 11px;
font-weight: bold;
text-shadow: none;
padding: 7px;
background-color: #fff;
border: 2px solid #fd0e35;
box-shadow: none;
border-radius: 4px;
outline: none;
}
#driver-btn:hover {
color: #fff;
background-color: #fd0e35;
}
#open24 {
display: inline-block;
width: 200px;
height: auto;
background-image: url('http://mysite/wp-content/uploads/2016/04/open247.png');
background-size: 250px auto;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
}
You can try this
#media screen and (max-width:767px){
.flex {
display: block;
}
}
Try with this code. Write your below css in media query
#media (min-width:767px) {
div.block {
padding: 10px 50px 10px 50px;
display: inline-flex;
justify-content: center;
flex-direction: column;
}
.flex {
display: flex;
}
}
Also for cross browser support display: inline-flex; is now display: flex;
be sure to use
http://autoprefixer.github.io/
You can try below code.
.flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
}