Bildanzeige | Banner div & Styling

Question

Ich habe ein sehr einfaches Client-Banner erstellt: 1 Zeile mit 6 Bildern und einem orangefarbenen Hintergrund. Ich bin nicht sicher, was meine besten Optionen sind, um die scheinbar doppelte Menge an Polsterung zu entfernen, die automatisch zwischen jedem Bild erstellt wird. Hier können Sie das aktuelle Banner anzeigen: http://dalaigroup.com/maryland-seo/

Was ich versuche zu beachten, ist, wie die Bilder für ein mobiles Gerät umverteilen. Der überschüssige Padding- und Margin-Bereich ist hier deutlich auffälliger. Das Erstellen eines Null- oder Negativ-Randbereichs funktioniert nicht zu meinen Gunsten, da die Bilder für Mobilgeräte neu formatiert werden.

Ich bin mir nicht sicher, ob ich Behälter um alle 2 Bilder erstellen sollte, in einer reaktionsfähigen Tabelle arbeiten oder separaten Code für eine mobile Version schreiben sollte. Ist es notwendig, separaten Code für ein Client-Banner wie folgt zu schreiben? Wie kann ich das schreiben, damit ich mehr Kontrolle über den Rand und die Polsterung habe? Wenn ich versuche, bestimmte Größen für diese Elemente festzulegen, werden die Logogrößen leicht kompromittiert.

Alle Tipps, die Sie haben, werden Ihnen wirklich helfen. Vielen Dank für Ihre Zeit.

Answer 1

Über jedem Ihrer divs, das das Bild enthält, ist ein leeres <p> Tag. Dies verursacht den zusätzlichen Speicherplatz auf jedem Ihrer Bilder. Entfernen Sie diese, wie in meiner Bearbeitung unten gesehen, sollte den Abstand ausgleichen.

Einige weiteren Empfehlungen zu den Bildern:

• genaue Breite auf den Bildern in Bootstrap Vorsicht Einstellung, könnte es Abstand zu Problemen führen, wenn sie auf einem kleineren Bildschirm angezeigt.
• Bootstrap hat diese beiden Klassen, die Sie zu dem Bild hinzufügen könnte, die sie zentriert halten und ihre Größe proportional skaliert je nach Größe Benutzerbildschirm: <img class="img-responsive center-block" src="foo" />
• Auf dem Snippet unten, vertikale Rand fehlt, weil es nicht ist Wordpress CSS ziehen aus Ihrem Stylesheet

Edit: die Klasse mit Randdefinitionen aus der URL hinzugefügt Sie

bereitgestellt

.aligncenter { 
 
    margin-top: 25px; 
 
    margin-bottom: 25px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row" style="background: #fe8101;"> 
 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16855" title="McCormick" src="http://dalaigroup.com/wp-content/uploads/2017/05/McCormick-Logo-Small-Square.png" alt="McCormick-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/05/McCormick-Logo-Small-Square.png 250w, http://dalaigroup.com/wp-content/uploads/2017/05/McCormick-Logo-Small-Square-150x150.png 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 

 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16272" title="Adidas" src="http://dalaigroup.com/wp-content/uploads/2017/04/Adidas-Logo-Small-Square.jpg" alt="Adidas-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Adidas-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Adidas-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 

 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16271" title="Abercrombie &amp; Fitch" src="http://dalaigroup.com/wp-content/uploads/2017/04/Abercrombie-and-Fitch-Logo-Small-Square.jpg" alt="Abercrombie-and-Fitch-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Abercrombie-and-Fitch-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Abercrombie-and-Fitch-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 

 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16274" title="Citibank" src="http://dalaigroup.com/wp-content/uploads/2017/04/Citibank-Logo-Small-Square.jpg" alt="Citibank-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Citibank-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Citibank-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 

 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16288" title="Sheraton Hotels" src="http://dalaigroup.com/wp-content/uploads/2017/04/Sheraton-Logo-Small-Square.jpg" alt="Sheraton-Hotels-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Sheraton-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Sheraton-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 

 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16278" title="Gap" src="http://dalaigroup.com/wp-content/uploads/2017/04/Gap-Logo-Small-Square.jpg" alt="Gap-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Gap-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Gap-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 
</div>