Fantastic, @christian. Thanks for that very prompt response.
I didn’t know what “inherit” really meant till now…! :)’ Grateful for the education.
I did turn on Font Manager all along, but now I removed the “inherit”. The footer font is now nicely changed to Raleway. But why is it still capitalized and why is the spacing in between letters wider than the body font? Look forward to learning from you all.
Hello @iamwithU,
The Footer Menu Items were in Uppercase and has some spacing because that is styled with the stack Integrity - Light.
If you want to adjust it, copy the code in the screenshot and add the custom CSS in Cornerstone > Theme Options > CSS:
.x-colophon.bottom .x-nav li a {
letter-spacing: 0px;
text-transform: none;
}
The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.
Best Regards.
Awesome, @ruenel. Just what I need!
Great support. I learnt much throughout this journey. Grateful for all the help.
Hello @iamwithU,
Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns regarding our theme and theme settings.
Thanks
Hey guys, something quite strange.
I just notice that the code that @ruenel gave me worked on the smaller screens, but not the larger screens. Please see screenshots. Any clue why?
Hello @iamwithU,
Please go to Cornerstone > Theme Options > CSS and remove the orphaned } in line 169.
Please make sure that all your custom CSS blocks are valid and correct to avoid any conflict or issues which may occur later on.
Best Regards.
Thank you @ruenel for your kind response.
I removed that orphan. Alas, my footer in the bigger screens stay as the same…
I am picking up CSS, so please excuse my progress on this - I combed through the CSS, but couldn’t decipher most of their significance. As some of them were suggested by various support staff several years ago, I am cautious of deleting CSS that I don’t know about. What I can do is limit X Theme features to Woocommerce pages, forms and one webpage. I want to clean up CSS I don’t need - if only I know how to identify them! 
Appreciate your patience.
Hello @iamwithU,
I can see that there are still some unclosed curly braces that made other CSS blocks orphaned or ignored. This is your custom CSS:
/*
// Body.
*/
body {
line-height: 1.7;
}
/*
// Site container.
*/
.x-boxed-layout-active .site {
width: 100%;
border: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.575);
}
/*
// Navbar.
*/
.x-navbar {
border-right: 0;
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.275);
}
/*
// Hours.
*/
.hours {
margin: 0 auto;
border: 1px solid rgba(255, 255, 255, 0.25);
padding: 1.15em 1.5em;
font-size: 0.915em;
color: #fff;
border-radius: 4px;
}
.hours.home {
margin-top: 20px;
max-width: 275px;
font-size: 0.85em;
}
/*
// Location.
*/
.location img {
width: 250px;
margin: 0;
}
.location .h-location {
margin: 0 0 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
padding: 0 0 8px;
line-height: 1.1;
}
.location .h-features {
margin: 45px 0 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
padding: 0 0 10px;
font-size: 1em;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.location .p-info,
.location .p-features {
font-size: 16px;
line-height: 1.5;
}
/*
// Call to action.
*/
.cta {
margin: 0 auto;
max-width: 425px;
}
/*
// Custom headlines.
*/
.h-custom-headline.accent span::before,
.h-custom-headline.accent span::after {
border-bottom-color: rgba(255, 255, 255, 0.15);
border-top-color: rgba(255, 255, 255, 0.15);
}
.x-container.offset {
margin: 0 auto;
}
body .x-container.max,
body .x-container.width {
width:100%;
}
.x-block-grid>li {
margin: 2% 2% 0 0;
}
body.archive.x-navbar-fixed-left-active {
padding-left: 0px !important;
}
@media ( min-width: 980px ) {
.archive .x-navbar {
display: none;
}
.archive .h-landmark, .p-landmark-sub {
display: none;
}
.archive .x-boxed-layout-active .site {
margin: 0 !important;
}
.archive li.product-category.product {
display: none;
}
.woocommerce li.product {
box-shadow: none;
border: 0;
background: none !Important;
}
.woocommerce .x-content-band.vc .wpb_row, .x-content-band.vc .wpb_content_element {
background: none;
}
.woocommerce .x-container.max, body .x-container.width {
margin-top: 0;
margin-bottom: 0;
}
.archive .x-main.full {
margin-top: -25px;
}
@media (min-width: 980px){
.home a.x-brand.img {
display: none;
}
.archive.post-type-archive.post-type-archive-product #x-content-band-3 {
display: none;
}
.home .x-navbar-fixed-left .desktop .x-nav, .x-navbar-fixed-right .desktop .x-nav {
margin-top: 7em;
}
.archive .site,
.archive .site > .x-container.max.width {
width: 100%;
max-width: 100% !important;
}
.archive #x-content-band-1 .h-custom-headline {
margin-top: 0 auto;
}
.archive.woocommerce .h-custom-headline.h5 {
color:red;
}
body p:empty {
display:none;
}
.archive.woocommerce .x-main.full {
margin-top: 0px;
}
.h-custom-headline p {
margin:0;
}
.product_gallery .a3dg-navbar-control .icon_zoom span, .product_gallery .a3dg-navbar-control .slide-ctrl span {
text-transform: lowercase;
font-family: Georgia;
font-size: 12px;
font-style: italic;
}
.archive.woocommerce div#x-content-band-3 {
padding: 0;
margin: 0;
}
.woocommerce li.product .entry-wrap {
padding-top: 0px;
}
.woocommerce li.product .entry-header h3 {
padding-bottom: 0 !important;
}
.woocommerce-ordering select, .woocommerce-result-count {
color: #fff;
}
.h-custom-headline.accent span > span:before, .h-custom-headline.accent span > span:after {
display: none !important;
}
.x-content-band .woocommerce .cols-4 li.product, .x-content-band .woocommerce.columns-4 li.product {
width: 100%;
}
.archive #x-content-band-1,
.archive #x-content-band-2 {
background-color: transparent !important;
}
@media (max-width:767px){
.mobile-mbn{
margin-bottom: 0 !important;
}
}
a.x-btn-navbar.collapsed,
.masthead-inline .x-btn-navbar {
background-color: #000 !important;
}
.x-img-circle, .x-img-circle img {
margin-bottom: 1%;
}
.x-boxed-layout-active .entry-wrap {
padding-bottom: 0 !important;
}
/*reset margin to 0 when viewed on mobile*/
@media (max-width: 767px) {
.mobile-man {
margin: 0 !important;
}
}
@media (max-width: 767px) {
/*make the featured box title and text closer to each other*/
.home #x-section-8 .x-feature-box-title,
.home #x-section-8 .x-feature-box-text {
margin-top: 0;
line-height: 1;
}
/*make the featured box title closer to the image*/
.home #x-section-8 .x-feature-box-graphic {
margin-bottom: 0;
}
}
@media ( max-width: 979px ) {
.convert_plug_heading {
font-size: 45px !important;
}
}
@media ( max-width: 979px ) {
.convert_plug_heading {
font-size: 45px !important;
}
}
@media ( max-width: 767px ) {
.convert_plug_heading {
font-size: 40px !important;
}
}
.x-flexslider-shortcode-container {
margin-bottom: 0 !important;
}
.x-content-band .woocommerce .cols-4 li.product {
margin: 5% 2%;
}
@media (max-width: 768px){
.cp-optin-to-win .cp-image-container, .cp-optin-to-win .cp-text-container, .cp-optin-to-win .cp-text-container.cp-right-contain {
padding: 0;
}
.cp-modal-body {
padding: 15px 25px !important;
}
@media (max-width: 610px) {
.cp-first-order-2 form#smile-optin-form {
margin: 10px 0px;
}
}
@media (orientation: landscape) {
.post-type-archive-product #x-content-band-2 .x-column[class*="x-"] {
display: table-cell;
width: 20%;
vertical-align: top;
float: left;
margin-right: 0;
}
}
@media (max-width: 480px) {
.post-type-archive-product #x-content-band-2 .x-column[class*="x-"] .hidden_products{
overflow: hidden;
height:0px;
-webkit-transition: all 2s;
transition: all 2s;
}
}
@media ( max-width: 480px ) {
.niconne {
font-family: 'Niconne', cursive !important;
font-size: 38px;
}
}
@media( max-width:767px){
.custom-columns .x-column.x-sm{
float:left;
}
.custom-columns .x-column.x-2-3{
width: 65.33332%;
}
.custom-columns .x-column.x-1-3{
width: 30.66666%;
}
.custom-columns .x-column {
margin-right: 4%;
}
.custom-columns .x-column:last-of-type {
margin-right: 0;
}
@media( max-width:480px){
.custom-columns .x-column.x-sm{
float: none;
width: 100%;
margin-right: 0;
}
}
@media (max-width: 767px) {
#x-section-5 .x-container .x-column.x-1-2 {
width:50%;
display: table-cell;
}
#x-section-5 .x-container .x-column.x-1-2 h2{
font-size:130% !important;
}
#x-section-7 .x-container .x-column.x-1-3 {
width: 33.33333%;
display: inline-block;
vertical-align:top;
min-height:358px;
}
@media (max-width: 480px) {
#x-section-5 .x-container .x-column.x-1-2 {
width:100%;
display: block;
}
}
#x-section-7 .x-container .x-column.x-1-3 {
width:100%;
display: block;
min-height:0px;
}
.cp_id_c3747 .cp-form-container {
margin-bottom:0;
}
@media only screen and (max-width: 767px) {
.convert_plug_heading .cp_responsive {
font-size: 24px !important;
}
}
.home.x-boxed-layout-active .entry-wrap {
padding-top: 0;
}
@media (min-width: 1001px) {
.site,
body .x-container.max.width {
max-width: none;
}
}
.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
color: black;
background-color: #D3D3D3
}
.x-nav-tabs > li > a:hover {
color: #D3D3D3;
}
.x-tab-content {
background-color: #fff !important;
border-color: #fff !important;
color: #000 !important;
}
body .x-nav-tabs.right>.x-nav-tabs-item {
border: 1px dotted gray;
}
@media (min-width: 481px) {
#x-section-2 .x-nav-tabs.left,
#x-section-2 .x-nav-tabs.right {
float: left;
width: 24%;
max-width: 200px;
}
}
/*caption/title*/
.woocommerce li.product .entry-header h3 {
font-size: 100%;
}
/*price*/
.woocommerce li.product .entry-header .price>.amount,
.woocommerce li.product .entry-header .price>ins>.amount {
font-size: 80%;
}
.niconne {
font-family: 'Niconne', cursive !important;
}
.page-id-839 .widget_product_search,
.page-id-2096 .widget_product_search,
.page-id-987 .widget_product_search,
.page-id-408 .widget_product_search,
.page-id-925 .widget_product_search,
.page-id-1975 .widget_product_search,
.page-id-842 .widget_product_search,
.page-id-403 .widget_product_search {
display: none;
}
.entry-wrap, .x-colophon, .site, .x-root {
background-color: transparent !important;
}
@media (max-width: 767px){
.woocommerce li.product .entry-header .button {
display: none !important;
}
}
.button
{
text-shadow: unset;
}
.x-nav
{
text-align: center !important;
}
.x-colophon.bottom .x-nav li a {
letter-spacing: 0px;
text-transform: none;
}
.sku_wrapper {
display: none;
}
It is a bit in a mess. It should have been indented so that you can easily see the CSS blocks and @media where in you can also see whether the curly braces were in the right places or have been correctly closed. For example, the indented codes should look like this:
.element-class {
/* some styling here */
}
@media(max-width: 980px) {
.element-class {
/* some styling here */
}
}
Tip: Every open curly brace must be closed to prevent any conflict.
I would highly recommend that you go over your code one line at a line. That is the only way you can check your work.
Kindly let us know how it goes.
That’s wonderful, wonderful @ruenel! Your samples were fantastic and instructional.
I realized that whenever I copied what a support staff gave me in the past, the indents might run off. So now I know that after each curly brace, I need to indent and to make sure the @media classes have 2 corresponding closing braces. The parts I don’t understand were those with more than 1 class selector (ie those with a full stop in front ). I notice some have a comma separating them, some without commas, some separated with spacing. Eg line 118 to 128:
.archive .h-landmark, .p-landmark-sub {
display: none;
}
.archive .x-boxed-layout-active .site {
margin: 0 !important;
}
.archive li.product-category.product {
display: none;
}
Can just tell me briefly which protocol is correct?
Hi @iamwithU,
The comma is separating two different selectors for the same style. In your example code .archive .h-landmark and .p-landmark-sub selector have a comma in between, which means both the selector have the same style. Now the .archive .h-landmark selector is a hierarchy class which set the style for .h-landmark which have the parent .archive. You may also find the dot is concatenating two selector, that is denoting the same class in the element. I would suggest you go through the following articles which may help you understand.
Thanks
Thank you @tristup for that intro. Yes, I’ll go read up. At least now I know those CSS are valid. Grateful for the education here. 
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.