Social sharing icons

  • Resolved fedeisalovati

    (@fedeisalovati)


    6 years, 2 months ago

    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)

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

    Thread Starter fedeisalovati

    (@fedeisalovati)

    That’s marvellous! It perfectly worked!

    Thank you very much! ??

    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!

    Thread Starter 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.

    Thread Starter 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!

    Fotis

    (@markwaregr)

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

    • This reply was modified 6 years, 1 month ago by Fotis.
    Thread Starter fedeisalovati

    (@fedeisalovati)

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

    Fotis

    (@markwaregr)

    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

    Thread Starter fedeisalovati

    (@fedeisalovati)

    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.

    Fotis

    (@markwaregr)

    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.

    Thread Starter fedeisalovati

    (@fedeisalovati)

    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!

    Fotis

    (@markwaregr)

    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

    Thread Starter fedeisalovati

    (@fedeisalovati)

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

    Fotis

    (@markwaregr)

    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)
  • The topic ‘Social sharing icons’ is closed to new replies.

Tags