This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 4 years ago.
I'm trying to move the register button from the middle to the right (as see on the following photos) Without it affecting the 3 items in the middle.
So this is what I have:
This is what I'm trying to get:
Here is my code:
body {
background-color: #323642;
}
.menubar {
justify-content: center;
display: flex;
flex-direction: row;
background-color: #272a33;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
align-items: center;
height: 100%;
}
.menuitem {
padding: 11px;
padding-top: 17px;
padding-left: 29px;
font-size: 22px;
font-family: "Ostrich Sans";
color: #ee5f95;
text-decoration: none;
}
#login_button {
margin-top: 2px;
border-radius: 5px;
background-color: #ee5f95;
width: 100px;
height: 34px;
text-align: center;
border: none;
font-family: "Ostrich Sans";
font-size: 22px;
color: white;
line-height: 33px;
transition: 0.7s;
justify-content: flex-end;
}
#login_button:hover {
width: 110px;
background-color: #ae466d;
transition: 0.7s;
}
<head lang="Eng">
<meta charset="UTF-8">
<title>test </title>
</head>
<body>
<div class="menubar" id="hey">
<a class="menuitem" id="firstmenuitem" href="./buy_sell.html">Buy & Sell</a>
<a class="menuitem" href="./exchange.html">Exchange</a>
<a class="menuitem" href="./events.html">Events</a>
<div id="delimeter"></div>
<button id="login_button">Register</button>
</div>
</body>
I have tried adding margin-right:auto; though it just completly shifter the button to the right and didn't leve any space between it and the window. I have also tried adding justify-content: space-between; but it didn't give me what I wanted. if anyone could help that would be greatly appreciated!
you can put the position of the button absolute like this :
#login_button {
position: absolute;
right: 10px;
margin-top: 2px;
border-radius: 5px;
background-color: #ee5f95;
width: 100px;
height: 34px;
text-align: center;
border: none;
font-family: "Ostrich Sans";
font-size: 22px;
color: white;
line-height: 33px;
transition: 0.7s;
justify-content: flex-end;
}
https://jsfiddle.net/fh3cj02d/
You could use a flexbox inside a flexbox like this
body {
background-color: #323642;
}
.menubar {
display: flex;
flex-direction: row;
background-color: #272a33;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
height: 100%;
}
.left {
flex: 1;
}
.middle {
display: flex;
}
.right {
flex: 1;
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.menuitem {
padding: 11px;
padding-top: 17px;
padding-left: 29px;
font-size: 22px;
font-family: "Ostrich Sans";
color: #ee5f95;
text-decoration: none;
}
#login_button {
margin-top: 2px;
margin-right: 10px;
border-radius: 5px;
background-color: #ee5f95;
width: 100px;
height: 34px;
text-align: center;
border: none;
font-family: "Ostrich Sans";
font-size: 22px;
color: white;
line-height: 33px;
transition: 0.7s;
}
#login_button:hover {
width: 110px;
background-color: #ae466d;
transition: 0.7s;
}
<html>
<head lang="Eng">
<meta charset="UTF-8">
<title>test </title>
</head>
<body>
<div class="menubar" id="hey">
<div class="left"></div>
<div class="middle">
<a class="menuitem" id="firstmenuitem" href="./buy_sell.html">Buy & Sell</a>
<a class="menuitem" href="./exchange.html">Exchange</a>
<a class="menuitem" href="./events.html">Events</a>
<div id="delimeter"></div>
</div>
<div class="right">
<button id="login_button">Register</button>
</div>
</div>
</body>
</html>
I like this because it's purely flexbox, no absolute positioning or margin auto. Also the .middle div is naturally centered this way.
One way to accomplish this is to make the left margin of the first and last item auto. In this example, you would apply a left margin to .menuitem:last-of-type and #login_button.
body {
background-color: #323642;
}
.menubar {
justify-content: center;
display: flex;
flex-direction: row;
background-color: #272a33;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
align-items: center;
height: 100%;
}
.menuitem {
padding: 11px;
padding-top: 17px;
padding-left: 29px;
font-size: 12px;
font-family: "Ostrich Sans";
color: #ee5f95;
text-decoration: none;
}
.menuitem:first-of-type {
margin-left: auto; /* NEW */
}
#login_button {
margin-left: auto; /* NEW */
margin-top: 2px;
border-radius: 5px;
background-color: #ee5f95;
width: 100px;
height: 34px;
text-align: center;
border: none;
font-family: "Ostrich Sans";
font-size: 12px;
color: white;
line-height: 33px;
transition: 0.7s;
justify-content: flex-end;
}
#login_button:hover {
width: 110px;
background-color: #ae466d;
transition: 0.7s;
}
<body>
<div class="menubar" id="hey">
<a class="menuitem" id="firstmenuitem" href="./buy_sell.html">Buy & Sell</a>
<a class="menuitem" href="./exchange.html">Exchange</a>
<a class="menuitem" href="./events.html">Events</a>
<div id="delimeter"></div>
<button id="login_button">Register</button>
</div>
</body>
I think you can just edit your body this way:
<body>
<div class="menubar" id="hey">
<a class="menuitem" id="firstmenuitem" href="./buy_sell.html">Buy & Sell</a>
<a class="menuitem" href="./exchange.html">Exchange</a>
<a class="menuitem" href="./events.html">Events</a>
<div id="delimeter"></div>
<button class="festa" id="login_button">Register</button>
</div>
and add this css class:
.festa {
position: absolute;
right: 0px;
}
This will keep the 3 buttons in the perfect center of the screen and the register one to the right, but they will overlap onto small screens.
This is the fiddle: https://jsfiddle.net/5xbnhkcr/
Otherwise you can play with flexbox weights (this is similar to your desired result)
modify body this way:
<body>
<div class="menubar" id="hey">
<div class="buttons">
<a class="menuitem" id="firstmenuitem" href="./buy_sell.html">Buy & Sell</a>
<a class="menuitem" href="./exchange.html">Exchange</a>
<a class="menuitem" href="./events.html">Events</a>
<div id="delimeter"></div>
</div>
<button class="festa" id="login_button">Register</button>
</div>
and add those css classes:
.buttons {
flex: 9;
justify-content: center;
display: flex;
flex-direction: row;
}
.festa {
flex: 1;
}
Using flex: 9; and flex: 1; will divide the div into 10 parts.
The part containing the 3 buttons will occupy 9/10 of the width and the register button 1/10.
here's the fiddle: https://jsfiddle.net/e5hp2v7L/
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 started a new electron project(angulat 9 : using scss), currently stuck at making custom title bar. Here is my code:
app.component.html
<div class="container">
<app-titlebar></app-titlebar>
<div id="router_outlet">
<router-outlet></router-outlet>
</div>
</div>
titlebar.component.html
html, body{
margin: 0 ;
padding: 0 ;
width: 100% ;
height: 100% ;
}
.titlebar {
display: flex;
position: relative;
border: 1px solid black ; /* for reference*/
top: 0;
left: 0;
justify-content: space-between;
height: 3rem;
flex-direction: row;
}
.window-button,
.back-button {
font-size: 12pt;
font-weight: lighter;
-webkit-app-region: no-drag;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
.window-button {
padding-left: 15px;
padding-right: 15px;
}
.back-button {
padding-left: 17px;
padding-right: 17px;
}
#restore {
transform: rotate(180deg);
}
.window,
.navigation {
display: flex;
align-items: center;
}
.normal:hover {
background-color: rgba(0,0,0,0.2);
}
.danger:hover {
background-color: red;
color: white;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="titlebar">
<div class="navigation">
<a class="back-button normal material-icons">arrow_back</a>
<span class="apptitle">Electron-App</span>
</div>
<div class="window">
<a class="window-button normal material-icons">remove</a>
<a *ngIf="showMaximizeButton ; else showRestore" class="window-button normal material-icons">crop_square</a>
<!-- <ng-template #showRestore>
<a class="window-button normal material-icons" id="restore">flip_to_front</a>
</ng-template> -->
<a class="window-button danger material-icons">clear</a>
</div>
</div>
My question is how to fill these <a> tag entirely to their parent div element height so that on hovering these link the background area filled fully to the .titlebar height.
Set their height to full and make them flex too to allow vertical positioning of their content (they are already set to inline-block:
html, body{
margin: 0 ;
padding: 0 ;
width: 100% ;
height: 100% ;
}
.titlebar {
display: flex;
position: relative;
border: 1px solid black ; /* for reference*/
top: 0;
left: 0;
justify-content: space-between;
height: 3rem;
flex-direction: row;
}
.window-button,
.back-button {
font-size: 12pt;
font-weight: lighter;
-webkit-app-region: no-drag;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
height: 100%;
display: inline-flex !important;
align-items: center;
}
.window-button {
padding-left: 15px;
padding-right: 15px;
}
.back-button {
padding-left: 17px;
padding-right: 17px;
}
#restore {
transform: rotate(180deg);
}
.window,
.navigation {
display: flex;
align-items: center;
}
.normal:hover {
background-color: rgba(0,0,0,0.2);
}
.danger:hover {
background-color: red;
color: white;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="titlebar">
<div class="navigation">
<a class="back-button normal material-icons">arrow_back</a>
<span class="apptitle">Electron-App</span>
</div>
<div class="window">
<a class="window-button normal material-icons">remove</a>
<a *ngIf="showMaximizeButton ; else showRestore" class="window-button normal material-icons">crop_square</a>
<!-- <ng-template #showRestore>
<a class="window-button normal material-icons" id="restore">flip_to_front</a>
</ng-template> -->
<a class="window-button danger material-icons">clear</a>
</div>
</div>
You could make the anchor tags use display: flex:
.titlebar a,
.window a {
height: 100%;
display: flex;
align-items: center;
}
Here's the working snippet:
html, body{
margin: 0 ;
padding: 0 ;
width: 100% ;
height: 100% ;
}
.titlebar {
display: flex;
position: relative;
border: 1px solid black ; /* for reference*/
top: 0;
left: 0;
justify-content: space-between;
height: 3rem;
flex-direction: row;
}
.titlebar a,
.window a {
height: 100%;
display: flex;
align-items: center;
}
.window-button,
.back-button {
font-size: 12pt;
font-weight: lighter;
-webkit-app-region: no-drag;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
.window-button {
padding-left: 15px;
padding-right: 15px;
}
.back-button {
padding-left: 17px;
padding-right: 17px;
}
#restore {
transform: rotate(180deg);
}
.window,
.navigation {
display: flex;
align-items: center;
}
.normal:hover {
background-color: rgba(0,0,0,0.2);
}
.danger:hover {
background-color: red;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="titlebar">
<div class="navigation">
<a class="back-button normal material-icons">arrow_back</a>
<span class="apptitle">Electron-App</span>
</div>
<div class="window">
<a class="window-button normal material-icons">remove</a>
<a *ngIf="showMaximizeButton ; else showRestore" class="window-button normal material-icons">crop_square</a>
<!-- <ng-template #showRestore>
<a class="window-button normal material-icons" id="restore">flip_to_front</a>
</ng-template> -->
<a class="window-button danger material-icons">clear</a>
</div>
</div>
I was coding my website when I realized that my Type to search button is quite high on the Website. Is there a way that I can get that to come down a bit? Here is my code For this project. Also if you see anyway that I can improve this website please tell me, also could you please help give me some tips on how I can make my code neater and more readable. Over all the type to search is the biggest problem to fix but if you see some others please let me know. Thank you!
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
<link href="context/styles.css" rel="stylesheet" type="text/css">
<link href="Webfonts/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<ul class="navbarlist">
<li class="navbarimg"><img class="navbarlogo" src="img/LOGO.png"></li>
<li class="navbarelementL">Browse</li>
<li class="navbarelementL">Today's Deals</li>
<li class="navbarelementR">Shopping Cart</li>
</ul>
<div class="searchbox">
<input class="search-txt" type="text" name="" placeholder="Type to Search">
<a class="search-btn" href="#"></a>
<i class="fas fa-search"></i>
</div>
</div>
<div class="banner">
<img class="titleimg" src="img/TITLE.jpg">
</div>
<div class="row">
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
</div>
</div>
<div class="bottomnav">
<div class="bottomlogo">
<img class="navbarlogo2" src="img/LOGO.png">
</div>
<div class='nav'>
<div class='left'>
<ul>
<li class="bottomelement">About Us</li>
<li class="bottomelement">Affiliates</li>
</ul>
</div>
<div class='right'>
<ul>
<li class="bottomelement">TOS</li>
<li class="bottomelement">Fourth </li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
/*General*/
h2{
font-family: 'Ubuntu', sans-serif;
justify-content: center;
margin: auto;
}
body{
margin:0;
padding:0;
}
/*Navbar*/
.navbar{
float: left;
width: 100%;
background-color: rgb(248, 138, 180);
}
.navbarlogo{
width: 60px;
height: auto;
}
.navbarlist{
list-style-type:none;
font-family: 'Ubuntu', sans-serif;
}
.navbarelementL{
display: inline-block;
margin-right: 10px;
transition-property: all;
transition-duration: 1s;
float: left;
}
.navbarelementL:hover{
display: inline-block;
margin-right: 10px;
font-size: 20px;
}
.navbarelementR{
display: inline-block;
margin-right: 10px;
transition-property: all;
transition-duration: 1s;
float:right;
}
.navbarelementR:hover{
display: inline-block;
margin-right: 10px;
font-size: 20px;
}
/*end*/
.navbarimg{
display: inline-block;
margin-right: 30px;
float:left;
}
.popupnavimg{
display: inline-block;
margin-right: 30px;
float:left;
}
.popupimg{
width: 40px;
height:auto;
}
.searchbox{
position: absolute;
top: 35px;
left: 50%;
transform: translate(-50%,-50%);
background: rgb(255, 255, 255);
height: 50px;
border-radius: 40px;
padding: 5px;
}
.searchbox:hover > .search-txt{
width: 240px;
padding: 0 6px;
}
.searchbox:hover > .search-btn{
background: white;
}
.search-btn{
color: black;
float: right;
width: 50px;
height: 50px;
border-radius: 50%;
background: skyblue;
display: flex;
justify-content: center;
align-items: center;
transition: 0.7s;
}
.search-txt{
border:none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.7s;
line-height: 40px;
width: 0;
}
.fas{
position: absolute;
margin-left: 18.0px;
margin-top: 18.5px;
size: 40px;;
}
.titleimg{
width:100%;
}
/*grid1*/
/* Three image containers (use 25% for four, and 50% for two, etc) */
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 10px;
}
body {
margin:0
}
body {
margin:0
}
.bottomnav {
width: 100%;
background-color: rgb(248, 138, 180);
position: relative;
}
.navbarlogo2 {
display: block;
margin-left: auto;
margin-right: auto;
width: 120px;
text-decoration: none;
position: absolute;
filter: brightness(10);
top: 15px;
left: calc(50% - 60px) /*center top left corner then remove half logo width (120px)*/
}
/*bottombar*/
.nav {
display: grid;
grid-gap: 120px;
grid-template-columns: 1fr 1fr;
}
.nav ul {
padding-left: 0;
}
.nav ul li {
list-style: none;
text-align: center;
padding-left: 0;
}
.left,
.right {
flex: 1;
}
.bottomelement{
font-size: 20px;
}
.bottomelement:hover{
font-size: 25px;
transition-duration: 1s;
}
Try adding margin-top to
.search-txt {
//...
margin-top: 7px;
}
Check the fiddle here
To answer your other questions, normally IDE's has formatting options included. Else you can use online sites like cleancss.com for CSS or htmlformatter.com for HTML or beautifier.io for JavaScript.
I'm trying to add filter options to my filter area but have been unsuccessful so far. Text appears just fine, but things like text boxes, radio boxes, buttons, etc aren't appearing for some reason. Probably a simple fix, but I'm very new to CSS, HTML and design in general. If anyone could point me in the right direction, that would be awesome!
Screenshot: https://i.imgur.com/5KwXys4.jpg
HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Some Web Page</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='menu-container'>
<div class='menu'>
<div class='links'>
<div class='signup'>Sign Up</div>
<div class='login'>Login</div>
</div>
</div>
</div>
<div class='header-container'>
<div class='header'>
<div class='logo'><img src='images/postloco.svg'/></div>
</div>
</div>
<main>
<input id="toggle" type="checkbox">
<label for="toggle">
<div class="filterbutton"><img src='images/filterbutton.svg'/></div>
</label>
<div id="expand">
<section class="Filter">
<h2>Text field</h2>
<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<br><br>
<input type="submit">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text field is 20 characters.</p>
</section>
</div>
</main>
<section class="carousel">
</section>
</body>
<footer>
<img src="images/facebook.svg" alt="facebook" title="facebook" href="#" class="social">
<img src="images/twitter.svg" alt="twitter" title="twitter" href="#" class="social">
<img src="images/instagram.svg" alt="instagram" title="instagram" href="#" class="social">
<img src="images/snapchat.svg" alt="snapchat" title="snapchat" href="#" class="social">
<ul>
<a alt="about" title="About" href="#" class="footerlink">About</a>
<a alt="about" title="About" href="#" class="footerlink">Contact</a>
<a alt="about" title="About" href="#" class="footerlink">Team</a>
<a alt="about" title="About" href="#" class="footerlink">Whatever</a>
</ul>
</footer>
</html>
CSS
* {
margin: 0;
padding: 0;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.menu-container {
color: #fff;
background-color: #A34F43;
padding: 20px 0;
display: flex;
justify-content: space-between;
}
.menu {
width: 100%;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.links {
display: flex;
justify-content: flex-end;
}
.login {
margin-left: 20px;
}
.header-container {
background-color: #FF7C69;
display: flex;
justify-content: center;
}
.header {
width: 100%;
height: 300px;
display: flex;
justify-content: space-between;
align-items: center;
}
.carousel-test {
display: flex;
justify-content: center;
}
.carousel-grid-container {
display: flex;
justify-content: center;
}
.carousel-grid {
width: 900px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.logo {
width: 200px;
display: block;
margin: 0 auto;
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: "Open Sans", Arial;
width: 100%;
}
main {
background: #FF7C69;
width: 100%;
margin: 0px auto;
}
input {
display: none;
visibility: hidden;
}
label {
/* display: block; */
/* text-align: center; */
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
label:hover {
color: #000;
}
#expand {
height: 0px;
overflow: hidden;
transition: height 0.3s;
background-color: #D6DBED;
color: black;
}
#toggle:checked ~ #expand {
height: 250px;
}
footer {
background-color: #A34F43;
text-align: right;
color: #eee;
text-align: center;
position: absolute;
width: 100%;
/* display: flex; */
}
.footerlink {
text-decoration: none;
color: white;
text-align: justify;
display: block;
padding: 1px;
}
.social {
padding: 10px;
width: 50px;
text-align: right;
float: right;
}
.social:hover {
opacity: 0.7;
}
legend {
background-color: #000;
color: #fff;
padding: 3px 6px;
}
.output {
font: 1rem 'Fira Sans', sans-serif;
}
input {
margin: .4rem;
}
.filterbutton {
margin: 0px;
padding: 0px;
width: 150px;
display: block;
}
In your css you have this line that is hiding all form inputs
input {
display: none;
visibility: hidden;
}
I don't think you want to globally hide all inputs like this. If you need to hide certain input items you can group them either by css or by putting them in special HTML tags (divs for instance)
I see that you are having your main form expand after clicking a checkbox. In this case things should still work after removing the line above.
I created a footer and used fontawesome icons with border.
On the following code I display the items and intend to have them as the picture shows
I was nearly there until I found that when I resize the screen, the icons also shrink like the photo show
Here my styling:
$footer: #464646;
.footer-font-awesome{
font-family: 'FontAwesome';
display: inline-block;
width: 40px;
height: 40px;
border: 1px solid white;
border-radius: 50%;
line-height: 40px;
text-align: center;
font-size: 18px;
text-indent: 0;
}
footer#colophon{
background-color: $footer;
color: white;
padding: 20px 40px;
ul,li,p{
margin: 0;
}
.site-info{
.textwidget {
display: flex;
justify-content: center;
div.box{
display: flex;
width: 100%;
max-width: 25%;
align-items: center;
p{
padding-left:8px;
}
}
.email,
.phone,
.address{
padding-right: 40px;
}
.email{
&:before{
#extend .footer-font-awesome;
content: '\f003';
}
}
.phone{
&:before{
#extend .footer-font-awesome;
content: '\f095';
}
}
.back-top{
justify-content: center;
}
.address{
&:before{
#extend .footer-font-awesome;
content: '\f041';
}
}
}
}
}
Here my html structure:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info">
<section id="black-studio-tinymce-33" class="widget widget_black_studio_tinymce">
<div class="textwidget">
<div class="box email">
<p>Email<br> <span class="unbold"><a>info#web2web.co.za</a></span></p>
</div>
<div class="box phone">
<p>Phone<br> <span class="unbold">021 823 8384</span></p>
</div>
<div class="box address">
<p>Address<br> <span class="unbold">Century City, Cape Town</span></p>
</div>
<div class="box back-top">
<p><span class="unbold"><a class="back-top">To the top</a></span></p>
</div>
</div>
</section>
</div><!-- .site-info -->
</footer>
How can I style my icons as the first pictures shows with no problem even when I resize?
Hope you can edit from my snippet
I would just set min-width on .footer-font-awesome
.footer-font-awesome{
font-family: 'FontAwesome';
display: inline-block;
width: 40px;
min-width: 40px; // This...
height: 40px;
border: 1px solid white;
border-radius: 50%;
line-height: 40px;
text-align: center;
font-size: 18px;
text-indent: 0;
}