Button borders overlapping

[Remco van Dun]

Hi!

I was wondering if somebody could help me out with the following: Ive got multiple buttons next to each other with a padding and a border. When resizing the window to a smaller size, these border are overlapping at a certain point? Also if a button is composed out of multiple words, I would like to keep them next to each other. Adding extra columns between the buttons doesn't help and will only create more distance when they do eventually move under each other at mobile size.

.button {
padding: 15px 15px;
display: inline-block;
background-color: transparent;
border: 2px solid #FFFFFF;
border-radius: 25px;
line-height: 1;
text-decoration: none;
color: white;
opacity: 1;
}

.button:hover{
background-color: #f0f0f0;
text-decoration: none;
opacity: 1;

best,
Remco

[mariusjopen]

Dear @Remco-van-Dun
PADDING makes the buttons bigger.
And because they are bigger they overlap space in the grid.

Try to make the padding with % or VH instead of PX.
That might bring you closer to a good result.

Do you have a link to your website? Then I can have a closer look.

Thank you!

Marius

[Remco van Dun]

Hi Marius

thanks for the reply but % or VH did not make a difference. You can see it happening when you resize the window at the Social Media row. Is there something to do perhaps with the breakpoint of desktop to mobile?

best,
Remco

[Remco van Dun]

To be seen at https://nonline.nl/flux

[mariusjopen]

Dear @Remco-van-Dun

I would insert the buttons as HTML elements.
Then you give them a width of 70% and a padding of 15%.
Then they fill 100% of the width.

I hope I was clear :-)

Best!

Marius