Site logo

Archived topic

Possible problems with CSS or not?

3 replies · Started by francesco on December 9, 2022

Viewing posts 1–4 of 4

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?

This archived topic is closed to new replies.