Hello,
I noticed some problem on one website. Some of the CSS I am using in the customiser is somehow not working. I do not understand why and would please need your help to make it work. Here is some CSS which has no effect:
.x-colophon.top {
text-align:center !important;
}
or
.x-topbar {
border-bottom:1px solid red;
background-color: red !important;
}
Hi there,
Perhaps there is an issue with the CSS code that you have in the Global CSS such as some CSS syntax error that is stopping the CSS code you are adding to work as expected.
To verify that, please copy all the codes that are in the Global CSS and paste it here.
It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.
Let us know how it goes.
Thank you for the tip. I’ve done it and I’ve only get one error message which I don’t really understand as I can’t see any error. Here is the CSS:
/*
2 // Navbar.
3 */
4
5 .x-navbar {
6 border-bottom: 0;
7 background-color: rgba(223, 217, 195, 0.85);
8 box-shadow: none;
9 }
10
11 .x-navbar .x-btn-navbar.collapsed {
12 color: #f25a55;
13 text-shadow: none;
14 background-color: transparent;
15 box-shadow: none;
16 }
17
18 .x-navbar .x-btn-navbar {
19 text-shadow: none;
20 background-color: transparent;
21 box-shadow: none;
22 }
23
24 .x-navbar .x-btn-navbar,
25 .x-navbar .x-btn-navbar.collapsed:hover {
26 color: #171c33;
27 }
28
29 .x-navbar .desktop .x-nav > li > a:hover,
30 .x-navbar .desktop .x-nav > .x-active > a,
31 .x-navbar .desktop .x-nav > .current-menu-item > a {
32 box-shadow: none;
33 }
34
35 .x-navbar .mobile .x-nav {
36 text-align: center;
37 }
38
39
40 /*
41 // Pages.
42 */
43
44 .h-page-main {
45 margin: 0;
46 line-height: 1;
47 color: #f25a55;
48 }
49
50 .h-page-sub {
51 margin: 0.5em 0 0;
52 font-weight: 400;
53 }
54
55
56 /*
57 // Blog.
58 */
59
60 .blog .x-navbar,
61 .single .x-navbar {
62 background-color: transparent;
63 }
64
65 .blog .entry-wrap,
66 .single .entry-wrap {
67 margin-left: auto;
68 margin-right: auto;
69 max-width: 600px;
70 text-align: center;
71 background-color: #dfd9c3;
72 }
73
74
75 /*
76 // Footer.
77 */
78
79 .x-colophon.bottom {
80 border-top: 0;
81 background-color: #141615;
82 }
83
84
85 /*
86 // Shortcodes.
87 */
88
89 .x-recent-posts .h-recent-posts {
90 margin: 0.5em 0;
91 }
92
93 .x-recent-posts .x-recent-posts-date {
94 display: none;
95 }
96
97 /*class*/
98 .btn-topbar:hover {
99 background-color: rgba(255, 255, 255, 0.3) !important;
100 color: #fff !important;
101 border: 1px solid #fff;
102 }
103
104 .btn-footer:hover {
105 background-color: rgba(242, 90, 85, 0.3) !important;
106 color: #fff !important;
107 border: 1px solid #f25a55;
108 }
109
110
111
112 .btn-inverse:hover {
113 background-color: rgba(57, 37, 94, 0.5) !important;
114 color: #fff !important;
115 border: 1px solid #39255e;
116 }
117
118 .footer-link {
119 color: #5a5a5a !important;
120 }
121
122 .footer-link:hover {
123 color: #fff !important;
124 }
125
126 @media (max-width: 780px) {
127 .margin-btn {
128 margin-left:20px;
129 margin-right:20px;
130 }
131
132 /*Topbar*/
133 .x-topbar {
134 border-bottom:1px solid #3f4042;
135 background-color: rgba(57, 37, 94, 0.6);
136 }
137 .x-topbar .p-info {
138 margin: 1px 0 1px 0;
139 width: 100%;
140 display: flex;
141 flex-direction: row;
142 justify-content: space-between;
143 align-items: center;
144 }
145
146 .x-colophon.top {
147 text-align:center;
148 }
149
150 /*Social Media*/
151 .bg-twitter2,.bg-linkedin2,.bg-facebook2 {
152 background: #454545;
153 border-radius:10px;
154 }
155
156 .bg-twitter2:hover {
157 background: #55acee;
158 }
159
160 .bg-facebook2:hover {
161 background: #3b5999;
162 }
163
164 .bg-linkedin2:hover {
165 background: #0077B5;
166 }Hi there,
The CSS error is here:
@media (max-width: 780px) {
.margin-btn {
margin-left:20px;
margin-right:20px;
}
Kindly add one more closing curly brace after the closing curly brace.
Hope this helps.
Thank you!
You’re welcome.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.