Missing Social Icons? - html

Long story short, I have an issue on one of my webpages footers.
It is NOT showing the social icons I have.
Funny thing, the social icons show, and work perfectly on any other page.
The CSS is the same throughout, the HTML is the same throughout.
I have used the devtools and nothing looks like it is taking precedence over anything, so here I am, at a loss.
I have attached screenshots of what should be there, and what isnt there, along with the code.
What it should look like (and does on all other pages
What it looks like now
HTML code (all the same throughout every page)
CSS code. Same throughout all the pages
Page CSS with missing icons
/* --------------------PACKAGES PAGE STYLING SECTION-------------------- */
/* ----------------------------------------------------------------- */
:root {
--main-tan-color: #CCE6F4;
--brown-btns: #FBFF12;
--header: #FF206E;
--footer: #FF206E;
--recommended: #FF206E;
--white: #fff;
--black: #000;
--grey-text: rgb(82, 82, 82);
--free-plan: #FBFF12;
--blue-color: #41EAD4;
}
/* ----- Packages Header ----- */
.packages_header {
font-size: 5em;
text-align: center;
margin-top: 10%;
text-shadow: 3px 3px 3px grey;
}
/* ----- Packages Main Section ----- */
.main-section {
padding-top: 2rem;
}
.background {
background-image: url(../images/plans-background.jpg);
width: 100vw;
height: 100vh;
position: fixed;
z-index: -1;
opacity: 0.5;
}
.package {
width: 80%;
margin: 1rem 0;
border: 3px solid var(--black);
border-left: none;
}
.package-badge {
position: absolute;
z-index: 3;
top: -35px;
right: 6.5rem;
font-size: 2.2rem;
color: var(--black);
background-color: var(--free-plan);
padding: 0.6rem;
border-radius: 10px;
border: 1px solid var(--black);
}
/* ----- Packages Hover Affects ----- */
.package:hover,
.package:active {
box-shadow: 3px 3px 5px grey;
border-color: var(--black);
}
.package a {
text-decoration: none;
color: inherit;
display: block;
padding: 2rem;
}
.package-subtitle {
color:var(--grey-text);
}
.package-info {
padding: 1rem;
border: 1px solid var(--black);
font-size: 1.25rem;
color:rgb(56, 56, 56);
background-color: var(--white);
}
#plus {
background-color: var(--recommended);
position: relative;
opacity: 0.9;
border-radius: 0px 15px 15px 0px;
margin-top: 15%;
}
#free {
background-color: var(--free-plan);
float: right;
border-right: none;
border-left: 3px solid var(--black);
text-align: right;
opacity: 0.9;
border-radius: 15px 0px 0px 15px;
margin-top: 5%;
}
#free:hover {
box-shadow: -3px 3px 5px grey;
border-color: var(--black);
/* transform: scale(1.06); */
}
.clearfix {
clear: both;
}
#premium {
background-color: var(--blue-color);
opacity: 0.9;
border-radius: 0px 15px 15px 0px;
margin-bottom: 15%;
margin-top: 5%;
}
.package-title {
padding-bottom: 1.25rem;
}
#premium .package-title {
color: var(--black);
}
#premium .package-subtitle {
color:var(--grey-text);
}
.footer-img {
opacity: 0.9;
}
If you want to see all the code for the entire project, I have it uploaded to my [github].(https://www.github.com/ab1820) under the "uHost" repository.
I am wondering if there is something in this CSS that is not allowing the icons to show?
I have tried the position elements, z-index, removing the footer background color, background image of the page, and I am just so lost!

Related

Please how to complete such a button style through CSS? [duplicate]

This question already has answers here:
Circle with two borders
(4 answers)
Closed 3 months ago.
I have a CSS style for a button. I don’t know how to do it. I think it’s a bit too complicated and it’s not easy to make responsive adjustments. I would like to ask everyone how to write a button like this in CSS? thanks
.save_coin {
display: inline-block;
position: relative;
z-index: 3;
}
.save_coin::after {
content: "";
display: inline-block;
position: absolute;
background: #222;
border-radius: 32px;
padding: 26px 101px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#media (max-width: 768px) {
.save_coin::after {
border-radius: 38px;
padding: 38px 102px;
}
}
.save_coin span {
display: inline-block;
font-weight: 500;
text-align: center;
background: #222;
color: #fff;
padding: 12px;
border-radius: 32px;
position: relative;
z-index: 2;
border: 1px solid #fff;
width: 192px;
}
#media (max-width: 768px) {
.save_coin span {
width: auto;
font-size: 24px;
font-weight: 700;
padding: 15px 46px;
}
}
.save_coin:hover span {
color: #222;
background-color: #fff;
}
<span>save</span>
I think you can use outline attribute, work pretty good imo.
button {
padding: 10px 30px;
border-radius: 50px;
border: 2px solid white;
background-color: black;
color: white;
outline: 2px solid black;
}
button:hover {
background-color: white;
color: black;
}
<button>save</button>
You could try the box-shadow CSS property:
button {
cursor: pointer;
outline: none;
font-size: 30px;
/* 👇 outer line */
border: 5px solid black;
/* some very large number, to get a pill effect */
border-radius: 1024px;
padding: 30px 60px 30px 60px;
background: black;
color: white;
/* 👇 inner white line */
box-shadow: inset 0 0 0 3px white;
/* custom transition */
transition: 0.3s ease;
}
/* ignore this if you just want button design */
button:hover {
background: white;
color: black;
}
<button type="button">立即儲值</button>

