Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • December 23, 2016 at 1:24 pm #727916
    pipinvest01

    Hi ,

    In our extra header (widget) we have “chat”and “contact us” , we have made them as buttons. They have medium size, while the other buttons are small sized buttons…

    What CSS can we use to align the chat/contact us to the richt in the widget area ?

    Thanks in advance
    mike

    December 23, 2016 at 1:36 pm #727922
    Yigit

    Hi!

    You have following code in your custom CSS 

    #header .textwidget .flex_column {
    float: right;
    right: 16.6%;
}

    Please decrease right value

    Best regards,
    Yigit

    December 23, 2016 at 1:37 pm #727923
    pipinvest01

    yes, but I assume then all buttons will align to the left and I only want the two buttons Chat en Contact us to align left

    December 23, 2016 at 3:09 pm #727966
    Yigit

    Hi!

    I changed custom CSS code to following one 

    #header .textwidget .flex_column {
width: 100%; 
padding-left: 30px;
}
.custom-align {
    float: left;
}

    and wrapped Chat and Contact buttons inside a div with custom class. Please review your website now

    Best regards,
    Yigit

    December 23, 2016 at 3:46 pm #727978
    pipinvest01

    Hi

    Getting there … But they are aligned far right and left …

    Can they be adjusted to the image below :

    View post on imgur.com

    December 26, 2016 at 8:33 pm #728245
    Basilis

    Hi,

    I see that the div has some inline CSS, can u please edit the padding there?
    That will fix the issue, if you position it properly.

    Best regards,
    Basilis

    January 2, 2017 at 8:44 am #728441
    pipinvest01

    Hi,

    If I change this padding value, nothing changes :(

    #header .textwidget .flex_column {
    width: 83.3%;
    padding-left: 330px;
    }
    .custom-align {
    float: left;
    }

    January 2, 2017 at 10:49 am #728451
    Nikko

    Hi,

    I have changed this code in Quick CSS:

    #header .textwidget .flex_column {
width: 83.3%; 
padding-left: 330px;
}

    to:

    #header .textwidget .flex_column {
    width: 100%; 
    padding-left: 30px;
}

    It should look better now. Let us know if you need anything else related to this topic. :)

    Best regards,
    Nikko

    January 2, 2017 at 10:57 am #728454
    pipinvest01

    I have changed the width percentage, so it is aligned to the right. But changing the padding to the left does not do anything…

    The chat/contact buttons should be outlined as in picture : http://imgur.com/a/uBgCJ

    thanks in advance

    January 2, 2017 at 12:13 pm #728471
    Nikko

    Hi,

    The padding-left is being overridden with some style, instead of writing the code like this:

    padding-left: 330px;

    Try adding !important, so it wouldn’t be overriden by some style and it should look like this:

    padding-left: 330px !important;

    You might need to adjust the left padding to make it look better, hope this helps :)

    Best regards,
    Nikko

    January 2, 2017 at 12:17 pm #728473
    pipinvest01

    Worked great !

    thanks a lot…

    Have a greeat new year !

    January 2, 2017 at 12:34 pm #728479
    Yigit

    Hi,

    You are welcome! Let us know if you have any other questions or issues :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘align buttons to the left’ is closed to new replies.