We Keep Coding

Links in footer wont display inline

I'm trying to put some links in a footer next to each other, separated by the character "|". But I have a navbar whose styles interferes with the footer's links.
I need something like this :
This is my code (it doesn't display perfectly, but you get the gist):
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
As you can see the links aren't displaying inline. How can I fix this?

Wrap the links in a div with a class (I gave it footer-links) and give it the following styles:
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
/*background-color: #e0eafc;*/
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="https://imgur.com/dFEoiLv">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="https://imgur.com/JntIYPP" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Demo</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
<div class="footer-links">
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>

Open Weather Api FreeCodeCamp not working

The following snippet is not displaying anything. Here's my code from codepen. Could you help me figure out what's wrong and how to fix it? I also checked, and the API links are correct.
$(document).ready(function() {
$(".cityarea").html(getLocation);
testMenu();
});
var currentLat;
var currentLong;
var currentCity;
var currentRegion;
var currentCountry;
var mainCities = {
'San_Francisco': {
'region': 'California',
'country': "United States",
'lat': 37.7749300,
'lon': -122.4194200
},
'St._Louis': {
'region': 'Missouri',
'country': "United States",
'lat': 38.6272700,
'lon': -90.1978900
},
'Miami': {
'region': 'Florida',
'country': "United States",
'lat': 25.7742700,
'lon': -80.1936600
},
'Tokyo': {
'region': 'Tokyo',
'country': "Japan",
'lat': 35.689500,
'lon': 139.6917100
},
'Denver': {
'region': 'Colorado',
'country': "United States",
'lat': 39.739100,
'lon': -104.984700
}
};
function testMenu() {
for (var place in mainCities) {
var city = place.replace(/_/g, ' ');
$('#testMenu').append("<li onclick=testWeather('" + place + "');><a href='#'>" + city + "</a></li>");
}
};
function testWeather(cityLocation) {
currentLat = mainCities[cityLocation].lat;
currentLong = mainCities[cityLocation].lon;
currentRegion = mainCities[cityLocation].region;
currentCity =cityLocation.replace(/_/g, ' ');
currentCountry = mainCities[cityLocation].country;
getWeather();
};
function getLocation() {
$.getJSON('http://ip-api.com/json', function(data) {
currentRegion = data.regionName;
//currentCity = data.city;
currentCountry = data.country;
currentLat = data.lat;
currentLong = data.lon;
getWeather();
});
};
function getWeather() {
$("#state").text(currentRegion);
$("#country").text(currentCountry);
$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + currentLat + '&lon=' + currentLong + '&units=imperial&APPID=e656b9ee098cf2341fcfdb365b96b4a8', function(json) {
$("#cityname").text(json.name);
var showfahrenheit = true;
var tempfahrenheit = Math.round(json.main.temp);
var temcelcius = Math.round((tempfahrenheit - 32) * 5/9);
$("#temp").html(tempfahrenheit);
$('#unit-switch').on('click', function() {
if (showfahrenheit === false) {
$("#temp").html(tempfahrenheit);
showfahrenheit = true;
} else {
$("#temp").html(temcelcius);
showfahrenheit = false;
}
$("#unit-toggle").toggleClass("toggle");
});
var prefix = "wi wi-owm-";
var weatherIcons = json.weather[0].id;
var icon = prefix + weatherIcons;
$("#wparameter").html("<i class='" + icon + "'></i>"); $("#wdescription").text(json.weather[0].description);
var weatherImages = {
'rain': 'https://s6.postimg.org/7ug4yocip/rainpic1.jpg', 'clear': 'https://s6.postimg.org/alzepab1d/clearskypic1.jpg',
'snow': 'https://s6.postimg.org/rdkq81ba9/snowpic.jpg',
'clouds': 'https://s6.postimg.org/4v4mxtdnl/cloudspic.jpg',
'fog': 'https://s6.postimg.org/r9mbe1gf5/fogpic.jpg',
'thunder': 'https://s6.postimg.org/qpbvp3ckh/thunderstormpic.jpg',
'windy': 'https://s6.postimg.org/wg222tkkh/windybreezepic.jpg',
'dust': 'https://s6.postimg.org/tpo4rvyht/dustsandpic.jpg',
'tornadostorm': 'https://s6.postimg.org/aamjq9jz5/tornadostorm.jpg'
};
var imagepic;
if (weatherIcons >= 200 && weatherIcons <= 232 ) {
imagepic = weatherImages.thunder;
} else if (weatherIcons >= 300 && weatherIcons <= 531) {
imagepic = weatherImages.rain;
} else if (weatherIcons >= 600 && weatherIcons <= 622) {
imagepic = weatherImages.snow;
} else if (weatherIcons >= 701 && weatherIcons <= 731) {
imagepic = weatherImages.dust;
} else if (weatherIcons == 741) {
imagepic = weatherImages.fog;
} else if (weatherIcons >= 751 && weatherIcons <= 781) {
imagepic = weatherImages.dust;
} else if (weatherIcons == 800) {
imagepic = weatherImages.clear;
} else if (weatherIcons >= 801 && weatherIcons <= 804) {
imagepic = weatherImages.clouds;
} else if (weatherIcons >= 900 && weatherIcons <= 906) {
imagepic = weatherImages.tornadostorm;
} else if (weatherIcons >= 951 && weatherIcons <= 962) {
imagepic = weatherImages.windy;
} else {}
var speedimg = 500;
$(".wrapper").animate({opacity: 0}, speedimg, function() {
$(".wrapper").animate({opacity: 1}, speedimg);
$(".wrapper").css(
'background-image', 'url(' + imagepic + ')');
});
});
};
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
body {
position: relative;
}
html, body{
height:100%;
margin: 0;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.container {
position: relative;
display: block;
margin: 0 auto;
width: 35%;
min-width: 300px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 3px;
border: 2px solid #009688;
/*padding: 10px 20px;*/
box-shadow: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2);
}
.header h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: 0 0 10px 0;
color: #000000;
}
.weatherbox {
text-align: center;
}
.locationbox {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-justify-content: space-between;
justify-content: space-between;
padding: 10px 20px 0px;
}
.locactioninfobox {
/* -webkit-flex-basis: 350px;
flex-basis: 350px;*/
text-align: left;
}
.cityarea h2 {
color: #000000;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 2em;
margin: 0;
}
.countryarea {
position: relative;
display: -webkit-flex;
display: flex;
/*-webkit-justify-content: center;
justify-content: center;*/
margin: 0 auto;
text-align: left;
}
.countryarea h3 {
margin: 0 0 10px 0;
font-family: 'Roboto', sans-serif;
font-weight: normal;
color: #000000;
}
.countryarea h3:first-child {
margin-right: 8px;
}
.dropdownlocation {
-webkit-align-self: center;
align-self: center;
}
.dropdown {
position: relative;
/*display: inline-block;*/
font-size: 16px;
color: #FFF;
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #777;
white-space: nowrap;
text-transform: uppercase;
}
.dropdown > span {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.dropdown span {
box-sizing: border-box;
/*display: inline-block;*/
width: 100%;
background-color: #57A0D4;
padding: 10px 20px;
cursor: pointer;
text-align: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
border-radius: 5px;
font-size: 20px;
}
.dropdown span .fa {
display: inline;
}
.dropdown span .fa-globe {
margin-right: 10px;
}
.dropdown > span,
.dropdown > div {
cursor: pointer;
outline: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.dropdown > div {
background-color: rgba(0, 0, 0, 0);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
}
.dropdown > span:focus ~ div {
display: block;
}
.dropdown > ul {
position: absolute;
list-style: none;
text-align: left;
/*width: 100%;*/
min-width: 160px;
z-index: 1;
visibility: hidden;
transition: visibility 0.5s;
opacity: 0;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
/*display: none;*/
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.dropdown > span:focus ~ ul {
visibility: visible;
opacity: 1;
}
ul li{
/*padding: 15px;*/
background-color: #fff;
color: #4FB9A7;
margin-bottom: 1px;
cursor: pointer;
}
ul li a {
padding: 8px 20px;
color: inherit;
text-decoration: none;
display: block;
}
ul li a:hover{
background-color: #4FB9A7;
color: #FFF;
}
ul .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.mainline hr {
border: 0;
height: 1px;
background: #000000;
opacity: 0.2;
}
.temperaturearea {
padding: 0px 20px 10px;
}
.toptempbox {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.tempbox {
-webkit-flex-basis: 180px;
flex-basis: 180px;
}
.temperaturearea span#temp {
position: relative;
color: #000000;
font-family: 'Roboto', sans-serif;
font-size: 10em;
}
.temperaturearea #temp:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
top: 16px;
right: -17px;
border: 3px solid #000000;
border-radius: 50%;
}
.wconditionsbox {
-webkit-align-self: flex-end;
align-self: flex-end;
padding-bottom: 35px;
padding-left: 5px;
-webkit-flex-basis: 100px;
flex-basis: 100px;
}
.wconditionsbox span {
display: block;
text-align: left;
}
#wparameter {
font-size: 3.5em;
}
#wdescription {
font-size: 1em;
}
#wparameter, #wdescription {
color: #000000;
font-family: 'Roboto', sans-serif;
}
.weather > span {
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 1.2rem;
color: #000000;
}
.weather > span:before {
content: '';
position: absolute;
left: -10px;
top: 0px;
height: 3px;
width: 3px;
border: 2px solid #000000;
border-radius: 50%;
}
.main-toggle span {
margin: 0 0 0 16px;
}
.main-toggle span:last-child {
margin-left: 11px;
}
.weather button {
background: #6bbf6b;
border: none;
border-radius: 30px;
outline: none;
width: 45px;
height: 20px;
margin: 5px 5px 0;
cursor: pointer;
position: relative;
transition: background .2s;
}
.weather button:active {
background: #67b567;
}
.weather #unit-toggle {
position: absolute;
display: inline-block;
left: -8px;
top: 2px;
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
transition: left .2s;
}
#unit-toggle.toggle {
left: 16px;
}
#media screen and (max-width: 479px) {
.container {
width: 85%;
min-width: 300px;
}
}
#media screen and (min-width: 480px) and (max-width: 900px) {
.container {
width: 65%;
min-width: 300px;
}
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Local Weather</title>
</head>
<body class="full">
<div class="wrapper">
<div class="container">
<div class="header"><h1></h1></div>
<div class="weatherbox">
<div class="locationbox">
<div class="locactioninfobox">
<div class="cityarea">
<h2 id="cityname"></h2>
</div>
<div class="countryarea">
<h3 id="state"></h3>
<h3 id="country"></h3>
</div>
</div>
<div class="dropdownlocation">
<div class="dropdown">
<span tabindex="0" onclick="return true"><i class="fa fa-globe" aria-hidden="true"></i><i class="fa fa-caret-down" aria-hidden="true"></i></span>
<div tabindex="0" onclick="return true"></div>
<ul id="testMenu">
<li onclick="getLocation();">Current Location</li>
<li class="divider"></li>
<li class="dropdown-header">Main Cities</li>
</ul>
</div>
</div>
</div>
<div class="mainline"><hr></div>
<div class="temperaturearea">
<div class="toptempbox">
<div class="tempbox">
<span id="temp"></span>
</div>
<div class="wconditionsbox">
<span id="wparameter"></span>
<span id="wdescription"></span>
</div>
</div>
<div class="weather main-toggle"> <!-- Begin Unit Switch -->
<span>F</span>
<button id="unit-switch"><span id="unit-toggle"></span></button>
<span>C</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

