Umbruch von Felder auf Smartphone Ansicht und fehlende Zwischenräume

Hallo zusammen,

auf meiner Webseite http://oldtimer-veranstaltung.de/ benutze ich unten im Beitrag mehrere klickbare Felder (blau mit weißer Schrift). Bei der Nutzung auf einem Smartphone rutschen diese Felder (responsive) zusammen. Leider gibt es dann zwischen den Feldern keinen freien Platz zwischen den Feldern, sofern sie untereinander zum Liegen kommen (Hochformat). Das gefällt mir nicht. Doch welche CSS Definitionen sind notwendig, um bei der Ansicht auf einem Smartphone Zwischenräume zu bekommen. Das aktuelle CSS sieht momentan so aus:

background: none repeat scroll 0 0 #ECF0F1;
font-size: 1.00rem;
padding: 20px 20px 20px;
text-align: center;
display: block;
position: relative;

Meine diversen Versuche waren leider ohne zielführendes Ergebnis.

Bereits jetzt vielen Dank an die CSS-Experten für sachdienliche Tipps

 

Hallo helix,

vielen Dank für den Tipp. Ich habe es ausprobiert:

background: none repeat scroll 0 0 #ECF0F1;
font-size: 1.00rem;
padding: 20px 20px 20px;
text-align: center;
display: block;
position: relative;
margin-bottom: 20px;

Leider ist keinerlei Veränderung bei der Anzeige im Hochformat eines Smartphones feststellbar.

 

Hallo zusammen,

so sehen jetzt die css-Definitionen aus:

.social-share-button a{margin-bottom:20px;}

.social-share-button {
background: none repeat scroll 0 0 #ECF0F1;
font-size: 1.00rem;
padding: 20px 0px 0px 0px;
text-align: center;
display: block;
position: relative;
}

Ich darf mich für alle Tipps bei Euch bedanken. Das Problemchen ist gelöst und nun sieht es unten auf der Seite so aus: http://oldtimer-veranstaltung.de/