“div class” Question | Image Display & Banner Styling


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!

i have had a look and can see you have some rouge black paragraphs in your mark up. if you remove those and re-export it should solve your issue.

<div class="row" style="background: #fe8101;"> <p> </p> <div class="col-md-2 col-xs-6">

i would also remove any inline styling that you have injected to your design and control it with our CSS file.

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:

<!-- 1st Row -->

<div class="row" style="background: #fe8101;"> <!-- MCCORMICK --> <div class="col-md-2 col-xs-6">McCormick-Logo</div> <!-- ADIDAS --> <div class="col-md-2 col-xs-6">Adidas-Logo</div> <!-- ABERCROMBIE & FITCH --> <div class="col-md-2 col-xs-6">Abercrombie-and-Fitch-Logo</div> <!-- CITIBANK --> <div class="col-md-2 col-xs-6">Citibank-Logo</div> <!-- SHERATON HOTELS --> <div class="col-md-2 col-xs-6">Sheraton-Hotels-Logo</div> <!-- GAP --> <div class="col-md-2 col-xs-6">Gap-Logo</div> </div>

Have you added this using drag and drop or as a custom code component ?

Sorry, I copied the code and the image files are appearing visually. Here's a screenshot of the code if it helps:

Client Banner

Is there anything I can do differently with the code that has been created, above? Thank you for the timely assistance. -Stephanie

I think it's the comments that you have added to your code.

<!-- this is the comments I mean -->

Try taking those out

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.

The issue is the extra spacing that is being generated jo not the colour.

If Stephanie removes the HTML comments in fair certain it will work

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.

Thanks again for all of the help. -Stephanie

You can label what each block is within your design to organise things a little easier

Thank you, Chris. If there is any way I should resolve this post, please let me let me know. That clears things up.

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?

Hi Stephanie

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/