Unable to get hover background color work with diagonal cut in CSS

I'm unable to get the hover background color timing to sync with :before. How can I fix this issue?
When you hover over the button, you will notice the transition of the background color is not in sync.
JSFIDDLE DEMO: https://jsfiddle.net/7c25wmuz/
.btn-primary {
background-color: #2c9ff5;
border-color: #2c9ff5;
text-transform: capitalize;
}
.btn.btn-primary:hover {
background-color: #45aff6;
border-color: #45aff6;
}
.btn-donate {
background-color: #053a86;
color: #fff;
margin-left: 15px;
padding-left: 40px;
padding-right: 30px;
padding-top: 2px;
text-transform: uppercase;
border-radius: 4px 0 0 4px;
height: 30px;
position: relative;
border: none;
}
.btn-donate:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 30px solid white;
border-right: 20px solid #053a86;
width: 0;
}
.btn-donate:hover::before {
border-right: 20px solid #45aff6;
}
Donate
Clip path is the solution you need for something like this.
.btn-primary {
background-color: #2c9ff5;
border-color: #2c9ff5;
text-transform: capitalize;
clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}
.btn.btn-primary:hover {
background-color: #45aff6;
border-color: #45aff6;
}
.btn-donate {
background-color: #053a86;
color: #fff;
margin-left: 15px;
padding-left: 40px;
padding-right: 30px;
padding-top: 2px;
text-transform: uppercase;
border-radius: 4px 0 0 4px;
height: 30px;
position: relative;
border: none;
transition: .5s all ease;
}
Donate
You can just add a background transition to .btn-donate and border transition to .btn-donate:before like so:
(added padding bottom to see things)
body {
margin-top: 15px;
}
.btn-primary {
background-color: #2c9ff5;
border-color: #2c9ff5;
text-transform: capitalize;
}
.btn.btn-primary:hover {
background-color: #45aff6;
border-color: #45aff6;
}
.btn-donate {
background-color: #053a86;
color: #fff;
margin-left: 15px;
padding-left: 40px;
padding-right: 30px;
padding-top: 2px;
padding-bottom: 1rem;
text-transform: uppercase;
border-radius: 4px 0 0 4px;
height: 30px;
position: relative;
border: none;
transition: .3s ease background;
}
.btn-donate:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 30px solid white;
border-right: 20px solid #053a86;
width: 0;
transition: .3s ease border;
}
.btn-donate:hover::before {
border-right: 20px solid #45aff6;
}
Donate
It seems you runned into conflict with browser default styles. You can see default styles in your Developer tools (F12) you just need to enable it. Go to developer tools settings and check "Show browser styles".
This issue can be simply fixed by overriding default styles with your own.
body {
margin-top: 15px;
}
.btn {
transition: unset; /* override, this is all you need */
display: block;
height: 30px;
}
.btn-primary {
background-color: #2c9ff5;
border-color: #2c9ff5;
text-transform: capitalize;
}
.btn.btn-primary:hover {
background-color: #45aff6;
border-color: #45aff6;
}
.btn-donate {
background-color: #053a86;
color: #fff;
margin-left: 15px;
padding-left: 40px;
padding-right: 30px;
padding-top: 2px;
text-transform: uppercase;
border-radius: 4px 0 0 4px;
height: 30px;
position: relative;
border: none;
}
.btn-donate:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 30px solid white;
border-right: 20px solid #053a86;
width: 0;
}
.btn-donate:hover::before {
border-right: 20px solid #45aff6;
}
Donate

