Support » Theme: Olsen Light » Social sharing icons

  • Resolved fedeisalovati

    (@fedeisalovati)



    Hi!
    I’ve noticed that my social sharing icons at the end of the post are wrong alligned. They’re supposed to be on a horizontal line, but instead they’re on a vertical line. How can I do to fix this?

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 22 total)
  • Fotis

    (@markwaregr)

    Hi there,
    this happened due to a custom css you have, so add this

    .socials li {
        float: left;
    }

    in your custom CSS box under Customize->Additional CSS to fix it.

    fedeisalovati

    (@fedeisalovati)

    That’s marvellous! It perfectly worked!

    Thank you very much! 🙂

    Fotis

    (@markwaregr)

    Glad I could help @fedeisalovati!
    I’d like to ask you, if you like the theme and could take a minute to review it here it would help us a lot!

    fedeisalovati

    (@fedeisalovati)

    I’m sorry for the delay. I’ve reviewed your theme last time I was asking help. But if you need I can do it again!

    Also, can I ask another question? Is it possible to have home posts alternate like in this blog: https://madalinamois.com/?
    Thank you!

    Fotis

    (@markwaregr)

    Hi there,
    Thank you for your feedback! No need to review the theme again.

    You can try this

    @media(min-width:767px){
        .home .col-sm-6:nth-of-type(2n){
        clear:left;
        left:50%;
    }
    }

    in your custom CSS box.
    Let me know if this works, or if I can help out more.

    fedeisalovati

    (@fedeisalovati)

    Hi!
    I’ve tried the code but posts are collapsed on one another on the right side. maybe I did something wrong?
    Thank you!

    Hi there,
    do you need the title (etc) next to each image?

    • This reply was modified 3 months, 4 weeks ago by  Fotis.

    Hi!
    Yes, I need them that way, is it possible?

    Hi there,
    try this instead

    @media(min-width:767px) {
        .home .col-sm-6:nth-of-type(2n){
            clear: left;
            float:none;
            left: 50%;
        }
        .home .col-sm-6{
            float:none;
        }
     
        .home .col-sm-6:nth-of-type(n+1) .entry-title,
        .home .col-sm-6:nth-of-type(n+1) .entry-meta {
    
            left: 400px;
            margin-top: 150px;
            position: absolute;
        }
        
        
        .home .col-sm-6:nth-of-type(n+1) .entry-meta {
            width: 200px;
            top: -40px;
        }
        .home .col-sm-6:nth-of-type(n+1) .entry-categories {
            position: relative;
            top: 20px;
        }
    
        .home .col-sm-6:nth-of-type(2n) .entry-title,
        .home .col-sm-6:nth-of-type(2n) .entry-meta {
    
            left: -400px;
            margin-top: 150px;
            position: absolute;
        }
        .home .col-sm-6:nth-of-type(2n) .entry-meta {
            width: 200px;
            top: -40px;
            left: -350px;
        }
        .home .col-sm-6:nth-of-type(2n) .entry-categories {
            position: relative;
            top: 20px;
        }
    }

    in your custom CSS box

    That’s perfect, thank you! It worked exactly as a wanted! The only thing is that titles on the left are in a unique line and I wanted them to be on two or more lines as the others on the right, so they can fit the margins of the blog. But I don’t know how to do this.

    • This reply was modified 3 months, 3 weeks ago by  fedeisalovati.

    Hi,
    try this

    @media(min-width:767px) {
        .home .col-sm-6:nth-of-type(2n){
            clear: left;
            float:none;
            left: 50%;
        }
        .home .col-sm-6{
            float:none;
        }
     
        .home .col-sm-6:nth-of-type(n+1) .entry-title,
        .home .col-sm-6:nth-of-type(n+1) .entry-meta {
    
            left: 400px;
            margin-top: 150px;
            position: absolute;
        }
        
        
        .home .col-sm-6:nth-of-type(n+1) .entry-meta {
            width: 200px;
            top: -40px;
        }
        .home .col-sm-6:nth-of-type(n+1) .entry-categories {
            position: relative;
            top: 20px;
        }
    
        .home .col-sm-6:nth-of-type(2n) .entry-title,
        .home .col-sm-6:nth-of-type(2n) .entry-meta {
    
            left: -300px;
            margin-top: 150px;
            position: absolute;
            width:200px;
        }
        .home .col-sm-6:nth-of-type(2n) .entry-meta {
             width: 200px;
                top: -40px;
                left: -290px;
        }
        .home .col-sm-6:nth-of-type(2n) .entry-categories {
            position: relative;
            top: 20px;
        }
    }

    instead then.

    Now it’s perfect! Thank you! 🙂

    Just I don’t know why now the content of my posts is aligned to right. I think it’s only in the mobile version and if I can remember I had the same issue last time I’ve asked for help.
    Many thanks for your patience!

    Hi there,
    try this

    @media(max-width:767px){
        .single-post #site-content > .row > .col-md-8{
            width:100%;
            margin:0;
        }
    }

    in your custom CSS box

    Hi!
    It doesn’t work, mobile and tablet version are still aligned on the right. Maybe I did something wrong? I’m sorry

    Hi there,
    no worries, can you try this

    @media(max-width:767px){
        .single-post #site-content > .row > .col-md-8{
            width:100%!important;
            margin:0!important;
        }
    }
    

    in the end of your custom css?

Viewing 15 replies - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.