how can I move my social media icons to align with the rest of my footer? right now the social media icons are on the far right but everything on my footer is aligned to the left of my footer
please look at the homepage on my site https://protectallkids.org/ and you will see the social media icons are on the far right but everything on my footer is aligned to the left of my footer. I want to move them to the left. I tried to move it to widget #1 but it doesn’t work
Hi there
Hope you are having a good day and thank you for your question 
Kindly confirm, would like to move the social media icons to the left and align them to the footer content on the left? Or would you like to align the footer content base with the social media icons on the right?
Do let me know so that I may be able to advise further
Thanks!
Colorlib Support Team
I want to move the social media icons to the left and align them to the footer content on the left? everything to be on the left
hey there
Hope you are having a good day and thank you for your question
Please add this CSS in appearance - customize - additional CSS
footer #social {
float: left;
position: relative;
left: -23px;
margin-top: 12px;
}
footer .col-sm-6.text-right {
width: 100%;
}
Thanks!
Colorlib Support Team
hi, it worked but it only shows on the home page. is there a way to get the social icon to show on the footer for all pages?
Hi Angel
Ok, please add this code:
.fa, .fas {
font-family: fontawesome;
}
this code worked but it messed with all my icons on my pages. is there another code that wouldn’t interfere with my icons.
Ok, try this style
footer .fa {
font-family: fontawesome;
}
hi, can you give me the code to fix the color of the fonts on “Contact Us” page. Right now, some are black and some fonts are white. I want all of them to be white
Hi Angel
Try this code:
.wpcf7 p {
color: white;
}
hi, I have 3 questions. if you look at my homepage you will see on parallax number 4, where it says inter-state competition, the sentences in the body of that section, are in gray color which makes it impossible for my visitors to read.
How can I change the color?
Also can you give me code to update the font size?
How can I change the font family from times new roman to Lora. If you look at the other pages on my site, you will see that its in font family lora except the home page which is in times.
hey there
Please add this CSS in appearance - customize - additional CSS
#shapely_home_parallax-6 .cover p {
color: #ffffff;
font-size: 15px;
}
.cover p {
font-family: lora;
}
Thanks!
Colorlib Support Team
hi, there is something in the theme that is forcing my fonts to default to Times new roman. if you visit OUR WORK - protectallkids.org you will notice that the fonts are in times even though I set everything to Lora. if you pay attention to the sentences with bullet points, they are all in Lora. the sentences without bullet points are forced to be in times.
My entire FAQ page is in times even though I want it to be in Lora FAQs - protectallkids.org
Hello Angel
Times new roman is set from Elementor, you are using page builder on the page and this problem is coming from Elementor, not from the theme: Screenshot by Lightshot
you’re right but I have the same issue on my home page. My home page wasn’t built with elementary. it’s all shapely theme. Also, look at the home page where it says Major Crisis Relief Funds on https://protectallkids.org/ the fonts are smaller than others. can you give me a code to increase the font as well as change the homepage font family to Lora
HI Angel
You have the same problem on the homepage because now styles are messed, you can use this code to change the font size:
.image-bg h3, .image-bg h1 {
font-size: 15px;
}
Regarding font, its already styled as a Lora, and the font is applied,
The problems you are having now is not the theme issue, all the customization done and page builder plugin settings are messed and now styles are in conflict
this code .image-bg h3, .image-bg h1 that you just sent to me messed up my main header.
i just copied and pasted all the code in my additional css … can u look and see what you be there and what shouldn’t be there
.content-area {
padding: 1px;
}
.page-title-section h3 {
color: white;
}
#primary {
width: 100%;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
padding:30px;
margin: 1.2%;
background-color: #f2f2f2;
}
.woocommerce ul.products li.product:nth-child(4n), .woocommerce-page ul.products li.product:nth-child(4n) {
margin-right: 1em;
}
footer {
padding:10px;
}
.footer-credits {
display: none;
}
.copyright-text a {
padding: 30px;
}
.nav-bar {
width:100%;
}
.entry-title {
color:red;
display: none;
}
.module.widget-handle.search-widget-handle {
display: none;
}
#shapely_home_parallax-3 p {
color: black;
font-family: lora;
font-size: 17px;
} #shapely_home_parallax-6 .cover p {
color: #474343;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
font-family: lora;
}
.mb32 p strong, .mb32 p span {
font-size: 17px;
} .btn {
font-size: 13px;
}
.widget.widget_nav_menu .menu > li a {
font-size: 16px;
}
.main-navigation .menu li a {
font-size: 12px;
text-transform: uppercase;
font-weight: 900;
font-family: lora;
letter-spacing: 0.5px;
}
footer {
font-family: lora;
font-size: 14px;
}
body {
font-size: 17px;
}
@media (max-width: 767px){
body p {
font-size: 17px;
}
}
footer #social {
float: left;
position: relative;
left: -23px;
margin-top: 12px;
}
footer .col-sm-6.text-right {
width: 100%;
}
footer .fa {
font-family: fontawesome;
}
.wpcf7 p {
color: white;
}
#shapely_home_parallax-6 .cover p {
color: #ffffff;
font-size: 17px;
}
.cover p {
font-family: Lora;
}
.basic-yop-poll-container {
font-family: “Lora”, Lora !important;
}
.basic-yop-poll-container .basic-text-vertical {
word-break: break-word !important;
}
.basic-back-to-vote-button {
font-family: “Lora”, Lora !important;
}
.basic-yop-poll-container .basic-stats {
color: #ffffff;
}
.give-form-wrap {
color: black;
}
.give-final-total-amount {
color: black;
}
.give-payment-mode-label {
color: black;
}
#give_checkout_user_info legend {
color: black !important;
}
.give-form-title {
color: black;
}
.give-goal-progress .income {
color: black;
}
p.a {
font-family: " Lora ", Lora, Lora;
}
p {
font-family: " Lora ", Lora, Lora;
}
div#container {
background: white;
}
.give-goal-progress {
font-family: Lora;
}
input#give-amount {
font-family: Lora;
}
.give-btn {
font-family: Lora;
}
label#give-gateway-option-authorize {
font-family: Lora;
}
label#give-gateway-option-authorize_echeck {
font-family: Lora;
}
label#give-gateway-option-offline {
font-family: Lora;
}
label#give-gateway-option-paypal {
font-family: Lora;
}
body {
font-family: Lora, Lora;
}
body {
font-family: Lora;
font-size: 16px;
color: black;}
.um-register, .um-login {
padding: 2em;
background-color: #ffffff;
border-radius: 15px;
box-shadow: 2px 3px 3px 1px rgba(0,0,0,0.25);
}
.um-members-grid.masonry {
opacity: 1 !important;
}
Hi Angel
Im sorry but this problem now becomes out of our support policies, its something that needs different look into the problem and requires a review of all your customization, settings and page builder, if you have a problem that is only related to the theme surely I can help you but in this case when it’s closely merged with the page builder and other customization I cant.
Please take my sincere apologies
ok, can you give me the code to make the fonts bigger? I’m talking about the fonts on the parallax Major Crisis Relief Funds