thefakedaniel Posted April 14, 2022 Share Posted April 14, 2022 (edited) Site URL: https://bonjrmusic.com/faq Hi, How do I center the button element ("license" & "stream" buttons) here using css? Also, how can I ensure that each slide's box (the outer transparent box that contains title, description, button) is always centered? i.e. the left image the box is almost centered and the right image the box is more to the top For context, I believe this is a slideshow section I would also like to vertically center the slideshow navigation buttons that were previously placed at the bottom in the images above & space them apart so that they're attached to the edge of the screen. In the desktop version it's the offset parameter so I was already able to achieve this, however I have not been able to find the equivalent setting for mobile. Attaching a screenshot below of what I have been able to achieve so far, which is not much considering the buttons are not centered with the background and the spacing is not correct. And if possible, I'd like to also change the navigation button radius. I was successful in doing this on the desktop version of the page. Thanks in advance! Daniel Edited April 15, 2022 by thefakedaniel Link to comment
tuanphan Posted April 18, 2022 Share Posted April 18, 2022 Center on mobile only? Add to Design > Custom CSS @media screen and (max-width:767px) { .user-items-list-banner-slideshow[data-button-alignment="left"] .list-item-content__button-container { text-align: center; } } If you want center on all devices, edit 767px to 9999px Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
thefakedaniel Posted April 19, 2022 Author Share Posted April 19, 2022 On 4/18/2022 at 1:17 PM, tuanphan said: Center on mobile only? Add to Design > Custom CSS @media screen and (max-width:767px) { .user-items-list-banner-slideshow[data-button-alignment="left"] .list-item-content__button-container { text-align: center; } } If you want center on all devices, edit 767px to 9999px Hi, thanks for replying. This doesn't seem to have worked, and also I am referring to the whole box, not just the text. I have already been able to center the text myself ;o Link to comment
tuanphan Posted April 22, 2022 Share Posted April 22, 2022 On 4/19/2022 at 10:04 PM, thefakedaniel said: Hi, thanks for replying. This doesn't seem to have worked, and also I am referring to the whole box, not just the text. I have already been able to center the text myself ;o Try it again. Recently SS has a bug so CSS won't work on editing mode. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
thefakedaniel Posted April 30, 2022 Author Share Posted April 30, 2022 On 4/22/2022 at 3:29 PM, tuanphan said: Try it again. Recently SS has a bug so CSS won't work on editing mode. Ah, perfect it worked! And how about the actual boxes, how could I center those? Example: Link to comment
Solution tuanphan Posted May 1, 2022 Solution Share Posted May 1, 2022 Try this CSS @media screen and (max-width:767px) { .user-items-list-banner-slideshow[data-card-horizontal-position="left"] .slide { justify-content: center !important; align-items: center !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
thefakedaniel Posted May 3, 2022 Author Share Posted May 3, 2022 On 5/1/2022 at 10:00 AM, tuanphan said: Try this CSS @media screen and (max-width:767px) { .user-items-list-banner-slideshow[data-card-horizontal-position="left"] .slide { justify-content: center !important; align-items: center !important; } } Yep, this is it, thank you! 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