Hi Guys,
This is a new one. I’ve added custom css. It works for desktop and laptop views but completely drops any styling from MD down to SM mobile screens. Tried to force the styling using @media but it fails to apply and doesn’t bring up any of the custom classes.
I’m on the latest PRO version.
Wordpress up to date.
Have deactivated all other plugins.
This is really weird… any suggestions are greatly appreciated!
Kind regards and thanks in advance,
Claire
Hello Claire,
Thanks for posting in!
This is your custom CSS starting in line 353:
/*STICKY SIDEBAR NAV - @media effective on desktop on min width screens 800px ***/
@media screen and (min-width: 800px) {
.stick {
margin-top: 0 !important;
position: fixed;
top: 150px;
right: 60px !important;
z-index: 0;
bottom: 0px;
overflow:scroll;
line-height:1.2;
overflow-x:auto;
overflow-y:auto;
max-height: 700px;
/*min-height:400px;
*/
}
/*INNER PAGE LAYOUT*/
.inner-page-title-blue {
background:url(https://cdww.designcounsel.com.au/wp-content/uploads/2020/11/support-services-directory-wagga.jpg);
background-size:cover!important;
background-repeat:no-repeat;
opacity:.8;
height:500px;
background-position: center;
z-index:1;
position:relative;
vertical-align:middle!important;
}
.entry-content {
margin-top: 0px;
}
.inner-page-content h2 {
margin-top:0!important;
margin-bottom:20px;
}
.inner-page-title h1 {
color: #fff;
position: relative;
z-index: 5;
opacity: 1!important;
margin-top: 0;
text-transform: uppercase;
font-size: 50px;
font-weight: 600;
letter-spacing: 0.02em;
}
/*INNER WIDGET MENU #inner-menu-widget {
margin-top: 0 !important;
position: fixed;
top: 750px;
left: 0 !important;
z-index: 0;
bottom: 0px;
overflow: scroll;
line-height: 1.2;
}
*/
.inner-menu-widget .widget_nav_menu ul li a:before {
content: "";
padding-right: 20px;
padding-left:35px;
}
.widget_nav_menu ul li a {
padding: 0.65em 0em;
}
/*NEWS GRID HOME*/
.news-grid-home {
padding:0 150px;
}
/*FOOTER*/
.e434-1.x-bar {
height: 6em;
font-size: 16px;
background-color: #202b45;
box-shadow: 0em 0.15em 2em rgba(0,0,0,0.15);
z-index: -1!important;
}
/*INLINE NAV MENU BAR*/
.e45-11.x-bar {
height: 43px;
font-size: 16px;
background-color: #597ad9;
box-shadow: 0em 0.15em 2em rgba(0,0,0,0.15);
z-index: 1;
}
/*SEARCH BAR HOME */
.w2dc-content.w2dc-search-form {
background: transparent none repeat scroll 0 0;
}
.w2dc-search-overlay {
background: none;
padding: 0px;
}
/*.w2dc-content .w2dc-container-fluid:before {
display: none;
content:none;
}
.w2dc-content .w2dc-col-md-6 {
width: 100%;
}
.w2dc-content .w2dc-form-control, .w2dc-content .w2dc-form-control:focus {
width: 100%;
max-width: 100%;
float: none;
color: #555555;
border: 1px solid #969696;
border-radius: 2px;
height: 40px;
font-size: 16px;
box-shadow: none !important;
padding: 6px 12px;
}
.w2dc-content .w2dc-row {
margin-left: -15px;
margin-right: -15px;
display: inline-flex;
}
/*.w2dc-content .w2dc-pull-right {
float: right;
background: transparent;
padding-top: 17px;
padding-left: 20px;
}
*/
/*.w2dc-search-form {
border-radius: 2px;
border: 1px solid #CCCCCC;
margin-bottom: 0px;
}
*/
/*.w2dc-content .w2dc-form-group {
margin-bottom: 0px !important;
overflow: hidden;
}
*/
/*form.w2dc-content .w2dc-btn-primary {
background: -webkit-linear-gradient(top,#96a1ad00 0%,#8895a200 100%) !important;
color: #000;
text-shadow: none;
max-height: 40px;
border: 1px solid #969696;
}
/*
/*UNIVERSAL*/
p {
line-height:1.2;
}
h2, .h2 {
font-size:36px;
font-weight:600;
text-transform:uppercase;
}
h3, .h3 {
letter-spacing: 0em;
font-size: 26px;
font-weight: 400;
text-transform: uppercase;
}
/*HOME FEATURE IMAGE POSITION UNDER INLINE NAV*/
.top-feature-image {
height:500px;
}
.top-featured h1 {
color:#202b7c;
text-transform:uppercase;
font-weight: 600;
margin-top: 100px;
}
.top-feature-mosaic {
float:right;
padding-right:100px;
margin-top:40px;
}
.our-vision {
height:500px;
}
.our-vision h2 {
text-align: center;
color: #a9cfab;
text-transform: uppercase;
font-weight: 600;
margin-bottom:30px;
margin-top: 80px;
}
.our-vision p {
color: #a9cfab;
font-size: 17px;
line-height: 1.2;
width:60%;
margin:0 auto;
text-align:center;
}
.vision-icons-row {
max-width:60%;
margin:30px auto;
max-height:150px;
}
.vision-icons img{
width:40%;
margin-bottom:30px;
}
.vision-icons a {
text-align:center;
color: #a9cfab;
text-transform:uppercase;
}
#meet-our-bishop {
padding: 0 60px;
text-align: left;
vertical-align: middle;
}
.meet-our-bishop {
height:500px;
}
.bishop-img {
background:url(https://cdww.designcounsel.com.au/wp-content/uploads/2021/01/bishop-rev-mark-edwards-omi-diocese-wagga-nsw.jpg);
/*background-image:cover;
*/
background-repeat:no-repeat;
opacity:.7;
}
.meet-our-bishop h2 {
color:#cbd7d9;
}
.meet-our-bishop h5 {
margin-top:0;
color:#cbd7d9;
font-family:"Karla",sans-serif;
margin-bottom:30px;
font-size:17px;
}
.meet-our-bishop p {
color:#cbd7d9;
}
.bishop-mosaic {
position: absolute;
bottom: 0%;
}
.bishop-mosaic img {
height: auto;
max-width: 78%;
vertical-align: top;
padding-left:30px;
}
.news-updates h2{
color:#1c2f81;
}
.x-counter .number-wrap {
font-size: 2.9em;
line-height: 1;
text-align: center;
font-weight: 600;
}
.x-counter .text-below {
margin-top: 0px;
text-align: center;
}
.church-stats {
padding-top:80px;
height:300px;
}
.stats-icon img{
width:25%;
padding-bottom:20px;
}
.w-h {
font-weight: 800 !important;
}
/*TOGETHER HOME*/
.together-home {
height:533px;
}
.together-home h4 {
color:#fff;
text-transform:uppercase;
padding-top:35px;
}
.together-home p {
color:#fff;
width:50%;
margin: 0 auto;
}
.together-logo img {
min-width:600px;
padding:30px;
}
.green-button .vc_btn3.vc_btn3-color-success, .vc_btn3.vc_btn3-color-success.vc_btn3-style-flat{
margin-top:50px;
background-color:#5b7751!important;
}
/*HOME FEATURE BOXES*/
#navy-box {
padding: 0 60px;
text-align: left;
vertical-align: middle;
height:500px;
background-color:#202c76;
}
#navy-box h2 {
color:#b2cdae;
}
#navy-box p {
color:#b2cdae;
}
#navy-box.light-green-button .vc_btn3.vc_btn3-color-success.vc_btn3-style-outline {
color: #b2cdae;
border-color: #b2cdae;
background-color: transparent;
}
#yellow-box {
padding: 0 60px;
text-align: left;
vertical-align: middle;
height:500px;
background-color:#e5d381;
}
#yellow-box h2 {
color:#4a4748;
}
#yellow-box p {
color:#4a4748;
}
#green-box {
padding: 0 60px;
text-align: left;
vertical-align: middle;
height:500px;
background-color:#b2cdae;
}
#green-box h2 {
color:#4a4748;
}
#green-box p {
color:#4a4748;
}
#blue-box {
padding: 0 60px;
text-align: left;
vertical-align: middle;
height:500px;
background-color:#597ad9;
}
#blue-box h2 {
color:#c5d9dd;
}
#blue-box p {
color:#c5d9dd;
}
#blue-box .vc_btn3.vc_btn3-color-primary.vc_btn3-style-outline {
color: #c5d9dd;
border-color: #c5d9dd;
background-color: transparent;
}
.mosaic-feature-boxes {
position: absolute;
bottom: -90px;
right:50px;
z-index:1;
}
/*NEWS FEATURE BLOCK*/
.news-grid-hover-overlay
/*branding graphic icon overlay*/
{
width: 105px;
height: 105px;
float: right;
position: absolute;
right: 0px;
top: 0px;
opacity:.7;
}
.vc_gitem-animate-none .vc_gitem-zone-b {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0;
opacity: 0;
box-sizing: border-box;
background-color: rgb(0,0,0)!important;
background: linear-gradient(360deg, rgba(0,0,0,1) 0%, rgba(32,43,124,0.5018601190476191) 87%)!important;
}
/*OTHER*/
.vc_gitem-zone-a .vc_gitem-row-position-bottom, .vc_gitem-zone-b .vc_gitem-row-position-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background:#000!important;
}
.news-grid-front-title h3 {
font-size:1.4em;
padding:0px 40px 0px;
color:#fff;
margin-top:15px;
margin-bottom:15px;
}
/* .news-grid-front-title .vc_gitem-link {
text-decoration: none;
color:#fff!important;
width:100%!important;
font-size:1em;
}
*/
.post-hover-container {
padding: 0 50px!important;
}
.post-hover-text p {
color:#fff;
}
.post-hover-text h3 {
color:#fff;
font-size:20px;
}
.post-hover.vc_btn3.vc_btn3-color-primary, .vc_btn3.vc_btn3-color-primary.vc_btn3-style-flat {
color: #202b7c;
background-color: #cbd7d9!important;
font-weight:600;
}
It is missing a closing } curly braces and by the way, from line 353 to the last line, it will only be applied on larger screens that are greater than 800 pixels. You may need to double-check your @media block of which part of the CSS you would like to apply on what screen size.
Best Regards.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.