How can I separate the cards in my project; I am new to HTML and am still learning so I don't know how to do this. I don't like how the cards are right up next to each other; is there any way I can fix this?
Here is my code:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height:65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center; /* Added */
flex-wrap:wrap;
}
.gameshell{
height:65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center; /* Added */
flex-wrap:wrap;
}
.card {
display: inline-block;
width: 200px;
height: 160px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 5px;
text-decoration: none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 24px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 36px!Important;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 24px;
text-align: center;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
<!DOCTYPE html>
<head>
<link rel="icon" type="png" href="/images/icon.png"/>
<meta charset="utf-8"/>
<title>Project-LuLo</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="gameshell">
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
</div>
</body>
</html>
There is a lot of duplicated and unnecessary code. Try removing it.
To increase the gap between div elements you can use the gap property.
Check out the docs here.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height: 65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center;
/* Added */
flex-wrap: wrap;
}
.gameshell {
height: auto;
justify-content: center;
display: flex;
gap: 1rem;
/*newly added*/
margin: 5px 20px;
align-items: center;
/* Added */
flex-wrap: wrap;
}
.card {
display: inline-block;
width: 200px;
height: 160px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 5px;
text-decoration: none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 24px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 36px!Important;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 24px;
text-align: center;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="gameshell">
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test" class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
</div>
Try grid for making layouts like this, it comes quite handy.
But right now I am guessing you are learning flex.
There are two ways you can do this.
First: the flex way
gap: 10px;
the gap property is actually quite great. It works just like its literal meaning. It produces a gap between your flex childs, Horizontally and vertically too.
Second: the css way
.card{
margin: 10px; //quite simple actually :)
}
try gap though (works with grid too)
Related
I've been coding for a while. then use Bootstrap later make me see the problem by only my first section(home) background turns white but in html background-color is black. Maybe I've used Bootstrap before, it's causing the error.enter image description here
html {
background-color: #222831;
font-size: calc(60% + 0.8vmin);
width: 100%;
height: 100%;
height: 1000px;
}
.pic-me img{
max-height: 500px;
border-radius: 12px;
}
.home {
display: relative;
max-width: 1000px;
min-height: 100vh;
margin-top: calc(6rem + 2rem);
margin-left: auto;
margin-right: auto;
padding: 4rem 2rem;
text-align: center;
}
.home-container {
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
}
.home-container .media {
display: flex;
flex-direction: column;
row-gap: 1rem;
}
.home-container .media a {
font-size: 1.5rem;
}
.home-container .media a :hover {
color: #ff6768;
}
.home-container .me {
margin: 0 10px;
}
.home-container .me h2 {
font-size: 3rem;
color: #FD7013;
font-weight: 600px;;
}
.home-container .me h3 {
font-size: 1.5rem;
color: #F3AA29;
font-weight: 600px;;
}
.home-container .me p {
max-width: 380px;
font-size: 2rem;
color: #EEEEEE;
font-weight: 500px;
}
.home a {
font-size: 1.5rem;
}
.home .scroll-down i{
color: #ff6768;
font-size: 1.5rem;
margin-top: 30px;
animation: scroll-down 2s ease infinite;
}
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<section class="home" id="home">
<div class="home-container">
<div class="media">
<a href="https://www.facebook.com/webbalaka/" target="_blank"
><i class="fa-brands fa-facebook-f"></i
></a>
<a href="https://www.instagram.com/web.wafu/" target="_blank"
><i class="fa-brands fa-instagram"></i
></a>
<i class="fa-brands fa-twitter"></i>
</div>
<div class="me">
<h2>Pasit Khumsena</h2>
<h3>SCiUS Student</h3>
<p>"Don't worry about what you can't control"</p>
</div>
<div class="pic-me">
<!-- <img src="/AnotherPort/img/IOIOIOIO.JPG" alt="" /> -->
<div style="background-color: red; width: 350px; height: 400px"></div>
</div>
</div>
<a href="#about" class="scroll-down"
>Scroll Down <i class="fa-solid fa-angles-down"></i
></a>
</section>
or perhaps caused by nav-bar high over section.
.nav-bar {
position: relative;
height: calc(4rem + 1rem);
display: flex;
justify-content: space-between;
align-items: center;
margin-left: auto;
margin-right: auto;
padding: 0 1.25rem;
transition: 0.5s ;
}
.nav-item {
justify-content: space-around;
display: flex;
column-gap: 2rem;
}
.nav-bar h1{
font-size: 3em;
color: #ff6768;
}
.nav-item a {
font-size: 1.2em;
font-weight: 500px;
color: #EEEEEE;
}
.nav-item a:hover {
color: #F3AA29;
}
.pic-me img{
max-height: 500px;
border-radius: 12px;
}
<header>
<div class="nav-bar">
<div class="Portfolio">
<h1>Portfolio</h1>
</div>
<div class="nav-item">
Home
About
Education
Skill
Contact
</div>
</div>
</header>
I need two of my main buttons to have the same sizes, I'm still new to web development so I have no clue.
I currently have the following HTML and CSS for the index.html
<body>
<div>
<img src="img/projectfly-logo.svg">
<p class="center">We're upgrading!</p>
<div class="center">
<h1 class="button1"><i class="fas fa-bell"></i> Update</h1>
<h1 class="button2"><i class="fab fa-paypal"></i> Support the project</h1>
<div>
</div>
And then created a center class and 2 different button classes.
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
}
.center{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
This is the output:
https://leonisgeweldig.be/stackoverflow/
Give both buttons same width and reduce the font-size
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
width: 100px;
font-size: 10px;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
width: 100px;
font-size: 10px;
}
.container{
position: relative;
}
.center{
position: absolute;
top: 50%;
left: calc(50% - 210px);
color: white;
}
<body>
<div class="container">
<img height="100%" width="100%" src="https://images.pexels.com/photos/1254140/pexels-photo-1254140.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<p class="center">We're upgrading!</p>
<div class="center">
<h1 class="button1"><i class="fas fa-bell"></i> Update</h1>
<h1 class="button2"><i class="fab fa-paypal"></i> Support the project</h1>
</div>
</div>
</body>
You can add a width and an align center to the classes:
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
width: 300px;
text-align: center;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
width: 300px;
text-align: center;
}
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
width: 100px;
font-size: 11px;
}
a{text-decoration:none;}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
width: 100px;
font-size: 11px;
}
.center{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<div>
<img src="img/projectfly-logo.svg">
<p class="center">We're upgrading!</p>
<div class="center">
<h1 class="button1"><i class="fas fa-bell"></i> Update</h1>
<h1 class="button2"><i class="fab fa-paypal"></i> Support the project</h1>
<div>
</div>
Avoid wrapping block level element with inline element.
Also you can define common button class for both these buttons and add another
class which defines
background color to differentiate.
so you can write HTML and css more semantic as:
.button{
padding: 20px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
width: 150px;
text-align:center;
margin:0 10px;
color: #fff;
text-decoration: none;
}
.background-grey{
background: grey
}
.center{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<p class="center">We're upgrading!</p>
<div class="center">
<a href="#" class="button">
<i class="fas fa-bell"></i>
<span> Update</span>
</a>
<a href="#" class="button background-grey">
<i class="fab fa-paypal"></i>
<span> Support the project<span>
</a>
<div>
Simply give them same width.
.button1,
.button2 {
min-width: 250px !important;
text-align: center;
font-size: 18px;
margin: 10px 15px;
box-sizing: content-box;
}
.button1 {
padding: 20px 60px;
background-color: #00B056 !important;
border-radius: 300px;
display: inline-block;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
}
.center {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
a {
text-decoration: none;
color: white;
}
<p class="center">We're upgrading!</p>
<div class="center">
<a href="#">
<h1 class="button1"><i class="fas fa-bell" aria-hidden="true"></i> Update</h1>
</a>
<h1 class="button2"><i class="fab fa-paypal" aria-hidden="true"></i> Support the project</h1>
<div>
</div>
</div>
<div>
I've reached an obstacle I can't seem the get through in my styles.css. I'm re-creating a Google homepage, and for some reason cannot get the search bar to become centered in the page.
I've tried doing margin: auto 0;, border-left: 200px;, text-align: center;, but the search bar will not move (I put this within .searchbar .search).
.googlelogo {
display: block;
margin: 0 auto;
margin-top: 150px;
}
.nav {
display: flex;
justify-content: space-between;
}
.nav a {
text-decoration: none;
color: #696969;
}
.nav .nav-left .about,
.nav .nav-right .gmail {
padding: 10px;
}
.searchbar .search {
border-radius: 20px;
height: 30px;
width: 400px;
}
.searchbuttons {
text-align: center;
}
.button {
float: center;
background-color: #f2f2f2;
border: 1px solid #e4e4e4;
border-radius: 2px;
color: #595959;
font-size: 11px;
font-weight: bold;
padding: 6px 5px;
margin-right: 6.5px;
margin-left: 6.5px;
}
.footer {
display: flex;
flex-flow: row;
justify-content: space-between;
background-color: #f2f2f2;
padding: 15px;
margin-top: 240px;
width: 98%;
}
.footer a {
text-decoration: none;
color: #696969;
}
.footer .footer-left .advertising,
.footer .footer-left .business,
.footer .footer-left .howsearchworks {
margin: 0 10px;
}
.footer .footer-right .privacy,
.footer .footer-right .terms,
.footer .footer-right .settings {
margin: 0 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href='/styles/styles.css' text='styles/css' rel='stylesheet'>
<title>Google</title>
</head>
<body>
<div class='nav'>
<div class='nav-left'>
<a class='about' href='www.google.com/#'>About</a>
<a class='store' href='www.google.com/#'>Store</a>
</div>
<div class='nav-right'>
<a class='images' href='www.google.com/#'>Images</a>
<a class='gmail' href='www.google.com/#'>Gmail</a>
</div>
</div>
<div class='logo'>
<img class='googlelogo' src='http://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c51f.png' alt='Google logo' height='250'>
</div>
<div class='searchbar'>
<form>
<input class='search' type='text'>
</form>
</div>
<div class='searchbuttons'>
<form>
<button class='button' label='Google Search'>Google Search</button>
<button class='button' label="I'm Feeling Lucky">I'm Feeling Lucky</button>
</form>
</div>
<div class='footer'>
<div class='footer-left'>
<a class='advertising' href='www.google.com/#'>Advertising</a>
<a class='business' href='www.google.com/#'>Business</a>
<a class='howsearchworks' href='www.google.com/#'>How Search works</a>
</div>
<div class='footer-right'>
<a class='privacy' href='www.google.com/#'>Privacy</a>
<a class='terms' href='www.google.com/#'>Terms</a>
<a class='settings' href='www.google.con/#'>Settings</a>
</div>
</div>
</html>
How can I get the search bar to become centered and aligned on the screen (formatted so it's above the two buttons below and below the Google logo)?
Added this
.searchbar {
display: flex;
justify-content: center;
padding-bottom: 1em;
}
.googlelogo {
display: block;
margin: 0 auto;
margin-top: 150px;
}
.nav {
display: flex;
justify-content: space-between;
}
.nav a {
text-decoration: none;
color: #696969;
}
.nav .nav-left .about,
.nav .nav-right .gmail {
padding: 10px;
}
.searchbar {
display: flex;
justify-content: center;
padding-bottom: 1em;
}
.searchbar .search {
border-radius: 20px;
height: 30px;
width: 400px;
}
.searchbuttons {
text-align: center;
}
.button {
float: center;
background-color: #f2f2f2;
border: 1px solid #e4e4e4;
border-radius: 2px;
color: #595959;
font-size: 11px;
font-weight: bold;
padding: 6px 5px;
margin-right: 6.5px;
margin-left: 6.5px;
}
.footer {
display: flex;
flex-flow: row;
justify-content: space-between;
background-color: #f2f2f2;
padding: 15px;
margin-top: 240px;
width: 98%;
}
.footer a {
text-decoration: none;
color: #696969;
}
.footer .footer-left .advertising,
.footer .footer-left .business,
.footer .footer-left .howsearchworks {
margin: 0 10px;
}
.footer .footer-right .privacy,
.footer .footer-right .terms,
.footer .footer-right .settings {
margin: 0 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href='/styles/styles.css' text='styles/css' rel='stylesheet'>
<title>Google</title>
</head>
<body>
<div class='nav'>
<div class='nav-left'>
<a class='about' href='www.google.com/#'>About</a>
<a class='store' href='www.google.com/#'>Store</a>
</div>
<div class='nav-right'>
<a class='images' href='www.google.com/#'>Images</a>
<a class='gmail' href='www.google.com/#'>Gmail</a>
</div>
</div>
<div class='logo'>
<img class='googlelogo' src='http://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c51f.png' alt='Google logo' height='250'>
</div>
<div class='searchbar'>
<form>
<input class='search' type='text'>
</form>
</div>
<div class='searchbuttons'>
<form>
<button class='button' label='Google Search'>Google Search</button>
<button class='button' label="I'm Feeling Lucky">I'm Feeling Lucky</button>
</form>
</div>
<div class='footer'>
<div class='footer-left'>
<a class='advertising' href='www.google.com/#'>Advertising</a>
<a class='business' href='www.google.com/#'>Business</a>
<a class='howsearchworks' href='www.google.com/#'>How Search works</a>
</div>
<div class='footer-right'>
<a class='privacy' href='www.google.com/#'>Privacy</a>
<a class='terms' href='www.google.com/#'>Terms</a>
<a class='settings' href='www.google.con/#'>Settings</a>
</div>
</div>
</html>
<div class='searchbar'>
<form style="text-align: center">
<input class='search' type='text'>
</form>
</div>
I am attempting to recreate buttons that I have already created for my desktop site by using the same css styling on the mobile buttons. i have tried deleting the css one line at time and it doesn't seem to be the css (after all the same css works for the desktop buttons.
The problem: I want the buttons to be completely styled but instead it is leaving the stock button and adding the style as a border
#clients-title {
background: #f4f4f4;
padding: 1rem 0;
}
#clients-grid {
display: grid;
background: #f4f4f4;
text-align: center;
padding: 1rem 0;
margin: 0 10%;
grid-template-columns: 33.3% 33.3% 33.3%;
}
#clients-btn-grid {
display: grid;
background: #f4f4f4;
text-align: center;
padding: 1rem 0;
margin: 0 10%;
grid-template-columns: 33.3% 33.3% 33.3%;
}
#clients-btn-grid .cr-btn {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#clients-btn-grid .cr-btn:hover {
cursor: pointer;
background-color: #333;
}
#media(max-width: 800px) {
#clients-btn-grid {
display: none;
}
}
.mobile-grid {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#media(min-width: 800px) {
.mobile-grid {
display: none;
}
}
<section id="clients-title">
<div class="grid-items">
<h2 class="m-heading text-center">
<span id="client-r" class="text-primary">Client</span> Resources
</h2>
</div>
<div id="clients-grid">
<div class="grid-items">
<h2>
TD Ameritrade Access
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://www.advisorclient.com/login'">LOGIN</button>
</div>
</div>
<div class="grid-items">
<h2>
American Equity
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'">LOGIN</button>
</div>
</div>
<div class="grid-items">
<h2>
IRS-Where's My Refund?
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'">LOGIN</button>
</div>
</div>
</div>
<div id="clients-btn-grid">
<div class="grid-items">
<button onclick="location.href='https://www.advisorclient.com/login'"class="cr-btn">LOGIN</button>
</div>
<div class="grid-items">
<button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'"class="cr-btn">LOGIN</button>
</div>
<div class="grid-items">
<button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'"class="cr-btn">LOGIN</button>
</div>
</div>
</section>
If you click full screen after running the code you can see the buttons displaying correct.
SOLUTION: Instead of targeting the div that the button is in I just needed target the parent div with buttons e.g
#clients-grid button {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
You did not style buttons inside #clients-grid. I also recommend you to use the same button tags for desktop and mobile view, because it would be a desaster if you have to change a link for example.
Just delete the .mobile-grid div around the button tags and style the buttons like in the desktop view.
added
button {
background-color: #4C9FCF;
color: white;
border: none;
}
button:focus{
outline:none}
#clients-title {
background: #f4f4f4;
padding: 1rem 0;
}
#clients-grid {
display: grid;
background: #f4f4f4;
text-align: center;
padding: 1rem 0;
margin: 0 10%;
grid-template-columns: 33.3% 33.3% 33.3%;
}
#clients-btn-grid {
display: grid;
background: #f4f4f4;
text-align: center;
padding: 1rem 0;
margin: 0 10%;
grid-template-columns: 33.3% 33.3% 33.3%;
}
#clients-btn-grid .cr-btn {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#clients-btn-grid .cr-btn:hover {
cursor: pointer;
background-color: #333;
}
#media(max-width: 800px) {
#clients-btn-grid {
display: none;
}
}
.mobile-grid {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
button {
background-color: #4C9FCF;
color: white;
border: navajowhite;
}
button:focus{
outline:none}
#media(min-width: 800px) {
.mobile-grid {
display: none;
}
}
<section id="clients-title">
<div class="grid-items">
<h2 class="m-heading text-center">
<span id="client-r" class="text-primary">Client</span> Resources
</h2>
</div>
<div id="clients-grid">
<div class="grid-items">
<h2>
TD Ameritrade Access
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://www.advisorclient.com/login'">LOGIN</button>
</div>
</div>
<div class="grid-items">
<h2>
American Equity
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'">LOGIN</button>
</div>
</div>
<div class="grid-items">
<h2>
IRS-Where's My Refund?
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'">LOGIN</button>
</div>
</div>
</div>
<div id="clients-btn-grid">
<div class="grid-items">
<button onclick="location.href='https://www.advisorclient.com/login'"class="cr-btn">LOGIN</button>
</div>
<div class="grid-items">
<button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'"class="cr-btn">LOGIN</button>
</div>
<div class="grid-items">
<button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'"class="cr-btn">LOGIN</button>
</div>
</div>
</section>
How do I put these <a>'s in the center of the div, next to each other with 40px of space in between them inside of a 100% width div?
a.explore {
padding: 15px 20px;
text-decoration: none;
text-align: center;
border: 1px solid #4f96b6;
font-size: 20px;
}
#container {
width: 100%;
}
<div id="container">
<a class="explore" href="#" target="_blank">I'm Ready To Go</a>
<a class="explore" href="#" target="_blank">Take Me Somewhere</a>
</div>
You can do this by using display:flex and justify-content:center on #container
a.explore {
padding: 15px 20px;
text-decoration: none;
text-align: center;
border: 1px solid #4f96b6;
font-size: 20px;
}
a.explore:first-child {
margin-right:40px;
}
#container {
width: 100%;
display:flex;
justify-content: center;
}
<div id="container">
<a class="explore" href="#" target="_blank">I'm Ready To Go</a>
<a class="explore" href="#" target="_blank">Take Me Somewhere</a>
</div>
These aren't buttons...they're links...there's a difference.
However, flexbox is ideal here:
a.explore {
padding: 15px 20px;
text-decoration: none;
text-align: center;
border: 1px solid #4f96b6;
font-size: 20px;
}
#container {
width: 100%;
display: flex;
justify-content: center;
padding: 1em;
background: #c0ffee;
}
a:first-child {
margin-right: 20px;
}
a:last-child {
margin-left: 20px;
}
<div id="container">
<a class="explore" href="#" target="_blank">I'm Ready To Go</a>
<a class="explore" href="#" target="_blank">Take Me Somewhere</a>
</div>