Specifying button width with built-in CSS classes

[vedranmiletic]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I want to suggest an idea and checked that ...

• ... to my best knowledge, my idea wouldn't break something for other users
• ... the documentation does not mention anything about my idea
• ... there are no open or closed issues that are related to my idea

Description

Buttons section in the documentation describes the usage of .md-button and .md-button--primary CSS classes. It would be nice if there were additional CSS classes documented in the same place that could be used to make buttons 100% wide on small screens. Ideally, there would be CSS classes for specifying other widths (1/2, 1/3, 1/4 etc.) that a user could specify for different screen widths.

Use Cases

E.g. making the buttons equally wide for eye candy.

Screenshots / Mockups

No response

[squidfunk]

Thanks for suggesting! However, this is a prime example of customization via additional CSS. I think it is very important that we don't let the Material for MkDocs documentation turn into a general web development guide, so I'd rather recommend asking pure CSS-directed questions like this on StackOverflow or on our discussions board. After all, this has nothing to do with this project in particular. We need to keep our focus sharp.

Converting to discussion.

[vedranmiletic]

Fine. Does Material for MkDocs provide ready-made classes for this in a way e.g. Tailwind CSS or Bootstrap does?

[squidfunk]

Material for MkDocs is written entirely from scratch without the help of such a framework, so no, there are no such classes. However, you might be able to use helper classes from one of those frameworks, adding it via additional CSS. Learning some CSS might also be an idea if you want to customize the theme. Maybe this is a start (untested):

@media (max-width: 768px) {
  .md-button--stretch {
    width: 100%;
  }
}

Then add:

[Link](#){ .md-button.md-button--stretch }

You have to understand that, in general, I can't help users with customizing their installations, because if I would agree to do that, this project won't move forward because I will be doing nothing else except helping everybody achieve precisely what he/she wants. This only benefits the individual and not the whole project. Thus, I can only point you in the right direction. I hope for your understanding.

[feasgal]

Thanks! I needed to be able to arrange buttons in a grid that looked uniform, and this CSS:

.md-typeset .md-button--stretch { width: 100%; }

in combination with this markdown:

[Log-in Problem](#){ .md-button .md-button--stretch }

did the exact job I needed:

[Sanrax]

How did you get "Different Account Issue" to be inline with "Log-in Problem"? When I tried using this css and markdown, it makes both buttons 100% width, but they are stacked on top of each other.

[feasgal]

They're in a grid.

<div class="grid" markdown>

[Log-in Problem](#){ .md-button .md-button--stretch }

[Different Account Issue](#){ .md-button .md-button--stretch }

[Problem with My Device](#){ .md-button .md-button--stretch }

[Help with an Order](#){ .md-button .md-button--stretch }

[Failed License Move](#){ .md-button .md-button--stretch }

[Different Issue](#){ .md-button .md-button--stretch }

</div>

[Sanrax]

I see, thank you!

[vedranmiletic]

Sure, thanks for your help!