SmartGirl Posted January 4, 2022 Share Posted January 4, 2022 Site URL: https://www.madisonavemedia.com/link-in-bio Hello there! Hoping someone can provide the aha information I'm missing. Working on a cover page that's being used as a Link in Bio page. Previous coder on the project added code with script to allow for an extra button to be added, which is operating fine, but it is stacking the buttons side-by-side horizontally instead of vertically. Can anyone tell me how to modify the code to make that happen? Thanks in advance! Current code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <li id="button2"> <a href="https://www.madisonavemedia.com"> Website </a> </li> $( "#button2" ).appendTo( $( "ul" ) ); $( "#button3" ).appendTo( $( "#button2" ) ); <script> $( document ).ready(function() { $( "#button1" ).appendTo( $( "ul" ) ); $( "#button2" ).appendTo( $( "ul" ) ); $( "#button3" ).appendTo( $( "#button2" ) ); }); </script> <style> .sqs-slide-wrapper[data-slide-type="cover-page"] .responsive-wrapper.stacked [data-slice-type="buttons"] ul li a, .sqs-slide-wrapper[data-slide-type="cover-page"] .responsive-wrapper.stacked [data-slice-type="navigation"] ul li a { margin-bottom:15px; } </style> Link to comment
tuanphan Posted January 4, 2022 Share Posted January 4, 2022 Don't remove/edit any code Add this to Cover Page Header <style> .sqs-slide-wrapper[data-slide-type="cover-page"] .responsive-wrapper .sqs-slice ul { display: flex; flex-direction: column; } .sqs-slide-wrapper[data-slide-type="cover-page"] .responsive-wrapper .sqs-slice ul li { margin-bottom: 20px; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
SmartGirl Posted January 5, 2022 Author Share Posted January 5, 2022 Thank you so much! It centered it, but now one is a little off on the left side. Is there a way to make sure they're all center aligned evenly? Link to comment
tuanphan Posted January 5, 2022 Share Posted January 5, 2022 3 hours ago, SmartGirl said: Thank you so much! It centered it, but now one is a little off on the left side. Is there a way to make sure they're all center aligned evenly? Use this CSS <style> .sqs-slide-wrapper[data-slide-type="cover-page"] .responsive-wrapper .sqs-slice ul li { margin-left: 0 !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
SmartGirl Posted January 6, 2022 Author Share Posted January 6, 2022 @tuanphanthat worked. You are wonderful, thank you! tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment