Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #552912

    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, 2 months ago by Ismael.
    #553120

    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

    #553448

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

    #553459

    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

    #553469

    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!

    #553901

    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

    #554175

    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

    #554286

    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

    #554299

    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.

    #554819

    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

    #554826

    Hi, the login is below. Thanks!

    #557012

    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

    #557388

    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

    #557514

    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

    #557982

    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!

    #558890

    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

    #559054

    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!

    #559497

    Hey!

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

    Regards,
    Andy

    #561818

    Here you go, thank you!

    #562532

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

    Regards,
    Vinay

    #562921

    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

    #563781

    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

    #564342

    That fixed it! Thanks for all your help!

    #565239

    Hey!

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

    Best regards,
    Ismael

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