Hello,
I'd like to adjust the Masthead on Mobile and hide the Masthead description. I can see the changes in Inspect tool but when I add it to Custom CSS they changes don't take place.
- Masthead Title on Mobile - I'd like 40px
- Masthead Description - I'd like to hide across the whole website
Please see my Custom CSS below.
If you can kindly advise, Thank you.
/WRAPPER RADIANT/
div.t4-wrapper {
background: linear-gradient(to right,#12BCFA,#0A63B8,#0A63B8,#0A63B8,#12BCFA,#12BCFA,#12BCFA,#12BCFA,#0A63B8);
animation: rainbow 18s ease infinite;
}
.section-title.text-normal span {
border-bottom:0;
background:linear-gradient(to right,#0A63B8,#0A63B8,#12BCFA,#12BCFA);
background-clip:text;
background-size:150% 100%;
color:transparent;
position:relative
}
.section-title.text-normal span:before {
background:linear-gradient(to right,#0A63B8,#0A63B8,#12BCFA,#12BCFA);
background-size:150% 100%;
content:"";
position:absolute;
bottom:0;
left:0;
height:2px;
right:0
}
/t4 WRAPPER TOP PADDING/
.container .section-title-wrap.text-center,
.t4-masthead .t4-masthead-detail .section-title-wrap.text-center {
padding-left:0;
padding-top: 0Px;
padding-right:0
}
/LOGO/
.navbar-brand.logo-control img.logo-img {
display:inline-block;
max-height:80px;
width: 130px;
}
@media (min-width:576px) {
.navbar-brand.logo-control img.logo-img {
display:inline-block
}
}
@media (min-width:576px) {
.navbar-brand.logo-control img.logo-img-sm {
display:inline-block;
}
/MOBILE LOGO AND MENU BAR/
@media (max-width: 767.98px) {
.t4-header {
min-height: 90px;
}
}
/SECTION-3 FONT/
.lead,
.t4-masthead .t4-masthead-description {
font-size:1rem;
font-weight:inherit
}
/SIDEBAR MENU/
.navbar {
--t4-navbar-padding-x:1rem;
--t4-navbar-padding-y:1rem;
--t4-navbar-color:rgba(0,0,0,0.8);
--t4-navbar-hover-color:rgba(0,0,0,.7);
--t4-navbar-disabled-color:rgba(0,0,0,.3);
--t4-navbar-active-color:rgba(0,0,0,.9);
--t4-navbar-brand-padding-y:.266625rem;
--t4-navbar-brand-margin-end:1rem;
--t4-navbar-brand-font-size:1.25rem;
--t4-navbar-brand-color:rgba(0,0,0,.9);
--t4-navbar-brand-hover-color:rgba(0,0,0,.9);
--t4-navbar-nav-link-padding-x:.5rem;
--t4-navbar-toggler-padding-y:.25rem;
--t4-navbar-toggler-padding-x:.75rem;
--t4-navbar-toggler-font-size:1.25rem;
--t4-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
--t4-navbar-toggler-border-color:rgba(0,0,0,.1);
--t4-navbar-toggler-border-radius:var(--btn-border-radius);
--t4-navbar-toggler-focus-width:.25rem;
--t4-navbar-toggler-transition:box-shadow 0.15s ease-in-out;
position:relative;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
padding:var(--t4-navbar-padding-y) var(--t4-navbar-padding-x)
}
.sidebar-r .navbar-nav .dropdown-menu {
display: block;
border: 0;
}
.sidebar-r .navbar-nav .dropdown-menu li a {
white-space: pre-wrap;
font-size: 15px;
}
/SIMPLE GALLERY MARGINS/
ul.sigFreeClassic li.sigFreeThumb {
float:left;
background:#f7f7f7!important;
margin:5px 5px 5px 5px;
padding:0;
list-style:none!important
}
/SEARCH BOX/
.form-control,
.acym_module_form input[type="email"],
.acym_module_form input[type="text"],
#acym_wrapper .acymfrontarchive #acymfrontarchive__search input {
max-width:100%;
}
/CATEGORY BLOG LAYOUT HEADINGS FONT SIZE/
.page-header h2,
.page-header .h2,
.categories-list h2,
.categories-list .h2 {
font-size:var(--h1-font-size);
font-weight: bold;
margin:0
}
/H2,H3 HEADING SIZE/
body h2,
body .h2 {
font-weight:bold;
line-height:var(--heading-h2-line-height)
}
body h3, body .h3 {
font-weight: bold;
line-height: var(--heading-h3-line-height);
}
.acm-slideshow .item {
background:var(--gray-900);
align-content:center;
display:flex;
justify-content:center;
flex-direction:column;
text-align:center;
height:850px;
max-height:82vh
}
/MASTHEAD HIDE DESCRIPTION AND ADD BOTTOM MARGIN/
#t4-masthead .ja-masthead .ja-masthead-detail .ja-masthead-description {
font-size: 1.2rem;
color: #fff;
max-width: 530px;
margin: 0 auto 1rem;
opacity: .9;
display: none;
}
@media only screen and (max-width:575px) {
#t4-masthead .ja-masthead .ja-masthead-detail .ja-masthead-description {
font-size: 1.2rem;
color: #fff;
max-width: 530px;
margin: 0 auto 1rem;
opacity: .9;
display: none;
}
}
#t4-masthead .ja-masthead .ja-masthead-detail .ja-masthead-title {
color: #fff;
font-size: var(--hero-font-size);
font-weight: var(--heading-h1-font-weight);
margin-top: 0;
margin-bottom: 50px;
}
@media only screen and (max-width:575px) {
#t4-masthead .ja-masthead .ja-masthead-detail .ja-masthead-title {
font-size: 40px;
}
}