-
AuthorPosts
-
September 10, 2020 at 10:18 pm #1245023
Dear team,
I already searched your forum and found several answers to my problem, but I cannot seem to get them to work.
I have three columns with seemingly the same amount of text, but if the website is viewed on a smaller screen, the lines of each column break differently, which is why the buttons at the bottom of each column are not aligned at the same height anymore.
I already tried this css https://kriesi.at/support/topic/buttons-alignment-in-columns-to-the-bottom/, but I cannot seem to get it to work. Can you maybe help me find the problem? That would be great, thank you!
September 12, 2020 at 6:31 am #1245275Hey mausheld,
Are you referring to the red buttons below the 3 different coloured icons a bit down on the page? If so then please assign classes to the layout elements in the theme options, so that we can target them with custom CSS.
Best regards,
RikardSeptember 15, 2020 at 2:45 am #1245902Hey Rikard,
Correct, these are the buttons I was referring to. See the assigned classes in private content.Thank you for your help!
September 15, 2020 at 7:02 am #1245940Hi,
Do you want them to still be 3 columns or should they be full-width stacked on mobile?
Best regards,
Jordan ShannonSeptember 15, 2020 at 12:16 pm #1246013Hey Jordan,
full-width stacked on mobile sounds great!Thank you!
September 16, 2020 at 7:56 am #1246201Hi,
Thanks for the update. I still can’t see any classes assigned to the elements though, could you please try adding them again? We can give you general CSS to use, but then it would affect your other 1/3 elements as well. We can give you CSS specific to that page only, if you prefer that.
Best regards,
RikardSeptember 18, 2020 at 1:42 pm #1246818Hey,
Thank you, weird. I put the custom class into the CSS line of each column, see screenshot. Is that correct?
Otherwise I’d be happy to take a page specific CSS! (page id can also be seen in screenshot :)
Thank you very much for your help and all the best
Lisa
September 20, 2020 at 5:24 am #1247058Hi,
Thanks for that, but the classes you referred to are still not there on the front end. It looks like you have added a comma after the class in your screenshot, if that is the case then please remove that. If you need further help then please include admin WordPress login details in private, so that we can access the backend of your site.
Best regards,
RikardSeptember 21, 2020 at 6:16 pm #1247428Thank you very much for your patience. The comma is added every time I save and exit the element. And if I don’t remove the custom class name from the developer tab, the custom class name even duplicates itself.
Please find the login details attached.
Thank you very much!
September 22, 2020 at 8:39 am #1247537Hi,
Thanks for that, the login details are not working though. Please check and verify.
Best regards,
RikardSeptember 22, 2020 at 6:17 pm #1247681Sorry for this!
September 23, 2020 at 1:48 pm #1247860Hi,
Thanks for that. I’ve added the classes for you, please try adding this to Quick CSS:
@media only screen and (max-width: 767px) { .hscolumn { width: 100%; margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 1300px) { .hscolumn .av_textblock_section { height: 120px; min-height: 120px; } }
Best regards,
RikardSeptember 23, 2020 at 3:49 pm #1247907Hey, thank you, unfortunately that did not help, the buttons still change position if I resize the screen. See for example a screenshot attached.
September 24, 2020 at 6:48 am #1248045Hi,
I added the code for you and it’s applying now, please review your site.
Best regards,
RikardSeptember 24, 2020 at 2:11 pm #1248156Thank you so very much! I really appreciate your great support!
September 24, 2020 at 3:18 pm #1248184Hi,
I’m glad this was resolved. If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon -
AuthorPosts
- The topic ‘Align buttons’ is closed to new replies.