Archived topic
Possible problems with CSS or not?
3 replies · Started by francesco on December 9, 2022
I was checking the various CSS added thanks to your help but I can't understand very well what the validator tells me. I am repeating what I was told.
My code:
.masonry-load-more {
text-align: center;
}
@media (min-width: 769px) {
.inside-navigation.grid-container {
width: fit-content;
}
form.search-form.navigation-search.nav-search-active {
top: 45px;
width: 80%;
left: 60%;
transform: translateX(-50%);
}
.navigation-search.nav-search-active {
display: flex;
}
.inside-navigation.grid-container form.search-form .search-field {
background-color: #fff;
}
.inside-navigation.grid-container form.search-form {
background-color: #edfffb;
padding: 10px;
display: flex;
align-items: center;
}
}
@media (max-width: 768px) {
form.search-form.navigation-search.nav-search-active {
display: flex;
}
button.nav-search-button {
border: none;
}
}
@media (max-width: 768px) {
.menu-bar-items {
z-index: 2;
position: relative;
}
form.search-form.navigation-search.nav-search-active {
max-width: calc(100% - 46px);
}
}
.navigation-search {
z-index: 9999;
}
.navigation-search input[type="search"],
.navigation-search input[type="search"]:active,
.navigation-search input[type="search"]:focus {
background-color: #f0f0f0;
}
.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a {
color: var(--accent) !important;
background-color: #8ad6c1 !important;
}
/* After Post Social Share Design by technicaltricks.info*/
.technicaltricks-social-wrapper {
margin: 30px 0;
font-size: 0;
}
.technicaltricks-social-wrapper span {
font-weight: bold;
padding-right: 10px;
font-size: 16px;
}
.technicaltricks-social-sharing {
font-size: 17px;
padding: 7px 20px;
}
@media only screen and (max-width: 600px) {
.technicaltricks-social-sharing {
font-size: 17px;
padding: 6px 17px;
display: inline-block;
}
.technicaltricks-social-wrapper {
margin: 30px 0px;
font-size: 0;
}
}
.technicaltricks-social-sharing svg {
position: relative;
top: 0.15em;
display: inline-block;
}
.technicaltricks-social-sharing:first-of-type {
border-radius: 100px 0 0 100px;
}
.technicaltricks-social-sharing:last-of-type {
border-radius: 0 100px 100px 0;
}
.technicaltricks-social-facebook {
fill: #fff;
background-color: rgba(59, 89, 152, 1);
}
.technicaltricks-social-facebook:hover {
background-color: rgba(59, 89, 152, .8);
}
.technicaltricks-social-twitter {
fill: #fff;
background-color: rgba(29, 161, 242, 1);
}
.technicaltricks-social-twitter:hover {
background-color: rgba(29, 161, 242, .8);
}
.technicaltricks-social-pinterest {
fill: #fff;
background-color: rgba(189, 8, 28, 1);
}
.technicaltricks-social-pinterest:hover {
background-color: rgba(189, 8, 28, .8);
}
.technicaltricks-social-linkedin {
fill: #fff;
background-color: rgba(0, 119, 181, 1);
}
.technicaltricks-social-linkedin:hover {
background-color: rgba(0, 119, 181, .8);
}
.technicaltricks-social-whatsapp {
fill: #fff;
background-color: rgba(37, 211, 102, 1);
}
.technicaltricks-social-whatsapp:hover {
background-color: rgba(37, 211, 102, .8);
}
.technicaltricks-social-reddit {
fill: #fff;
background-color: rgba(255, 87, 0, 1);
}
.technicaltricks-social-reddit:hover {
background-color: rgba(255, 87, 0, .8);
}
.wp-block-latest-posts.wp-block-latest-posts__list li {
padding-bottom: 15px;
border-bottom: 1px solid rgb(38, 42, 130);
}
.generate-back-to-top,
.generate-back-to-top:visited {
bottom: 70px; /* 50px from the bottom of your screen */
}
@media(min-width: 769px) and (pointer: fine) {
.paging-navigation p a:hover,
.wp-block-latest-posts.wp-block-latest-posts__list li a:hover,
.generate-columns-container article.post:hover h2 {
text-decoration: underline;
}
}
.border-hover:not(:hover) h2 {
border-color: transparent !important;
}
@media(max-width: 1024px) {
#right-sidebar {
display: none;
}
#content.site-content .content-area {
width: 100%;
}
}
Hi there,
This question is not related to the theme and it will be very time-consuming.
I'm sorry but unfortunately, we can not help with this.
I would recommend hiring a developer to make the fix (it's not actually a fix as the CSS is nothing wrong).
hi Ying, what do you mean? Can you recommend me some platform where to look for these professionals?
You can try a service like Codeable suggested at the bottom of the article:
https://generatepress.com/what-support-includes/