Sign Board like Buttons design via css

Buttons design link down below
I need this design tried via before after but need the arrow softer
used skew and all.
also found references but that didn't work out, it seems very easy and similar design but couldn't find similar ones on the internet via examples.
https://i.stack.imgur.com/BCRNb.png
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100&family=Poppins:wght#300&display=swap');
body {
background: #fff;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
font-family: 'Poppins', sans-serif;
}
/* ------------------------- Separate line ------------------------- */
:root {
--breadcrumb-theme-1: #398AB9;
--breadcrumb-theme-2: #DFDFDE;
--breadcrumb-theme-3: #1C658C;
--breadcrumb-theme-4: #FFF;
}
a{
font-size: medium;
}
.breadcrumb {
text-align: center;
display: inline-block;
box-shadow: 0 2px 5px rgba(0,0,0,0.25);
overflow: hidden;
border-radius: 5px;
counter-reset: flag;
}
.breadcrumb__step {
text-decoration: none;
outline: none;
display: block;
float: left;
font-size: 14px;
font-weight:bold;
line-height: 36px;
padding: 0 10px 0 30px;
position: relative;
background: var(--breadcrumb-theme-2);
color: var(--breadcrumb-theme-1);
transition: background 0.5s;
}
.breadcrumb__step:first-child {
border-radius: 5px 0 0 5px;
}
.breadcrumb__step:first-child::before {
left: 14px;
}
.breadcrumb__step:last-child {
border-radius: 0 5px 5px 0;
padding-right: 20px;
}
.breadcrumb__step:last-child::after {
content: none;
}
.breadcrumb__step::after {
content: '';
position: absolute;
top: 0;
right: -18px;
width: 36px;
height: 36px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
border-radius: 0 5px 0 50px;
background: var(--breadcrumb-theme-2);
transition: background 0.5s;
box-shadow: 2px -2px 0 2px var(--breadcrumb-theme-4);
}
.breadcrumb__step--active {
color: var(--breadcrumb-theme-2);
background: var(--breadcrumb-theme-1);
}
.breadcrumb__step--active::before {
color: var(--breadcrumb-theme-1);
}
.breadcrumb__step--active::after {
background: var(--breadcrumb-theme-1);
}
.breadcrumb__step:hover {
color: var(--breadcrumb-theme-2);
background: var(--breadcrumb-theme-3);
}
.breadcrumb__step:hover::before {
color: var(--breadcrumb-theme-1);
}
.breadcrumb__step:hover::after {
color: var(--breadcrumb-theme-1);
background: var(--breadcrumb-theme-3);
}
<div class="breadcrumb">
<a class="breadcrumb__step breadcrumb__step--active" href="#">Choose product</a>
<a class="breadcrumb__step" href="#">Place order</a>
<a class="breadcrumb__step" href="#">Shiping</a>
<a class="breadcrumb__step" href="#">Booking</a>
<a class="breadcrumb__step" href="#">Complete</a>
</div>

css adjusting vertical positioning of fixed element

