-
Posts
-
Hi.
I’m trying to format the main title of the web page (Enfold>Header> Header Title and Breadcrumbs.
I’ve tried adding some lines in quick CSS however they seem to have no impact on the live site.
FOR EXAMPLE
.title_container .main-title {
text-transform: lowercase;
front-size 300px;
}This does not alter anything on the live site however if I use Google Chrome element inspect and add/change the values, it works. Could you advise what code I should use and also how I can troubleshoot this myself as in my mind this should have worked.
The reason I am editing this is because I have a long page title which is causing the H1 to spill into the breadcrumbs.
The website is currently on localhost so I cannot share a link unfortunately.
I’ve just discovered something that I think is causing the issue.
A lot of changes I have been making have not been applying to the DESKTOP SITE. They are all working on the mobile site. For example, I have tried centering masonry gallery titles and this was not working on desktop but did on mobile. I have also followed the steps to edit H1 in logo area — this is working on mobile site but not desktop. And the change about IS working on mobile, but not desktop. Therefore I need to fix whatever is causing these changes to work on mobile but not desktop…
Any ideas?
In the case of the subtext H1… I have tried
.header_color {
text-align: center!important;
color: #25463!important;
}also
.header_color h1 {
text-align: center!important;
color: #25463!important;
}.subtext {
text-align: center!important;
color: #25463!important;
}It keeps pulling through the black colour from the following location and is ignoring the text align on desktop completely.
.header_color .heading-color,.header_color a.iconbox_icon:hover,.header_color h1,.header_color h2,.header_color h3,.header_color h4,.header_color h5,.header_color h6,.header_color .sidebar .current_page_item>a,.header_color .sidebar .current-menu-item>a,.header_color .pagination .current,.header_color .pagination a:hover,.header_color strong.avia-testimonial-name,.header_color .heading,.header_color .toggle_content strong,.header_color .toggle_content strong a,.header_color .tab_content strong,.header_color .tab_content strong a ,.header_color .asc_count,.header_color .avia-testimonial-content strong,#top .header_color .av-related-style-full .av-related-title,.header_color .wp-playlist-item-meta.wp-playlist-item-title,#top .header_color .av-no-image-slider h2 a,.header_color .av-small-bar .avia-progress-bar .progressbar-title-wrap,.header_color div .news-headline .news-title,.header_color .av-default-style .av-countdown-cell-inner .av-countdown-time,.header_color .av-default-style.av-countdown-timer.av-flip-numbers .card__top.card-time-color,.header_color .av-default-style.av-countdown-timer.av-flip-numbers .card__bottom.card-time-color,.header_color .av-default-style.av-countdown-timer.av-flip-numbers .card__back.card-time-color::before,.header_color .av-default-style.av-countdown-timer.av-flip-clock .flip-clock__card .flip-clock-counter {
color: #000000
}The CSS in the guide includes
…
/* Subtext styling */
.logo .subtext h1 {
font-size: 20px;
font-weight: 600;
text-align: center;
}
….Again, this is not applying when on full-width site but appears under @media only screen and (max-width: 767px) once I reach the appropraite resolution
Ok I found the issue after validating the complete quick CSS field. The issue was quite silly actually… I had “@media only screen and (max-width: 767px) {” further up in the coding without a closing bracket, which meant the subsequent text only applied to screens 767px and less.
You can mark this as resolved. Thank you.
- The topic ‘Formatting .Main-Title.Entry-Title’ is closed to new replies.