Tagged: button, columns, margin-bottom
-
AuthorPosts
-
October 11, 2023 at 1:25 pm #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
October 12, 2023 at 5:12 am #1422181Hey 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,
IsmaelOctober 12, 2023 at 11:57 am #1422217Hi Ismael,
the screenshot is in the drop box – link in private content
Best regards, Sabine
October 12, 2023 at 4:24 pm #1422249Hi,
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,
RikardOctober 13, 2023 at 10:56 am #1422376Hi,
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
October 13, 2023 at 1:03 pm #1422389Hi,
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,
RikardOctober 13, 2023 at 1:11 pm #1422393Hi 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
October 14, 2023 at 11:21 am #1422451Hi,
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,
RikardOctober 16, 2023 at 12:56 pm #1422651Hi Rikard,
I’m sorry, but the code doesn’t work again or I do not understand what is meant by it.
Best regards, Sabine
- This reply was modified 1 year, 1 month ago by TakiwaSoulArt.
October 16, 2023 at 4:36 pm #1422672Hi,
What screen sizes are you looking to target with what code?
Best regards,
RikardOctober 17, 2023 at 1:17 pm #1422794Hi 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,
SabinePS. 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)
October 17, 2023 at 2:26 pm #1422806Hi,
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,
RikardOctober 18, 2023 at 5:20 pm #1422929Hi 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
October 19, 2023 at 5:50 am #1422965Hi,
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,
IsmaelOctober 20, 2023 at 1:33 pm #1423121Hi 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
October 22, 2023 at 1:10 pm #1423313Hi,
Thanks for that. I’ve adjusted the CSS for you a bit, could you check if it’s to your liking now?
Best regards,
RikardOctober 23, 2023 at 12:34 pm #1423397Hi Rikard,
thank for your help. It works great. You can close the topic.
Best regards, Sabine
October 23, 2023 at 3:23 pm #1423419Hi Sabine,
I’m glad that Rikard could help you :)
Thanks for using Enfold and have a great day!Best regards,
Nikko -
AuthorPosts
- The topic ‘Optimize Button bottom margin in columns’ is closed to new replies.