Reduce button padding on mobile viewport

[JohnPixle]

Currently the buttons in Neve FSE have a generous padding (16px 40px). However, in Mobile this results in some issues with button not staying inline.

I was wondering, if for mobile viewport we can have the buttons set to 16px padding (all sides).
Please note that this should also apply for the is-style-outline button

Hopefully we will be able to have the buttons inline on mobile.

@HardeepAsrani Let me know your thoughts, and happy to help with clarifications and more info!
Looping-in @mghenciu for awareness.

[HardeepAsrani]

@JohnPixle I don't mind really, it's a purely design decision so I'd leave it to you and how you want to proceed with it. 😄

[JohnPixle]

@HardeepAsrani Thanks! I asked because we need some input/help on how / where these mobile values are defined 🙈

To summarise, for mobile viewport we need the buttons set to 16px padding (all sides).
And this should also apply for the is-style-outline buttons.

We are sure we want to make the change, but not sure where to add the CSS. For example, I see that the style for outline button is defined in the theme files (screenshot).

Can you point us where to add the mobile values?
Thanks in advance!

[HardeepAsrani]

@JohnPixle It's added here:

neve-fse/assets/css/src/common/_generic.scss

Line 76 in f01d862

body .wp-block-button .wp-block-button__link.is-style-outline {

You can use SASS to have a @media selector.

[JohnPixle]

You can use SASS to have a @media selector.

@HardeepAsrani Can you explain this in Greek for me please, or provide an example snippet? 😄

[HardeepAsrani]

@JohnPixle My bad. 😄 Here's an example of how Bogdan is doing this in another file:

neve-fse/assets/css/src/welcome-notice.scss

Lines 1 to 18 in f01d862

	@custom-media --tablet (max-width: 769px);
	@custom-media --desktop (max-width: 1200px);
	.neve-fse-welcome-notice {
	position: relative;
	padding-bottom: 0;
	.notice-content {
	display: flex;
	width: 100%;
	gap: 20px;
	@media (--desktop) {
	flex-direction: column-reverse;
	text-align: center;
	gap: 0;
	}
	}

This should also help: https://sass-lang.com/documentation/at-rules/css/

[mghenciu]

I've made some changes in this PR, @JohnPixle , and used 16px 20px, which should be fine even for smaller Mobile Devices. Let me know if this looks and works as expected.

---

@HardeepAsrani , I've tried using the DRY principle in CSS, not sure if I managed to achieve perfection :)

[JohnPixle]

Thanks @mghenciu looking good!

[mghenciu]

I'll move this to testing, since Bogdan and John reviewed the changes.