[Support request] Possible problems with CSS or not?

[francesco]

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%;
    }
}

[Ying]

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).

[francesco]

hi Ying, what do you mean? Can you recommend me some platform where to look for these professionals?

[Leo]

You can try a service like Codeable suggested at the bottom of the article:
https://generatepress.com/what-support-includes/

[Author]

Posts