I am trying to display a font awesome spinner horizontally center. With the below CSS it is displaying only on the left hand side. Can anyone help me how to fix this?
loading.component.html
<div class="container">
<div class="loading-overlay">
<i class="fa fa-spinner fa-spin fa-4x"></i>
</div>
</div>
loading.component.scss
.loading-overlay {
align-items: center;
display: flex;
justify-content: center;
position: absolute;
z-index: 2;
}
.container {
width: 100%;
}
Thanks
Remove the position: absolute; and you are fine.
.loading-overlay {
align-items: center;
display: flex;
justify-content: center;
z-index: 2;
}
.container {
width: 100%;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="container">
<div class="loading-overlay">
<i class="fa fa-spinner fa-spin fa-4x"></i>
</div>
</div>
Related
im having trouble with media query's and responsive designs
I cant seem to get the bottom nav to shrink when page gets smaller it just goes off page what am i doing wrong can someone please help me correct my code
#import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght#500&display=swap');
*{ margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family:'DM Sans', sans-serif;
;
}
.header-top{
width: 100%;
height: 65px;
background:#A4E0EB;
padding: 0 50px;
display: flex;
justify-content: right;
}
.header-top .header-top-container
{display: flex; align-items: center;
}
.header-top .header-top-container .header-top-quickSearch input[type="text"]
{border:1px solid#A4E0EB;
padding: 5px 10px;
outline: none;
border-radius: 4px;}
.header-top .header-top-container .header-top-quickSearch input[type="text"]:focus
{width: 250px}
.header-top .header-top-container ul{display: flex;
margin-right: 5rem;}
.header-top .header-top-container ul li{margin:0 12px;
font-size: 14px;
}
.header-top ul li a{color: #fff;}
.header-top ul li a:hover{color:#FFB5C3;}
/* header container */
.header-container { display: flex;
background-color:#f6f8f5;
font-family:'DM Sans', sans-serif;}
.header-container1{display: flex;
position: relative;}
img.header-logo{right: 60em; bottom:-5em;
position: absolute;}
/* header container end */
/* Links inside the navbar */
.header-container a {
float:left;
font-size: 14px;
color: #6F7378;
padding: 14px 16px;
text-decoration: none;
z-index: 5;}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
z-index: 5;}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 14px;
border: none;
outline: none;
color: #6F7378;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
z-index: 5;}
.dropdown-content-grid{display: grid;
grid-template-columns: repeat(4, max-content);}
.blank{text-decoration: none;
cursor:default;
pointer-events: none;
}
/* a tag & buttons underline */
*,
*:before
*:after {padding: 0;
margin: 0;
box-sizing: border-box;}
button{position: relative;
text-decoration: none;
font-family:'DM Sans', sans-serif;
color: #6F7378;
font-size: 1px;
letter-spacing: 0.5px;
padding:0 10px;}
button:after{content: "";
position: absolute;
background-color: #FFB5C3;
height: 3px;
width: 0%;
left: 0;
bottom: -0.4px;}
button:hover:after{width: 100%;}
.home{position: relative;
text-decoration: none;
font-family:'DM Sans', sans-serif;
color: #6F7378;
font-size: 16px;
letter-spacing: 0.5px;
padding:0 10px;}
.home:after{content: "";
position: absolute;
background-color: #FFB5C3;
height: 3px;
width: 0%;
left: 0;
bottom: -0.4px;}
.home:hover:after{width: 100%;}
.header-container > .home:focus, .home:hover {color: #FFB5C3;}
.dropdown > button:focus, button:hover {color: #FFB5C3;}
/* a tag & buttons underline end */
/* Add a red background color to navbar links on hover */
/* .navbar a.home:hover,.dropdown:hover .dropbtn {
background-color: #FFB5C3;
} */
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 10px;
z-index: 5;
}
.dropdown button:focus + .dropdown-content,
.dropdown-content:hover {
display: block;}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: #6F7378;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
z-index: 5;
}
.navPages a:hover{ color: #FFB5C3;}
.navPages button:hover{color: #FFB5C3;}
/* Add a grey background color to dropdown links on hover */
/* .dropdown-content a:hover {
background-color:#FFB5C3;
} */
/* Show the dropdown menu on hover */
.dropdown .dropdown-content {
display: none;
z-index: 5;
}
.navPages{
display: flex;
justify-content: center;
align-items: center;
z-index: 5;}
.header-container{
display: flex;
justify-content: center;
align-items: center;
}
/* .toggle-button{position: absolute;
top: 0.75rem;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 20px;}
.toggle-button .bar{height: 3px;
width: 100%;
background-color: #FFB5C3;
border-radius: 10px;} */
.wholebodycontainer{margin-top: 3rem;}
h1{display: flex;
justify-content: center;
align-items: center;
margin-bottom: 3rem;
font-size:35px;
letter-spacing: 0.75rem;
color: #506671;}
/* Image Slider */
*{Margin:0;
padding: 0;
box-sizing: border-box;}
.swiper{width: 65%;
height: fit-content;
border-radius: 5px;}
.swiper-slide img {width: 100%;}
.swiper .swiper-button-prev, .swiper .swiper-button-next {color: #FFB5C3;}
.swiper .swiper-pagination-bullet-active{background: #FFB5C3;}
/* Image Slider End */
#media screen and (max-width:1340px) {}
^^^CSS^^^
<!DOCTYPE html>
<html lang="en-uk">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cake & a'Cuppa Website</title>
<link rel="stylesheet" href="Cake-and-Cuppa-Website-Up-To-Date-Style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css"/>
</head>
<body>
<div class="body-wrapper">
<header class="header" role="banner">
<div class="header-top">
<div class="header-top-container">
<div class="header-top-quickSearch">
<input type="text" placeholder="Search the store">
</div>
<ul class="header-top-menu">
<li class="header-top-menu-item">CONTACT US</li>
<li class="header-top-menu-item">DELIVERY SERVICE</li>
<li class="header-top-menu-item">TEL:01904 690283</li>
</ul>
</div>
</div>
<div class="header-container">
<header class="header">
<div class="navPages-container">
<div class="header-container1"><img class="header-logo"-image src="c:\Users\micha\Desktop\cake-svg.png" alt="" width="155px" height="155px"></div>
<nav class="navPages">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<a class="home" href="#home">HOME</a>
<div class="dropdown">
<button class="dropbtn">CELEBRATION CAKES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="dropdown-content-grid">
BIRTHDAY CAKES
OCCASION CAKES
SEASONAL CAKES
TODDLER CAKES
CAKES FOR HIM
ANNIVERSARY CAKES
THANKSGIVING CAKES
NUMBER CAKES
CAKES FOR HER
WEDDING CAKES
CHRISTMAS
PRINCESS CaKES
TODDLER CAKES
CHRISTENING CAKES
BURNS NIGHT GIFTS
ROMANTIC CAKES
GIRLS BIRTHDAY CAKES
NEW BABY CAKES
VALENTINE'S DAY
<div></div>
BOYS BIRTHDAY CAKES
RETIREMENT CAKES
ST DAVID'S DAY CAKES
<div></div>
TEEN BIRTHDAY CAKES
GRADUATION CAKES
ST PATRICK'S DAY CAKES
<div></div>
NUMBER CAKES
RELIGIOUS CAKES
MOTHER'S DAY
<div></div>
CAKES WITH TOYS
GET WELL SOON CAKES
EASTER
<div></div>
ANIMAL CAKES
GOOD LUCK CAKES
ST GEORGE'S DAY CAKES
<div></div>
HANDBAG & SHOE CAKES
WELL DONE CAKES
EID CAKES
<div></div>
PRINCESS CAKES
<div></div>
FATHERS DAY CAKES
<div></div>
SUPERHERO CAKES
<div></div>
PRIDE DAY CAKES
<div></div>
SPORTING CAKES
<div></div>
HALLOWEEN CAKES
<div></div>
TECHNOLOGY CAKES
<div></div>
<div></div>
<div></div>
ROMANTIC CAKES
<div></div>
<div></div>
<div></div>
TWO~TIER CAKES
<div></div>
<div></div>
<div></div>
RUDE BIRTHDAY CAKES
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">GIFT CAKES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<a class="home" href="#home">PHOTOCAKES</a>
<div class="dropdown">
<button class="dropbtn">CUPCAKES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<a class="home" href="#home">CAKES IN-A-TIN</a>
<div class="dropdown">
<button class="dropbtn">CORPORATE CAKES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</nav>
</div>
</div>
</header>
<div class="wholebodycontainer">
<h1>YORKSHIRES FAVOURITE CAKE STORE</h1>
<!-- image slider -->
<div id="container-body">
<div class="container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="c:\Users\micha\Desktop\New Professional\tets\Untitled-3.png" alt=""></div>
<div class="swiper-slide"><img src="c:\Users\micha\Desktop\New Professional\tets\Untitled-3.png" alt=""></div>
<div class="swiper-slide"><img src="c:\Users\micha\Desktop\New Professional\tets\Untitled-3.png" alt=""></div>
<div class="swiper-slide"><img src="c:\Users\micha\Desktop\New Professional\tets\Untitled-3.png" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper', {
autoplay:{delay: 5000,
disableOnInteraction: false,},
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</div>
<!-- image end -->
</div>
</div>
</body>
</html>
^^^HTML^^^
I cant seem to get the bottom nav to shrink when page gets smaller it just goes off page what am i doing wrong can someone please help me correct my code
I'm trying to use bootstrap grid to format my webpage layout. There are two elements on my page, an image and a subtitle for the image. I would like that both elements occupy the whole screen of a smartphone, just under the navbar. Could anyone help me? I'm also tryint to make it looks nice on pc and other plataforms.
I have done some progress using media screen, but its still clunky.
Thats my .index html:
<div class="row">
<div class="combocontainer col-lg-12">
<div class="combocontainer">
<div class="top-container">
<img class="avatar" src="Images/minimalist.jpg" alt="avatar" />
</div>
<div class="signature">
<h1>My Name</h1>
</div>
</div>
</div>
</div>
Thats my css:
.avatar {
display: block;
margin-top: 220px;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
.combocontainer{
height: 100vh;
}
#media screen and (min-width: 1000px) {
.combocontainer {
display: block;
margin-top: 6rem;
margin-left: auto;
margin-right: auto;
height: 20%;
width: 20%;
}
}
/* No implementation yet */
.signature {
text-align: center;
height: 20%;
width: 20%;
font-family: "romatehood-p73ed-webfont";
}
I am trying to have two items as links in the top right corner of the page.
I posted my code on codepen for a visual example. Whenever I add padding for the visit button the about goes up on the page.
CSS:
.navigation {
display: flex;
justify-content: space-between;
align-content: center;
&-list {
display: flex;
align-self: center;
list-style: none;
font-size: 2rem;
}
&-item {
&-visit {
background-color: $color-tertiary;
padding: 2rem;
}
}
}
Html:
<div class="container">
<navigation class="navigation">
<h1 class="porto">Porto</h1>
<ul class="navigation-list">
<li class="navigation-item">About</li>
<li class="navigation-item navigation-item-visit">Visit</li>
</ul>
</navigation>
</div>
Try removing the height in &-item and padding-bottom in &-visit.
I have a three column layout where the logo at browser view is to the left, one word is in the middle, and the nav menu is to the right. This is fine at full browser.
When it is resized to mid or mobile view the columns are not clearing and stacking correctly.
Here is what I am getting right now at full view: http://postimg.org/image/wvfl1hkut/
Here is what needs fixed at mobile and mid view: http://postimg.org/image/sa1nvyw8j/
Here is my code:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="header">
<div class="col-xs-6 col-sm-4">
<a href="{{ URL::route('home') }}">
<div class="header_group">
<img src="../../images/logo.png">
</div><!--header group -->
</a>
</div>
<div class="col-xs-6 col-sm-3"></div>
<div class="col-xs-6 col-sm-4">
<p> </p>
</div>
<div class="col-xs-6 col-sm-4">
#include('layout.navigation')
</div>
</div><!-- main header -->
</div><!-- row -->
</div>
</div>
External CSS sheet
.header {
width: 100%;
height: auto;
margin: 0 auto;
background: red;
}
.header_group {
background-color: none;
width: 100%;
height: auto;
display: inline-table;
font-size: 1.5em;
font-weight: 400;
font-family: 'Roboto', sans-serif;
color: #f0fff0;
clear: none;
margin-top: 5%;
}
.header_text {
vertical-align: middle;
display: inline;
text-align: center;
color: #f05152;
}
.nav {
width: auto;
height: auto;
margin-top: 12%;
}
.nav a {
color: #000;
padding-left: 10%;
margin-left: 4%;
}
.navbar {
width: 100%;
height: 20%;
padding-top: 0;
}
.wrapper {
width: 100%;
height: 500px;
background: url(../../../images/yellow.png) repeat,
}
Bootstrap has a 12 column grid. Each set of 12 columns should be contained in a .row.
Your code has 4 .col-xs-6 columns, which total 24 columns. It also has 3 .col-sm-4 and 1 .col-sm-3 columns, which total 15 columns.
If you place the columns in their correct rows of 12 then they will clearfix correctly.
FYI: From the documentation...
Content should be placed within columns, and only columns may be immediate children of rows.
Move .header.
Right, so I have made a navigation bar and I want to add images before each link, I know I can use a.header:before but I need different images for each link, a house for home, spanner for spec and so on. What is the simplest way of doing this? Is there a way without creating a div for each one and styling them individually?
For a preview of the page so far with the nav - http://zimxtrial.ukbigbuy.com/
One more thing - here is part of the css:
#header-nav {
background-color: #FFFFFF;
height: 80px; height: 8.0rem;
width: 100%;
position: absolute;
top: 50px;
}
.header-nav-center {
height: 80px; height: 8.0rem;
text-align: center;
position: relative;
top: 0px;
width: 500px; width: 50.0rem;
margin-left: auto;
margin-right: auto;
}
.header-nav-center ul {
margin: 0;
}
.header-nav-center ul li {
list-style: none;
margin: 0 35px 0 0;
display: inline;
}
a.header {
line-height: 80px; line-height: 8.0rem;
font-size: 17px; font-size: 1.7rem;
}
And HTML:
<div id="home">
<div id="header-nav">
<div id="hr-nav-top-container">
<hr class="nav" />
</div>
<div id="logo"></div>
<div class="header-nav-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li><a class="header" href="#features">Features</a>
</li>
<li><a class="header" href="#specification">Specification</a>
</li>
<li><a class="header" href="#contact-us">Contact Us</a>
</li>
</ul>
</div>
<div id="pre-order"></div>
<div id="hr-nav-bottom-container">
<hr class="nav" />
</div>
</div>
</div>
Can I add something like:
a.header.home:before {
background: url('../images/home-logo.png') center center no-repeat;
}
Not that exactly but something like it?
You could make ids for each link and add the ids to the desired link img