[Resolved] widget area underline

Home Forums Support [Resolved] widget area underline

Home Forums Support widget area underline

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2361380
    francesco

    is there a similar code to reproduce this effect? ​​..

    .rpwwt-widget ul li {
        padding-bottom: 15px;
        border-bottom: 1px solid rgb(240, 240, 240);
    }

    this code works if you use with
    “Recent Posts Widget With Thumbnails” but I would like to make it work with the classic widget using the latest articles.

    https://slys.it/ertyefgbsd/

    #2361879
    Ying
    Staff
    Customer Support

    Hi there,

    You can try this:

    .wp-block-latest-posts.wp-block-latest-posts__list li {
        padding-bottom: 15px;
        border-bottom: 1px solid rgb(240, 240, 240);
    }
    #2362336
    francesco

    Hi.. Works great. However on mobile devices it is not displayed.

    #2362354
    Fernando
    Customer Support

    There seems to be a syntax error in your Additional CSS. For instance, you failed to close this media query with a closing bracket – }https://share.getcloudapp.com/E0uZgo4B

    #2362437
    francesco
    @media (min-width: 1025px) {
        form.search-form.navigation-search.nav-search-active {
            width: 31%;
            transform: translateX(-50%);
            left: 40%;
        }
    }
    
    @media (min-width: 769px) and (max-width: 1024px) {
            form.search-form.navigation-search.nav-search-active {
            width: 35%;
            transform: translateX(-50%);
            left: 41%;
        }
    }
    .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: 70%;
    	  left: 65%;
    }
    
    .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: #8ad6c1;
        padding: 10px;
        display: flex;
        align-items: center;
        }
    }
    @media(min-width: 769px) and (pointer: fine) {
    
        .paging-navigation p a:hover,
        .generate-columns-container article.post:hover h2 {
            text-decoration: underline;
        }
    
    }

    correct?

    #2363071
    Ying
    Staff
    Customer Support

    Now it’s displaying on mobile.

    #2368431
    francesco

    Sorry but I think I have made some trouble with the CSS. in fact the underline in the widget area is no longer visible. I report all the code and I ask you if you can kindly tell me what to correct. thank you

    @media (min-width: 1025px) {
        form.search-form.navigation-search.nav-search-active {
            width: 31%;
            transform: translateX(-50%);
            left: 40%;
        }
    }
    
    @media (min-width: 769px) and (max-width: 1024px) {
            form.search-form.navigation-search.nav-search-active {
            width: 35%;
            transform: translateX(-50%);
            left: 41%;
        }
    }
    .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: 70%;
    	  left: 65%;
    }
    
    .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: #8ad6c1;
        padding: 10px;
        display: flex;
        align-items: center;
        }
    	
    }
    
    @media(min-width: 769px) and (pointer: fine) {
    
        .paging-navigation p a:hover,
        .generate-columns-container article.post:hover h2 {
            text-decoration: underline;
        }
    
    }
    
    /* 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);
    }
    
    .main-nav > ul li ul.sub-menu li.menu-item:hover > a {
        background-color: #8ad6c1;
        color: #262a82;
    }
    
    .generate-back-to-top,
    .generate-back-to-top:visited {
        bottom: 70px; /* 50px from the bottom of your screen */
    }

    https://slys.it/

    #2369125
    Ying
    Staff
    Customer Support

    I can’t tell if the code needs to be in or out of certain media queries, but the CSS regarding sidebar recent posts area looks correct, and the widget underlines are showing on mobile:
    https://www.screencast.com/t/5cAgR2cj

    If there’s anything wrong, please specify the issue and on what devices.

    Let me know!

    #2369723
    francesco

    ok, thnx ying

    #2370132
    Ying
    Staff
    Customer Support

    No problem πŸ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.