I’m trying to create a very simple client banner with 6 images. I could really use some help at the page level. I'm very new to code. I think I may be using the wrong “div class” because extra orange space is created above the images for text. Text should not be a part of this banner, it is entirely a single row of images. Here’s where you can view the current banner: http://dalaigroup.com/maryland-seo/
Do you know what div class may be appropriate for this type of display? Or is there something else I can do to remove the extra orange space? I’ve tried to use div class=”gallery,” but the orange background is removes when I do this. How can I write this correctly to contain everything currently in the banner, while removing the excess orange space above the brand logo images? Please let me know if there is anything I can do. Thank you!
Thank you for the quick feedback, Chris.
When I inspect the element I see the unwanted paragraph marks, as well. I'm just not sure how I may be able to remove them. I've examined the banner code on the page itself, and there is no rogue content. I'm wondering if I introduced it with an improper div, creating unwanted paragraph space? Here is the code for your reference. I'm not sure at all where I've gone wrong:
You have the orange color defined right in the first div of the code. If you don't want it orange, change that color to transparent or something else. That will get rid of that orange color.
Jo and Chris,
Thanks so much for the help. Chris, thank you for clarifying. You were very much right. I temporarily removed the labels for each item and the rogue text space was no longer an issue.
Chris, do you know if there may be an alternative, so that I am still able to clearly label each icon? When removing the headings, the information is less clear. I'm not sure if there is a more appropriate way to provide headings for the the logos. One that will not create unwanted text space.
I have another question about the client banner, Chris. I've remove the comments in the code, but I'm not sure what my best options are for removing the seemingly doubled amount of padding that is somehow created between each image: http://dalaigroup.com/maryland-seo/.
Creating zero or negative margin space doesn't work in my favor, because of how the images reformat for mobile. I'm not sure if I should be creating containers around every 2 images, working in a responsive table, or writing separate code for a mobile version. The excess padding and margin space is much more noticeable here. When I try to set specific sizes for these elements, the image sizes are easily compromised.
Is there a way I can write this so that I have more control over the margin and padding?
What you seeing in between each image is the default gutter spacing that are applied for each column. Each col has 15px margin left and right applied which explains why the 4 images showing in the centre of your row look like they have additional spacing.
Thats is how its meant to work by default. To fix would require some custom CSS to be applied.
Thank you. Would it be best to change that 15px to a percentage, or would that cause problems? I should give each individual image a margin-left, margin-right command, correct?
When the images redistribute for mobile, new horizontal space between the images is formed, similar to a gutter. I was able to redefine the vertical gutter space with padding percentages. But, I'm not sure what defines the horizontal space when they reformat. Padding and margin seem to be unresponsive. What might this space be?
There is quite a bit of horizontal space when this banner reformats for mobile. I'm not quite sure if there is a way I can set percentages to control this as well: http://dalaigroup.com/san-diego-seo/
</div>
<!-- ADIDAS -->
<div class="col-md-2 col-xs-6">
</div>
<!-- ABERCROMBIE & FITCH -->
<div class="col-md-2 col-xs-6">
</div>
<!-- CITIBANK -->
<div class="col-md-2 col-xs-6">
</div>
<!-- SHERATON HOTELS -->
<div class="col-md-2 col-xs-6">
</div>
<!-- GAP -->
<div class="col-md-2 col-xs-6">
</div>
</div>