How to get the button to toggle between F and C?

I was able to get the temperature to switch between Fahrenheit and Celcius. However, I wasn't able to get the small ball/button to move back and forth between F and C.
$(document).ready(function() {
var mainCities = {
'San Francisco' : {
'region': 'California',
'country': "United States",
'lat': 37.7749300,
'lon': -122.4194200
},
'St. Louis': {
'region': 'Missouri',
'country': "United States",
'lat': 38.6272700,
'lon': -90.1978900
},
'Miami': {
'region': 'Florida',
'country': "United States",
'lat': 25.7742700,
'lon': -80.1936600
},
'Tokyo': {
'region': 'Tokyo',
'country': "Japan",
'lat': 35.689500,
'lon': 139.6917100
}
}
var currentLat;
var currentLong;
function getLocation() {
$.getJSON('http://ip-api.com/json/?callback=?', function(data) {
//var currentRegion = data.regionName;
var currentCity = data.city;
currentLat = data.lat;
currentLong = data.lon;
$("#cityname").text(currentCity);
getWeather();
});
}
function getWeather() {
$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + currentLat + '&lon=' + currentLong + '&units=imperial&APPID=e656b9ee098cf2341fcfdb365b96b4a8', function(json) {
var showfahrenheit = true;
var tempfahrenheit = Math.round(json.main.temp);
var temcelcius = Math.round((tempfahrenheit - 32) * 5/9);
$("#temp").html(tempfahrenheit);
$('#unit-switch').on('click', function() {
if (showfahrenheit === false) {
$("#temp").html(tempfahrenheit);
showfahrenheit = true;
} else {
$("#temp").html(temcelcius);
showfahrenheit = false;
}
$("#unit-toggle").toggleClass("toggle");
//$('#temp').toggleClass('toggle');
});
});
};
$(".cityarea").html(getLocation);
});
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
body {
position: relative;
}
html,body{
height:100%;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
.container {
position: relative;
display: block;
margin: 0 auto;
width: 60%;
}
.header h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: normal;
}
.weatherbox {
text-align: center;
}
.cityarea h2 {
color: #000000;
}
.dropdown{
position: relative;
display: inline-block;
font-size: 16px;
color: #FFF;
}
input[type=checkbox]{
display: none;
}
label{
box-sizing: border-box;
display: inline-block;
width: 100%;
background-color: #57A0D4;
padding: 10px 20px;
cursor: pointer;
text-align: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
border-radius: 5px;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label .fa-globe {
margin-right: 10px;
}
/* The ul will have display:none by default */
ul{
position: absolute;
list-style: none;
text-align: left;
width: 100%;
min-width: 160px;
z-index: 1;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
display: none;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
ul li{
/*padding: 15px;*/
background-color: #fff;
color: #4FB9A7;
margin-bottom: 1px;
cursor: pointer;
}
ul li a {
padding: 8px 20px;
color: inherit;
text-decoration: none;
display: block;
}
ul li a:hover{
background-color: #4FB9A7;
color: #FFF;
}
input[type=checkbox]:checked ~ label {
background-color: #3D88BD;
}
input[type=checkbox]:checked ~ ul {
display: block;
}
ul .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.temperaturearea span#temp {
position: relative;
color: #000000;
font-size: 80px;
}
.temperaturearea #temp:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
top: 16px;
right: -17px;
border: 3px solid #000000;
border-radius: 50%;
}
.weather > span {
position: relative;
font-size: 1.2rem;
}
.weather > span:before {
content: '';
position: absolute;
left: -10px;
top: 0px;
height: 3px;
width: 3px;
border: 2px solid #000;
border-radius: 50%;
}
.main-toggle span {
margin: 0 0 0 16px;
}
.main-toggle span:last-child {
margin-left: 11px;
}
.weather button {
background: #6bbf6b;
border: none;
border-radius: 30px;
outline: none;
width: 45px;
height: 20px;
margin: 5px 5px 0;
cursor: pointer;
position: relative;
transition: background .2s;
}
.weather button:active {
background: #67b567;
}
.weather #unit-toggle {
position: absolute;
display: inline-block;
left: -8px;
top: 2px;
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
transition: left .2s;
}
.toggle {
left: 27px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="header"><h1>Local Weather</h1></div>
<div class="weatherbox">
<div class="cityarea">
<h2 id="cityname"></h2>
</div>
<div class="countryarea">
<h3 id="state"></h3>
<h3 id="country"></h3>
</div>
<!--<div class="dropdownlocation">
<div class="dropdown">
<input type="checkbox" id="checkbox-toggle">
<label for="checkbox-toggle"><i class="fa fa-globe" aria-hidden="true"></i><i class="fa fa-caret-down" aria-hidden="true"></i></label>
<ul>
<li>Current Location</li>
<li class="divider"></li>
<li>Main Cities</li>
</li>
</ul>
</div>
</div>-->
<div class="temperaturearea">
<div>
<span id="wicon"></span>
</div>
<div id="wdescription"></div>
<span id="temp"></span>
<div class="weather main-toggle"> <!-- Begin Unit Switch -->
<span>F</span>
<button id="unit-switch"><span id="unit-toggle"></span></button>
<span>C</span>
</div>
</div>
</div>
</div>
</div>
You can even check out my code at Codepen: http://codepen.io/kikibres/pen/EZMJZw
What did I miss? I'm trying to toggleClass using the class .toggle everytime I use #unit-switch to click on.

Your css selector is not specific enough
.weather #unit-toggle overrides .toggle's left property.
try #unit-toggle.toggle
codepen: http://codepen.io/anon/pen/XpvOvV

Your previous selector is more specific so to balance it you have to use this:
#unit-toggle.toggle {
left: 15px;
}

