Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • December 15, 2015 at 11:43 am #552912
    mxshi

    Hi,
    I’m wondering how to get rid of the big padding around inserted images like this:
    1

    I’d also like to know how to get buttons to be next to each other and also the same sizes. Like these:
    2

    Thank you!

    • This topic was modified 8 years, 11 months ago by Ismael.
    December 15, 2015 at 4:18 pm #553120
    Yigit

    Hi mxshi!

    Please turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and give your special heading, right and left button elements a different css classes and then add following code to Quick CSS in Enfold theme options under General Styling tab

    .your-custom-class .av-special-heading {
    margin-top: 0;
}
.your-custom-class-right .avia-button-wrap.avia-button-right {
    position: relative;
    right: 20%;
}
.your-custom-class-left .avia-button-wrap.avia-button-left {
    position: relative;
    left: 20%;
}

    Regards,
    Yigit

    December 16, 2015 at 5:12 am #553448
    mxshi

    Hi,
    I added the custom classes as you said, but it seems like nothing has happened after I applied the code?

    December 16, 2015 at 6:24 am #553459
    Basilis

    Hi!

    I loaded your web site and although the # is not there, the space is not there.
    I suppose you got it short out?

    Let us know please!

    Cheers!
    Basilis

    December 16, 2015 at 6:54 am #553469
    mxshi

    Hi,
    Yes, I did a little bit myself and the spacing seems to be sorted out now. However, the issue with the buttons is still there… I can’t get them to be the same size. Also, when you resize the window, the buttons move around. Is there a way to have them not move separately from each other?

    Thanks!

    December 16, 2015 at 6:00 pm #553901
    Yigit

    Hey!

    Seems like you have used following code instead

    .home .avia-builder-el-4 {
    margin-top: 30px;
}

    to decrease the space between image and text.

    Can you please try adding three 1/3 column element to your page and leave the ones on the side empty and place your buttons into the one in the middle. You would not need to use custom CSS code this way.

    Cheers!
    Yigit

    December 17, 2015 at 5:08 am #554175
    mxshi

    Ah, I didn’t think about that. I tried it just now but for smaller screens the buttons will end up looking like this:
    buttons

    December 17, 2015 at 9:53 am #554286
    Rikard

    Hi,

    Try the following as well:

    @media only screen and (max-width: 767px) {
.home .avia-builder-el-6 {
    margin-right: 0% !important;
}
}

    Best regards,
    Rikard

    December 17, 2015 at 10:27 am #554299
    mxshi

    Hi, I tried it just now and seems to have no effect.
    I’ve gone back to having the buttons in a 3/5 section since the site is live… My question is whether there’s a way to keep the buttons from moving around independently of each other when the window size changes? Since the buttons will be on 2 lines on any window smaller than ~1200px.

    December 18, 2015 at 5:18 am #554819
    Rikard

    Hi,

    Please send us a temporary admin login so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Regards,
    Rikard

    December 18, 2015 at 5:37 am #554826
    mxshi

    Hi, the login is below. Thanks!

    December 23, 2015 at 4:07 pm #557012
    Andy

    Hi!

    You are using an old version of the theme, so please upgrade to Enfold 3.4.7 and let us know if you still need help afterwards.
    Also upgrade to newest WordPress version.

    Cheers!
    Andy

    December 24, 2015 at 9:57 am #557388
    mxshi

    Hi,
    I’ve updated everything. Still don’t know how to get these two buttons to be the same width, with a constant margin of 20px between them?
    buttons

    Thanks

    December 27, 2015 at 2:01 am #557514
    Elliott

    Hey!

    Use two 1/2 columns and add the buttons inside each column and set them to align left and right. Let us know when your done and we’ll give you some CSS so they are centered when they stack on top of each other on smaller screens.

    Regards,
    Elliott

    December 29, 2015 at 4:51 am #557982
    mxshi

    Hi,
    Would it be possible to give me the CSS before I update the page? Since the site is live, I’m unable to leave the buttons looking wonky for a long period of time. The temporary admin login is still active if you guys need it again. Thank you!

    January 3, 2016 at 2:12 am #558890
    Elliott

    Hi!

    Actually if your wanting them to go full width inside the columns then I think this CSS would work also. Add it inside a color section.

    <style type = "text/css">
.avia-button-wrap a, .avia-button-wrap {
    width: 100% !important;
}
</style>

    That will make them 100% width inside each column and the columns will still stack nicely on smaller screens.

    Regards,
    Elliott

    January 4, 2016 at 8:48 am #559054
    mxshi

    Ah, yes that’s a little closer, but I was actually thinking of having the buttons side-by-side, like on this website: https://floid.io
    buttons

    Thanks!

    January 4, 2016 at 9:35 pm #559497
    Andy

    Hey!

    hm can you provide us a (hidden) test link, so we can inspect the elements in question please?

    Regards,
    Andy

    January 8, 2016 at 5:09 am #561818
    mxshi

    Here you go, thank you!

    January 9, 2016 at 11:29 pm #562532
    Vinay

    Hey!
    WE have aligned the buttons as per your request.

    Regards,
    Vinay

    January 11, 2016 at 6:37 am #562921
    mxshi

    Thanks! The buttons’ movement is exactly what I wanted. But it looks like it’s off-center a little when I resize to a smaller window?

    img

    January 12, 2016 at 10:06 am #563781
    Ismael

    Hi!

    We placed the button elements inside a column shortcode and place it inside a text block. We also added a few css modifications in the Quick CSS field. Remove browser cache then reload the page: http://hashtag.be/intro-page-test/

    Best regards,
    Ismael

    January 13, 2016 at 6:00 am #564342
    mxshi

    That fixed it! Thanks for all your help!

    January 14, 2016 at 8:23 am #565239
    Ismael

    Hey!

    Glad we could help! Let us know if you need anything else. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 24 posts - 1 through 24 (of 24 total)
  • The topic ‘Large spaces around image elements & button spacing’ is closed to new replies.