Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #1422129

    Hi,

    I would like some help with the alignment of the buttons.

    I have created two columns that contain different amounts of text and underneath comes a button. At the moment I have inserted a free space so that the buttons have the same distance to the bottom. However, on a tablet or I-Phone it all shifts again.

    What code do I need to always have the same distance between the button and the bottom edge, no matter how much text is above it?

    Thanks a lot for the help and best regards

    Sabine

    #1422181

    Hey Sabine,

    Thank you for the inquiry.

    Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot. Here are the steps to follow:

    1.) Visit the website of your chosen platform, such as Savvyify, Imgur or Dropbox.
    2.) Locate the option to upload a file or an image.
    3.) Select the screenshot file from your computer or device and upload it to the platform.
    4.) After the upload is complete, you will be provided with a shareable link or an embed code.
    5.) Copy the link or code and include it in your message or response to provide us with the screenshot.

    Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.

    Best regards,
    Ismael

    #1422217

    Hi Ismael,

    the screenshot is in the drop box – link in private content

    Best regards, Sabine

    #1422249

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (min-width: 768px) and (max-width: 990px) {
    #buttonbottom {
        position: absolute;
        bottom: 28px;
        left: 22%;
    }
    }

    Best regards,
    Rikard

    #1422376

    Hi,

    I need a code for a normal screen and for other screen-widths, not only from 768px to 990px.

    Thank you and best regards

    Sabine

    #1422389

    Hi,

    You can add any screen size you wish within the media query, simply change the numbers so that they correspond with the screen size you are looking to target. The media query doesn’t accept input like normal screen though.

    Best regards,
    Rikard

    #1422393

    Hi Rikard,

    the buttons are now not centered and the left button goes into the text above.
    It is not really this what I mean.

    Thank you for a new code

    Best regards, Sabine

    #1422451

    Hi,

    That is because you are have a very large media query now:

    @media only screen and (min-width: 768px) and (max-width: 1990px) {
    #buttonbottom {
        position: absolute;
        bottom: 28px;
        left: 20%;
    }
    }

    If you add the code I gave you again and leave it, then you can add new media queries after that:

    @media only screen and (min-width: 990px) {
    This will target screens above 990 pixels
    }

    Best regards,
    Rikard

    #1422651

    Hi Rikard,

    I’m sorry, but the code doesn’t work again or I do not understand what is meant by it.

    Best regards, Sabine

    #1422672

    Hi,

    What screen sizes are you looking to target with what code?

    Best regards,
    Rikard

    #1422794

    Hi Rikard,

    the code should work on all screen widths, from normal large screen, to laptop, tablet and I-Phone. The buttons should always be for example 10-15% from the bottom without covering the text above. Maybe there is another solution.

    Many greetings,
    Sabine

    PS. I am not very good at understanding all the HTML and CSS programming. Some easy things I get right, others I don’t – I’m a self-taught programmer. But I learn again and again

    Translated with http://www.DeepL.com/Translator (free version)

    #1422806

    Hi,

    Thanks for the update, but we can’t give you specific code unless you give us specific screen width to target. If you want the code to apply to all screen widths, then please use this instead:

    #buttonbottom {
        position: absolute;
        bottom: 28px;
        left: 20%;
    }

    Best regards,
    Rikard

    #1422929

    Hi Rikard,

    I’m sorry, but this didn’t work again. I have no ideas what I can do to have the buttons at the same height.

    Best regards, Sabine

    #1422965

    Hi,

    Thank you for the update.

    The suggested css code is not being applied to the page. Please try to toggle or temporarily disable the Enfold > Performance > File Compression settings and purge the cache in order to ensure that the changes take effect, or post the login details in the private field so that we can check the issue further.

    Best regards,
    Ismael

    #1423121

    Hi Ismael,

    I disabled the Enfold > Performance > File Compression settings and purged the cache. But the buttons are always not centered and one reached into the text. I give you login details in the private content.

    Thank you and best regards, Sabine

    #1423313

    Hi,

    Thanks for that. I’ve adjusted the CSS for you a bit, could you check if it’s to your liking now?

    Best regards,
    Rikard

    #1423397

    Hi Rikard,

    thank for your help. It works great. You can close the topic.

    Best regards, Sabine

    #1423419

    Hi Sabine,

    I’m glad that Rikard could help you :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Optimize Button bottom margin in columns’ is closed to new replies.