I'm having troubles with positioning the textbox for my chat. I can only make it look good for one specific resolution. On other screen sizes it just looks terrible. How can I adjust the position of the textbox for all resolutions (>1360px) to fit in the little darkgrey area on the bottom. When I try to adjust it for one resolution it won't look good on the other resolutions.
https://jsfiddle.net/4pvfwz11/1/
<div class="chatdiv hidden-xs hidden-sm col-lg-2 col-md-3 pull-right" data-spy="affix">
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
<ol class="chat">
<div id="fullchat">
<li class="bot"><div class="avatar"><img src="'+msg.avatar+'" draggable="false"/></div><div class="msg"><div class="name">Username</div><p>The chat text should come here..........</p><time><i class="fa fa-clock-o" aria-hidden="true"></i>19:00</time></div></li>
</div>
<div class="chat_error"></div>
</ol>
</div>
<div class="toggle-sound"></div>
<input class="textarea" id="chat_textbox" type="text" placeholder="Enter message here"/>
<style type="text/css">
div.chat_error {
color: #e20f0f;
padding-left: 10px;
padding-top: 1rem;
}
.chatdiv
{
position: fixed;
left: 40px;
background-color: #101010;
height: 90vh;
}
.chatdiv .name{
top: 3px;
left: 110px;
font-size: 10px;
font-weight: bold;
color: rgba(256,256,256,0.80);
cursor: default;
}
/* M E S S A G E S */
.chat {
list-style: none;
background: none;
margin: 0;
padding: 0 0 50px 0;
margin-top: 60px;
margin-bottom: 10px;
}
.chat li {
padding: 0.5rem;
overflow: hidden;
display: flex;
}
.chat .avatar img {
margin-top: 15px;
width: 40px;
height: 40px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
background-color: rgba(255,255,255,0.9);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.other .msg {
order: 1;
border-top-left-radius: 0px;
box-shadow: -1px 2px 0px #187006;
margin-left: 10px;
background-color: #27af0c;
}
.self {
justify-content: flex-end;
align-items: flex-end;
}
.self .msg {
order: 1;
border-bottom-right-radius: 0px;
background-color: #0a95db;
box-shadow: 1px 2px 0px #055f8c;
margin-left: 10px;
}
.bot .msg {
order: 1;
border-bottom-right-radius: 0px;
background-color: #a50808;
box-shadow: 1px 2px 0px #6b0606;
margin-left: 10px;
}
.msg {
background: white;
min-width: 50px;
padding: 10px;
border-radius: 2px;
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07);
}
.msg p {
font-size: 15px;
margin: 0 0 0.2rem 0;
color: white;
}
.msg time {
font-size: 10px;
color: #ccc;
margin-top: 3px;
float: right;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* T Y P E */
input.textarea {
position: absolute;
width: 89%;
height: 50px;
left: 15px;
bottom: 3vh;
background: white;
border: none;
outline: none;
padding-left: 10px;
padding-right: 10px;
color: #666;
font-weight: 400;
}
div.toggle-sound {
position: fixed;
bottom: 13vh;
left: 65px;
font-weight: bold;
font-size: 20px;
}
.scrollbar
{
float: left;
height: 80vh;
background-color: #232323;
overflow-y: scroll;
margin-bottom: 25px;
width: 100%;
}
.force-overflow
{
min-height: 90vh;
}
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #232323;
}
#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #232323;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #E20F0F;
}
</style>
If you want different CSS for different screen sizes you can use something called media queries. I don't know exactly what rules you want to change for different screen sizes, but let's do a quick example. Let's say you want to make the background color of the textbox red on screens with a width less than or equal to 900px. This can be done with the following media query:
#media (max-width: 900px) {
input.textarea {
background-color: red;
}
}
So what you can do is just to figure out what CSS changes you want to do on different screen sizes, and then make media queries for all of them. You can read more about media queries here.

Google Follow Not Showing

Please help me solve this problem, Google Follow only shows the bubble but not the word "Follow", it seems like the width is automatically set to "0" when I check using Firebug.
Only shows the bubble:
Width=0:
Currently this is the CSS code that I use:
/* header : social
/* ------------------------------------ */
.toggle-social { color: #fff; font-size: 18px; line-height: 24px; cursor: pointer; padding: 13px 20px 13px 20px; display: block; position: absolute; right: 60px; top: -50px;
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.1);
box-shadow: -1px 0 0 rgba(255,255,255,0.1);}
.toggle-social:hover,
.toggle-social.active { background: rgba(0,0,0,0.15); color: #fff; }
.social-expand { display: none; background: #26272b; position: absolute; top: 0; right: 58px; width: 320px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1);
box-shadow: 0 1px 0 rgba(255,255,255,0.1); }
.social-expand-inner { background: rgba(0,0,0,0.15); font-size: 18px; line-height: 24px; padding: 13px 20px 13px 20px; display: block; position: relative;}
.follow-social {font-size: 1px;}
/* This gets Facebook to fall into place */
.follow-social iframe { vertical-align: middle; }
/* Set an optional width for your button wrappers */
.follow-social span { display: inline-block; width: 90px; }
/* Adjust the widths individually if you like */
.follow-social .followgoogle { width: 75px; }
This is the Google Follow button:
developers.google.com/+/web/follow/
I tried to view it using Google Chrome, it render correctly:
http://s11.postimg.org/i1wh1nudf/work_on_chrome.png
When using Firefox, the problem still exists.