Flexbox works fine in chrome but not in IE 11 [duplicate]

This question already has answers here:
flex property not working in IE
(5 answers)
Closed 6 years ago.
My website is running well with chrome but not in IE 11.It display warning.required Cross Origin Resource Sharing (CORS).All the alignment are breaking. Not looking good.
chrom screen sort
IE 11 screensort
How can I resolve the problem.
I am getting required Cross Origin Resource Sharing (CORS) on IE 11.How can I resolve this.I am using Angular2 Please help me here is my code.
details.html
<div class="content-area">
<div class="container-fluid flex-row scrollPage">
<div class="details">
<div class="brand-prop">
<div class="title">Input</div>
<div class="brand-detail">
<!-- Audit First row start-->
<div class="detail-sec" >
<h3 class="m-heading bg-color">Input files</h3>
<!--<a [routerLink]="['/dashboard', 'drilldown', activeClient,'Expected','Received']">-->
<!--<a [routerLink]="['/dashboard', 'drilldown', activeClient]" (click)="onDrillDown(tabs = ['Expected', 'Received'])">-->
<a [routerLink]="['/dashboard', 'drilldown', activeClient,'Expected','Received']">
<!--<a (click)="onDrillDown('Expected')">-->
<div class="flex-row">
<div class="flex-col-left">
<div class="number-cont">
<h4>Expected</h4>
<span class="label">{{summaryDetail?.input?.inputFile?.expected}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div class="chart lineChart"></div>
</div>
</div>
<div class="v-spacer"></div>
<div class="flex-col-right">
<div class="number-cont">
<h4>Received</h4>
<span class="label">{{summaryDetail?.input?.inputFile?.received}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div class="chart barChart"></div>
</div>
</div>
</div>
</a>
</div>
<!--Audit First row end -->
<!---My Non Parcel -->
<div class="detail-sec">
<h3 class="m-heading">New billings</h3>
<a [routerLink]="['/dashboard', 'drilldown', activeClient,'Parcel','Non Parcel']" (click)="drillDowns('Expected')">
<div class="flex-row">
<div class="flex-col-left">
<div class="number-cont">
<h4>Parcel</h4>
<span class="label">{{summaryDetail?.input?.newBilling?.parcel}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div id="parcelSparkId" class="chart lineChart"></div>
</div>
</div>
<div class="v-spacer"></div>
<div class="flex-col-right">
<div class="number-cont">
<h4>Non Parcel</h4>
<span class="label">{{summaryDetail?.input?.newBilling?.nonParcel}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div id="nonParcelSparkId" class="chart barChart"></div>
</div>
</div>
</div>
</a>
<div class="flex-row input-align">
<div class="flex-col-left">
<div class="number-cont">
<h4>Electronic</h4>
<span class="label">{{summaryDetail?.input?.newBilling?.electronic}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div id="chartElectronic" class="chart lineChart"></div>
</div>
</div>
<div class="v-spacer"></div>
<div class="flex-col-right">
<div class="number-cont">
<h4>Manual</h4>
<span class="label">{{summaryDetail?.input?.newBilling?.manual}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div id="chartManual" class="chart barChart"></div>
</div>
</div>
</div>
</div>
<div class="extra-space"></div>
<div class="detail-sec">
<div class="errors-wpr">
<div class="err-title">
<h4>ERRORS</h4>
<a (click)="navigateTo(0)">View All</a>
</div>
<div class="err-content">
<ul>
<li class="error" *ngFor="let input of inputData | limitFirstN:limit; let i = index" [routerLink]="['/dashboard', 'errors', activeClient]" (click)="navigateTo(i,activeClient)">
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
<span class="ellipsis">
{{input?.taskName }}
</span>
</li>
<!--<li (click)="navigateTo(0)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh </li>
<li (click)="navigateTo(1)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</li>
<li (click)="navigateTo(2)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</li>-->
</ul>
</div>
</div>
</div>
</div>
</div><!--- /In Progress --->
</div>
</div>
details.css
.main-container{
padding: 0px;
}
.top-items-list{
padding-left: 20px;
float: left;
max-width: calc(100% - 20px);
margin-bottom: 30px;
}
.top-items-list > .logo
{
padding-top: 10px;
float: left;
width: 10%;
}
.top-items-list .data-list {
float: left;
}
.top-items-list .data-list .item {
float: left;
border-right: thin solid #DDDDDD;
position: relative;
min-width: 160px;
}
.top-items-list .data-list .item:last-child {
border-right: none;
}
.top-items-list .data-list .item .input {
font-size: 24px;
}
.top-items-list .data-list .item .input span {
font-size: 15px;
color: #878787;
}
.top-items-list .data-list .item .count {
background-color: #ee242c;
border-radius: 18px;
color: #fff !important;
float: right;
font-size: 11px !important;
height: 22px;
line-height: 22px;
text-align: center;
width: 22px;
display: block;
padding-bottom: 5px;
position: absolute;
right: 10px;
}
.content-area{ padding-top:20px;}
.content-area-full .container{ width:100%;}
.content{background-color:#fff; border-radius:3px; display:table; width:100%;}
.content-part, .more-popup{ display:table-cell; vertical-align:top;}
.details {
display: flex;
}
.brand-prop {
color:#000;
padding: 0 10px;
display: flex;
flex-direction: column;
}
.brand-prop .title{ font-size:24px; margin-bottom:20px; font-weight:300; }
.brand-prop .subheading{
font-size:13px;
font-weight:600;
}
.brand-prop .brand-detail {
background-color: #fff;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
border-radius: 3px;
flex: 1;
display: flex;
flex-direction: column;
}
.detail-sec strong{
color:#888888;
font-weight: 400;
border-bottom: 1px solid #ddd;
}
.brand-prop .detail-sec{ padding:20px; border-bottom:1px solid #DDD; line-height:22px;}
.brand-prop .detail-sec:first-child{ padding-top:20px;}
.brand-prop .detail-sec .row{ margin-bottom:20px;}
.brand-prop .detail-sec .row:last-child{ margin-bottom: 0;}
.brand-prop .detail-sec {
color:#333;
padding-top:10px;
font-weight: 400;
&:first-child {
padding-top: 20px;
}
&.no-border {
border-bottom: none;
}
> span {
color:#333;
display:block;
}
.dollar {
font-size: 20px;
color: #999;
vertical-align: baseline;
}
span.label {
font-size: 25px;
display: inline-block;
font-weight: 400;
color:#333;
padding-left: 2px;
padding: 0;
}
}
.brand-prop .detail-sec span.viewall {
font-size: 13px;
float: right;
margin-top: -12px;
> a {
color: #87C328;
}
}
// .brand-prop .detail-sec li {
// background:url(../image2/error-list.png) left 5px no-repeat;
// background-size: 18px;
// padding-left:30px;
// padding-bottom:10px;
// font-size: 13px;
// font-family: "Open Sans", sans-serif;
// }
.extra-space {
flex: 1;
}
.extra-space + .detail-sec {
border-top: 1px solid #ddd;
}
.errors-wpr {
.err-title {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
h4 {
font-size: 14px;
font-weight: 600;
line-height: 22px;
}
> a {
color: #87C328;
font-weight: 600;
align-self: center;
font-size: 12px;
&:hover {
cursor: pointer;
}
}
}
}
.detail-sec.bg-color {
padding: 10px 20px !important;
background-color: #F9F9F9; font-weight:600;
}
.detail-sec.bg-color .row {
margin-bottom: 0;
}
.item.active-tab {
background-color:#eeeeee;
padding-bottom: 20px;
height: 63px;
position: absolute;
z-index: 100;
}
.data-list {
// max-width: 97%;
ul {
display: flex;
overflow-x: hidden;
flex-direction: row;
li {
flex: 1 1 100px;
}
}
}
.item {
background-color: #eeeeee;
display: table;
cursor: pointer;
height: 70px;
> div {
display: table-cell;
}
>.itm-wpr {
padding: 10px 20px;
background-color: #fff;
transition: display 0.9s;
img {
max-height: 16px;
}
}
>.logo {
display: none;
}
&.active {
box-shadow: none;
background-color: #eeeeee;
display: block;
>.itm-wpr {
display: none;
}
>.logo {
text-align: center;
padding: 10px 0;
display: block;
height: 100%;
img {
max-width: 150px;
}
}
}
}
/*.hover-this:hover + .graph-show-image{ display:block;}*/
.graph-show-image {
display: none;
position: absolute;
z-index: 99999; cursor:pointer;
width:100%; left:0;
}
.graph-show-image img{ width:100%;}
.screen2, .screen3{ display:none;}
.select-action, .select-action label{ float:left;}
.select-action label{ line-height:35px; margin-right:10px; font-weight:400;}
.select-action .select-style, .select-action .select-style select{ float:left; height:35px; line-height:35px; margin-bottom:0;}
.select-action .select-style select{ padding-right:20px;}
.section-details .actions{ background-color:#fff; padding:20px;}
/* reports popup */
.steps {
display: table;
width: 100%; margin:30px 0; font-weight:500;
}
.step {
display: inline-block;
text-align: center;
width: 50%; position:relative; z-index:1; float:left;
}
.step span:after {
content: "";
position: absolute; left:0;
height: 1px;
border-bottom: 1px solid #ccc;
top: 27%;
width: 100%; z-index:-1;
}
.step > span {
background-color: #ccc;
border-radius: 50%;
display: table;
font-weight: 400;
height: 30px;
line-height: 30px;
margin: 0 auto;
width: 30px;
}
.step > span.active{ background-color:#8FC058;}
.grid-table th{ padding:0;}
.grid-table th .btn{ border:0 none; min-width:0;}
.grid-table th .btn:hover{ border:0 none;}
.grid-table th .dropdown-popup{ min-width:170px;}
.grid-table th .list-items li:hover ul { display:block;}
.grid-table th .list-items ul {
background-color: #fff;
border: 1px solid #ccc;
left: 100%;
min-width: 150px;
position: absolute;
margin-top:-40px;
display:none;
}
.grid-table th.last .dropdown-popup{ margin-left:-14px;}
.grid-table th.last .list-items ul{ right:100%; left:inherit;}
#example th {
padding: 5px 10px;
}
.add-list-items .table-cell {
border: 1px solid #cccccc;
padding: 0 !important;
vertical-align: top;
width: 45% !important;
}
.add-list-items .table-cell:nth-child(2) {
border: 0 none;
width: 10% !important;
}
.add-list-items h4 {
background-color: #dfe2e7;
color: #00447f;
font-size: 14px;
font-weight: 400;
padding: 5px 10px; text-transform:uppercase;
}
.search-list {
position: relative;
}
.add-list-container{ height:210px; margin-bottom:0 !important;}
.list-options {
height: 145px;
overflow-y: scroll;
}
.add-list-items .table-cell:last-child .list-options {
height: 180px;
}
.add-remove-items{vertical-align:middle !important; text-align:center;}
.add-remove-items img{ cursor:pointer;}
.search-list > input[type="text"] {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color -moz-use-text-color #cccccc;
border-image: none;
border-style: none none solid;
border-width: 0 0 1px;
}
.search-list > input[type="submit"] {
background: url(../images/search-icon.png) no-repeat 0 0;
border: 0 none;
height: 20px;
position: absolute;
right: 20px;
text-indent: -5000px;
top: 6px;
width: 20px;
}
.list-options li {
padding: 5px 10px; cursor:pointer;
}
.list-options li:hover, .list-options li.selected {
background-color:#EBF1F1;
}
.pager li:first-child > a, .pager li:first-child > span {
border-left: 1px solid #ddd;
}
.pager li > a:hover, .pager li > a:focus{ background-color:#fff;}
.pager li > a, .pager li > span{ border-radius:0;}
.pager{ text-align:right;}
.container-fluid{ max-width:98%;}
.detail-sec.bg-color {
padding: 10px 20px !important;
background-color: #F9F9F9;
}
.detail-sec.bg-color .row {
margin-bottom: 0;
}
.row-eq-height {
display: flex;
padding: 0 10px;
margin-bottom: 30px;
}
.detail-sec {
.m-heading {
font-size: 13px;
font-weight: 600;
margin-bottom: 20px;
line-height: 22px;
text-transform: uppercase;
}
}
.flex-row {
display: flex;
justify-content: space-between;
.subheading {
margin-bottom: 20px;
}
h4 {
color: #888888;
font-weight: 400;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
margin-bottom: 10px;
}
span {
font-size: 25px;
font-weight: 400;
color: #333;
}
.flex-col {
flex: 1 1 100px;
}
}
.flex-col-left,
.flex-col-right {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-basis: 40%;
> .flex-col {
flex: 1 1 50%;
.dollar {
height: 18px;
line-height: 18px;
font-weight: 400;
font-size: 12.6px;
display: inline-block;
}
&:first-child {
padding-right: 10px;
}
}
}
div.detail-sec .flex-row .lblSec {
// background-color:green;
padding-left:50px;
// width:60px;
}
.content-area {
margin-bottom: 50px;
}
.v-spacer {
width: 15px;
}
.flex-col-left, .flex-col-right {
display: flex;
flex-direction: column;
flex: 1 1;
.number-cont {
margin-bottom: 5px;
}
.chart-cont {
// text-align: center;
.chart {
padding: 20px 0px 0;
}
}
}
.chart-cont {
.chart {
// background-color: #dde6e9;
}
}
.item.active {
.logo {
display: flex;
justify-content: center;
align-items: center;
.lbl {
font-size: 18px;
}
}
}
///////////////////////////////////////////////////////////////////////////
// =========================== Task menu navigation ==================== //
///////////////////////////////////////////////////////////////////////////
$tasknav__height: 70px;
.task-nav-wpr {
width: 100%;
height: $tasknav__height;
// border: 1px solid red;
position: relative;
overflow: hidden;
&__pre, &__next {
width: 30px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: $tasknav__height;
opacity: 1;
z-index: 100;
transition: all .3s ease;
&:hover {
border: 1px solid #ddd;
background-color: darken(#fff, 10%);
opacity: 1;
}
}
&__pre {
top: 0;
left: 0;
}
&__next {
top: 0;
right: 0;
}
}
.task-nav {
box-sizing: border-box;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
margin: 0;
display: block;
padding: 0;
transition: all .3s ease-in-out;
&__item {
box-sizing: border-box;
width: 160px;
margin: 0;
height: 68px;
display: inline-block;
position: relative;
cursor: pointer;
}
}
////////////////////////////////////////////////////////////
// ===================== card =========================== //
////////////////////////////////////////////////////////////
.front {
display: flex;
flex-direction: column;
> * {
flex: 1;
}
}
.front-r1 {
position: relative;
display: block;
&__cc {
font-size: 18px;
padding: 5px 0 5px 15px;
}
&__ec {
position: absolute;
top: 5px;
right: 15px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
font-size: 12px;
background-color: red;
color: #fff;
}
}
.front-r2 {
position: relative;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
height: 35px;
&__cc {
font-size: 20px;
}
&__ic {
color: lighten(#000, 10%);
}
}
.back {
display: none;
justify-content: center;
align-items: center;
&__cc {
font-size: 25px;
}
}
.card {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: transform .3s ease-in-out;
// box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
}
.card.flipped {
border-bottom: none;
box-shadow: none;
.front {
display: none;
}
.back {
display: flex;
}
}
.card figure {
// display: block;
height: 100%;
width: 100%;
color: white;
position: absolute;
margin: 0;
// backface-visibility: hidden;
}
.card .front {
color: black;
}
.card .back {
background: #eee;
color: lighten(#000, 10%);
// transform: rotateY( 180deg );
}
// $lines-to-show:2;
// .errors-wpr {
// text-overflow:ellipsis;
// overflow: auto;
// display: block;
// }
$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 2;
.errors-wpr {
display: block;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height:230px;
position:relative;
min-width:100%;
//width: 370px;
width:27em;
.ellipsis{
display: inline-block;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
vertical-align: bottom;
//width:33%;
width:27em;
}
}
.jqstooltip{
box-sizing: content-box;
// z-index:1;
// width:70px;
// height:25px!important;
}
.content-area {
position:relative;
top:130px;
padding-top:50px;
}
.fixed1 {
//padding-top: 20px;
display: flex;
top: 75px;
background-color: #eee;
width: 100%;
position:fixed;
}
// .scrollPage {
// max-height:calc(100vh - 111px);
// overflow-y: auto;
// }
.flex-col-right {
padding-left:14%;
}
.error {
i.fa-exclamation-triangle {
color: #f0ad4e;
}
}
.detail-sec .input-align {
margin-top:60px;
}
// .firsttab{
// margin-left:20px;
// }

Flex is not supported on IE. Use this site to check.
http://caniuse.com/#feat=flexbox

How to set multicolumn dropdown as such each drop down will use the same drop down frame?

I was required to program the following header ( the borders I've added
to know if it renders as I need to ):
"Select Project", "Select Item" and "Select Content" are dropdown elements.
Each one take 2 grids. I need that when clicking on the dropdown element, no matter which one, the drop down menu will take a width of 6 grids as shown above
in the blue frame.
( In other words, the drop down menu will be the same for all dropdown elements
but the content is different ).
In addition, when resizing to smaller screen, the media query doesn't work at all:
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) and (max-width : 1370px) {
.dropdown-menu.multi-column {
width: 765px !important;
}
}
What am I doing wrong here ?
HTML:
<!-- Layout Container-->
<div id="main-wrapper">
<!--Header - Top Bar Navigation-->
<header class="margin-left-right-20">
<div class="row top-bar">
<!-- Logo Image -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div">
<img src="images/logo.png" id="logo" alt="logo" />
</div>
<!-- Application Indicator -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div">
<a href="#">
<div>
<span class="top-bar-small-title">App</span>
<br />
<span class="top-bar-app-links" id="current-app-selected">App1</span>
</div>
</a>
</div>
<!-- Module (a.k.a Project) Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<div class="dropdown">
<a id="dLabel" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="top-bar-small-title make-it-regular">Project</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Project</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu multi-column" aria-labelledby="dLabel">
<div class="dropdown-menu multi-column">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<ul class="dropdown-menu">
<li>Col 1 - Opt 1</li>
<li>Col 1 - Opt 2</li>
</ul>
</div>
<div class="span6">
<ul class="dropdown-menu">
<li>Col 2 - Opt 1</li>
<li>Col 2 - Opt 2</li>
</ul>
</div>
</div>
</div>
</div>
<!--<li>
<div class="row" style="width: 760px;">
<ul class="list-unstyled col-md-4">
<li>test1-1</li>
<li>test1-2</li>
<li>test1-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>test2-1</li>
<li>test2-2</li>
<li>test2-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>test3-1</li>
<li>test3-2</li>
<li>test3-3</li>
</ul>
</div>
</li>-->
<!--<li>Item 1</li>
<li>Item 2</li>-->
</ul>
</div>
</div>
<!-- Module (a.k.a Project) Selector -->
<!--<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Module</span><br />
<span class="top-bar-app-links make-it-regular">Select Module</span>
</div>-->
<!-- Item Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Item</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Item</span>
</div>
<!-- Block Selector -->
<div class="col-md-2 col-lg-2 top-bar-margin-top border-div">
<span class="top-bar-small-title make-it-regular">Content</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Content</span>
</div>
<!-- Search Bar -->
<div class="col-md-2 col-lg-offset-1 col-lg-2 top-bar-margin-top border-div" id="div-search-bar">
<div class="input-group input-search col-md-12 col-lg-12 form-group">
<input type="text" class="form-control" name="q" id="search-bar" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default btn-search-custom" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
<!-- Avatar user -->
<div class="col-md-1 col-lg-1 top-bar-margin-top border-div" id="div-avatar-circle">
<div class="avatar-circle col-lg-1">
</div>
<div class="show-user col-lg-8" style="display:inline-block">
<span class="show-user-name">Lionel Messi</span>
<span class="show-user-permission">Programmer</span>
</div>
</div>
</div>
<!-- End <div class="row top-bar">-->
</header>
</div>
CSS:
* {
padding: 0;
margin: 0;
/* height:100%;*/
}
.margin-left-right-20 {
margin-left: 20px;
margin-right: 20px;
}
.border-div {
border: solid 1px black;
}
.container {
margin-left: 20px;
margin-right: 20px;
width: 100%;
position: relative;
}
#logo {
width: 79px;
height: 42px;
margin-left: 26px;
}
.top-bar {}
.top-bar-margin-top {
margin-top: 43px;
/*padding: 0;*/
}
.top-bar-margin-top a:hover {
text-decoration: none;
}
.top-bar-small-title {
font-family: 'Lato', sans-serif;
font-size: 10px;
color: #2baab1;
}
.top-bar-app-links {
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #2baab1;
}
#current-app-selected {
font-weight: bold;
}
#search-bar {
/*width: 325px;*/
width: 100%;
height: 29px;
}
/*#media only screen and (min-width: 1200px) and (max-width: 1368px) {
#search-bar{
width: 200px;
height: 29px;
}
}*/
/*#avatar-and-search-in-new-line {
display:none;
}*/
.make-it-regular {
color: #373d42;
}
input.search-query {
padding-left: 26px;
}
.input-group-btn:last-child {
border-radius: 500px;
}
.input-search .input-group-btn {
color: #ccc;
}
.input-group-icon .input-group-btn,
.input-search .input-group-btn {
border-radius: 500px;
width: 0;
left: -13%;
z-index: 1000;
}
.input-group-btn {
position: relative;
font-size: 0;
white-space: nowrap;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
input-group-rounded input.form-control:first-child,
.input-group-rounded input.form-control:last-child,
.input-search input.form-control:first-child,
.input-search input.form-control:last-child {
border-radius: 500px;
}
.input-group-icon input.form-control:first-child,
.input-group-icon input.form-control:last-child,
.input-search input.form-control:first-child,
.input-search input.form-control:last-child {
border-radius: 25px;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group-rounded input.form-control,
.input-search input.form-control {
-webkit-border-radius: 500px;
border-radius: 500px;
}
.input-group-icon input.form-control,
.input-search input.form-control {
font-size: 12px;
font-size: 1.2rem;
padding-right: 36px;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea {
-webkit-appearance: none;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.input-group-btn:first-child,
.input-search .input-group-btn:last-child {
border-radius: 500px;
}
.input-search .input-group-btn {
color: #ccc;
}
.input-group-icon .input-group-btn,
.input-search .input-group-btn {
border-radius: 500px;
width: 0;
}
.input-group-btn {
position: relative;
font-size: 0;
white-space: nowrap;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.btn-search-custom {
border: 0px solid transparent;
padding: 0;
}
.input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group {
z-index: 2;
margin-left: 13px;
}
#div-avatar-circle {
padding: 0;
}
.avatar-circle {
background-color: #5c6770;
border-color: #5c6770;
border-radius: 50%;
border-style: solid;
border-width: 1px;
height: 40px;
width: 40px;
display: inline-block;
vertical-align: top;
}
.show-user {
display: inline-block;
/* width: 98px; */
margin-top: 3px;
/* margin-left: 10px; */
/* margin: 0; */
/* padding: 0px; */
padding-left: 3px;
}
.nav-tabs-colors {
background-color: #ececef;
}
.edit-app-tabs {
background-color: #ececef;
}
#edit-app-tab {
background-color: #ececef;
}
#edit-app-content-title {
margin-left: 35px;
}
.app-name-title {
position: absolute;
top: 193px;
}
.app-name-title div h3 {
margin: 0;
padding: 0;
}
.privacy-statement-text-area {
position: absolute;
top: 241px;
}
#privacy-statement-data {
background-color: white;
resize: none;
overflow-y: auto;
/*width:460px;*/
height: 224px;
max-height: 224px;
}
.panel {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
}
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
/* border-radius: 4px;*/
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
/* overflow-y: auto;*/
/*width:431px;*/
/*width:402px;*/
}
.panel-margin-settings {
margin-left: 20px;
margin-bottom: 15px;
}
#first-component {
margin-top: 33px;
}
.component-heading {
background: #2baab1;
height: 47px;
}
.component-heading-title {
margin-top: 11px;
margin-left: 15px;
margin-bottom: 0;
font-size: 22px;
color: white;
font-family: 'Lato', sans-serif;
display: inline-block;
}
.panel-heading {
background: #fdfdfd;
/* border-radius: 5px 5px 0 0;*/
/* border-bottom: 1px solid #DADADA;*/
/* padding: 18px;*/
position: relative;
}
/*
.panel-title {
color: #33353F;
font-size: 20px;
font-weight: 400;
line-height: 20px;
padding: 0;
text-transform: none;
}
*/
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 22px;
color: #2baab1;
font-family: 'Lato', sans-serif;
display: inline-block;
}
.panel-heading + .panel-body {
/* border-radius: 0 0 5px 5px;*/
}
.panel-body {
background: #fdfdfd;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
/* border-radius: 5px;*/
}
.panel-body {
padding: 15px;
}
.checkbox-custom {
position: relative;
padding: 0 0 0 25px;
margin-bottom: 7px;
margin-top: 0;
}
.checkbox-custom input[type="checkbox"] {
opacity: 0;
position: absolute;
top: 50%;
left: 3px;
margin: -6px 0 0 0;
z-index: 2;
cursor: pointer;
}
.checkbox-custom label {
cursor: pointer;
margin-bottom: 0;
text-align: left;
line-height: 1.2;
}
.checkbox-custom label:before {
content: '';
position: absolute;
top: 50%;
left: 0;
margin-top: -9px;
width: 19px;
height: 18px;
display: inline-block;
border-radius: 2px;
border: 1px solid #bbb;
background: #fff;
}
.checkbox-custom input[type="checkbox"]:checked + label:after {
position: absolute;
display: inline-block;
font-family: 'FontAwesome';
content: '\F00C';
top: 50%;
left: 4px;
margin-top: -5px;
font-size: 11px;
line-height: 1;
width: 16px;
height: 16px;
color: #2baab1;
}
.checkbox-inline {
position: relative;
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
/*
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-left: -20px;
}
*/
.new-category {
float: right;
margin-top: 5px;
text-decoration: none;
}
.new-category:link,
.new-category:visited,
.new-category:hover {
text-decoration: none;
cursor: pointer;
}
.dd {
position: relative;
display: block;
margin: 0;
padding: 0;
/* list-style: none;*/
font-size: 13px;
line-height: 20px;
}
.dd-list {
display: block;
position: relative;
margin: 0;
padding: 0;
list-style-type: decimal;
/* list-style: none;*/
}
.dd-item,
.dd-empty,
.dd-placeholder {
display: block;
position: relative;
margin: 0;
padding: 0;
min-height: 20px;
font-size: 13px;
line-height: 20px;
display: list-item;
}
.dd-item-reset {
font-size: 0;
}
.dd-handle {
display: block;
height: 34px;
margin: 5px 0;
padding: 6px 10px;
color: #333;
text-decoration: none;
font-weight: 600;
border: 1px solid #CCC;
background: white;
/* background: #F6F6F6;*/
-webkit-border-radius: 3px;
border-radius: 3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.dd-list-ul {
list-style-type: none;
}
.dd-handle-assoc-file {
display: inline-block;
/*width:280px;*/
width: 277px;
height: 31px;
vertical-align: middle;
border-radius: 0;
font-size: 14px;
}
.btn-associated-file-item {
background-color: #dcdcdc;
border-bottom-left-radius: 5px;
border-color: #5c6770;
border-style: solid;
border-top-left-radius: 5px;
border-width: 1px;
height: 31px;
width: 93px;
display: inline-block;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
/* border-right:1px solid blc;*/
}
.close-assoc-file {
line-height: inherit;
}
#glossary-file-select,
#definition-file-select,
#design-file-select {
visibility: hidden;
z-index: -1000;
height: 0;
width: 0;
}
#modules-list-table-padding {
padding-left: 65px;
padding-right: 65px;
}
#modules-list-table-title {
margin-top: 33px;
margin-left: 15px;
display: block;
}
#create-module {
font-size: 12px;
color: #2baab1;
font-family: 'Lato', sans-serif;
font-weight: bold;
float: right;
text-decoration: none;
display: inherit;
margin-top: -5px;
margin-right: 10px;
}
#table-underline {
border: 1px solid #2baab1;
margin-top: 12px;
}
.modules-table > tbody > tr > th,
.modules-table > tbody > tr > td {
border-color: #ececef;
}
.modules-table tr > *:nth-child(1) {
padding-left: 15px;
}
.modules-table tr > *:nth-child(2) {
padding-left: 67px;
width: 336px;
max-width: 336px;
}
.modules-table tr > *:nth-child(3) {
padding-left: 103px;
padding-right: 30px;
}
.modules-table tr > *:nth-child(4) {
padding-right: 11px;
}
.modules-table > tbody > tr > td:last-child {
text-align: center;
}
/*.modules-table tr > th:last-child {
padding-right: initial;
float:right;
}*/
/*.modules-table tr > *:last-child {
padding-left: 10px;
}*/
/*.modules-table > tbody > tr > td:nth-child(2) {
width:336px;
}*/
/*div[class^="col-lg-1"]:first-child {
margin-left: 20px;
}*/
/*div[class^="col-lg-1"]:last-child {
margin-right: 20px;
}
div[class^="col-lg-3"]:first-child {
margin-left: 20px;
}
div[class^="col-lg-3"]:last-child {
margin-right: 20px;
}*/
.tools-option-link {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #373d42;
vertical-align: middle;
margin-left: 5px;
}
.tools-option-container {
padding-top: 15px;
padding-bottom: 15px;
border-bottom: solid 1px black;
}
.reset-padding-top {
padding-top: 0;
}
#tools-block a:hover {
text-decoration: none;
}
#ChartistExtremeResponsiveConfiguration {}
.module-name {
display: inline-block;
width: 150px;
}
.circular-bar.circular-bar-xs {
width: 50px;
}
.circular-bar {
margin: 25px 0;
}
.circular-bar {
margin-bottom: 25px;
}
.mr-md {
margin-right: 15px !important;
}
.mt-xs {
margin-top: 5px !important;
}
.m-none {
margin: 0 !important;
}
.circular-bar-container {
position: relative;
top: 5px;
}
.circular-bar-percentage-text {
position: absolute;
top: 29%;
left: 21%;
}
table {
border-collapse: collapse;
}
td {
padding-top: 10px;
padding-bottom: 10px;
}
#module-of-the-day-id {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #2baab1;
}
#module-of-the-day-name {
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #373d42;
}
.stars-styling {
font-size: 18px;
color: #ffbb00;
}
#module-of-the-day-review-paragraph {
/*width:343px;*/
font-size: 14px;
margin-top: 15px;
}
#item-reviewer {
float: right;
font-size: 14px;
/*font-family: 'Lato', sans-serif;*/
font-weight: bold;
color: #373d42;
}
#module-of-the-day-item-reviewer {
margin-bottom: 15px;
}
#module-usage-stats {
clear: both;
}
#module-usage-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#module-usage-text-container {
position: absolute;
top: 13%;
}
#module-usage-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#module-usage-status {
font-size: 14px;
}
/* */
#published-items-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#published-items-text-container {
position: absolute;
top: 13%;
}
#published-items-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#published-items-status {
font-size: 14px;
}
#published-items-percentage-text {
top: 33%;
left: 31%;
}
/* */
#device-description {
position: relative;
margin-bottom: 15px;
border-bottom: solid 1px black;
}
#device-text-container {
position: absolute;
top: 3%;
}
#device-title {
font-size: 14px;
margin-bottom: 5px !important;
}
#device-status {
font-size: 14px;
}
#view-all-statistics {
margin-top: 15px;
}
#view-all-statistics a:link {
text-decoration: underline;
}
.stats-paragraph-styling {
font-size: 14px;
font-weight: bold;
margin: 0;
}
.mb-none {
margin-bottom: 0 !important;
}
.text-weight-bold {
font-weight: 700;
}
h4,
.h4 {
font-size: 18px;
font-size: 1.8rem;
}
.text-xs {
font-size: 10px;
font-size: 1rem;
}
.text-muted {
color: #777;
}
/* */
.general-data-num-styling {
font-family: 'Lato', sans-serif;
font-size: 40px;
color: #2baab1;
}
.general-data-text-styling {
font-family: 'Lato', sans-serif;
font-size: 12px;
color: #373d42;
}
#items-num-inner-container {
/*margin-left: 15px;
margin-right: 15px;*/
border-left: solid 1px;
border-right: solid 1px;
}
/* */
.widget-summary {
display: table;
width: 100%;
}
.widget-summary .widget-summary-col.widget-summary-col-icon {
width: 1%;
}
.widget-summary .widget-summary-col {
display: table-cell;
vertical-align: top;
width: 100%;
}
.widget-summary .summary-icon {
margin-right: 15px;
font-size: 42px;
/*font-size: 4.2rem;*/
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
color: #fff;
-webkit-border-radius: 55px;
border-radius: 55px;
}
.bg-primary {
background: #0088cc;
}
.bg-secondary {
background: #E36159;
color: #FFF;
}
.bg-tertiary {
background: #2BAAB1;
color: #FFF;
}
.bg-quartenary {
background: #734BA9;
color: #FFF;
}
.widget-summary .summary {
min-height: 65px;
word-break: break-all;
}
.widget-summary .summary .title {
margin: 0;
font-size: 16px;
/*font-size: 1.6rem;*/
line-height: 22px;
/*line-height: 2.2rem;*/
color: #333;
font-weight: 500;
}
.widget-summary .summary .info {
font-size: 14px;
/*font-size: 1.4rem;*/
line-height: 30px;
/*line-height: 3rem;*/
}
.widget-summary .summary .amount {
margin-right: .2em;
font-size: 24px;
/*font-size: 2.4rem;*/
font-weight: 600;
color: #333;
vertical-align: middle;
}
.widget-summary .summary .info span {
vertical-align: middle;
}
.text-primary {
color: #0088cc !important;
}
.widget-summary .summary-footer {
padding: 5px 0 0;
border-top: 1px dotted #ddd;
text-align: right;
}
.text-uppercase {
text-transform: uppercase;
}
/*.panel-featured-tertiary {
border-color: #2BAAB1;
}
.panel-featured-quartenary {
border-color: #734BA9;
}*/
/*.panel-featured-left {
border-left: 3px solid #33353F;
}*/
.module-subscriptions {
display: block;
margin-top: 10px;
margin-left: 15px;
margin-right: 9px;
padding-bottom: 10px;
border-bottom: solid 3px;
}
.dropdown-menu.multi-column {
width: 1036px;
}
.dropdown-menu.multi-column .dropdown-menu {
display: block !important;
position: static !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
min-width: 100px;
}
JSFiddle link: https://jsfiddle.net/jaeedxpw/2/
Thanks in advance,
Eli Van Rock