Brands Component

Bootstrap Studio Help
1

This might be a stupid question, not sure. I dragged a "Brands" component into the work space, deleted the default images and replaced them with some company logos. I cant seem to link each individual logo though. I want each individual logo to have its own link. ALL the images under the DIV CLASS "Brands" seem to be wrapped in "a" tag. I tried a bunch of different things but cant seem to get it to work..Its probably something simple that I'm missing I'm sure. Thanks in advance for any help . Much appreciated, Paul

enter image description here

[]: href

2

I don't believe they come default with links so what you need to do for each of the logo images is just drag a link component in for each image. Then drag each image into it's own link, rather than all the images into one link. That will fix it right up for you. :)

TIP: The easier way to do this is drag one link in, duplicate the link however many times you need in order to have on for each image. Then drag the images in. Saves a bit of dragging time. :P

3

Thanks for the reply, Jo. I tried that earlier before I posted this but it doesnt keep the logos in line. It ruins the responsiveness. See pic attached. I think this is what you are describing but not 100 percent

enter image description here

4

That's a structural issue, not totally a link issue. The link is just breaking some of the responsiveness. You may need to alter the size of the images as I am assuming they are larger than what they originally showed since that one grew. Get them down to the size that allows them to fit side by side and that should take care of that issue. Or you can put them into separate columns or whatever type of structural setup you like to use. The links are just breaking it a little. You just need to compensate for it is all. It's just a structural thing that needs fixing.

Hard for me to know exactly what to tell you as many of the items in that setup probably have some specific classes which we can't see all of them in a screen shot. Lots of different ways this can be set up though so just choose what best suits your coding practices.

5

The problem is that the Brands component's CSS file sets the A element to display:block;

Do like @jo described and then change the Brands CSS it should set you right again (the updated full Brands CSS should look like below)

.brands {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  padding:40px 0;
  color:#313437;
  background-color:#fff;
}

@media (max-width:767px) {
  .brands {
    padding:30px 0;
  }
}

.brands a img {
  display:inline-block;
  margin:10px 20px;
  vertical-align:middle;
}

Brands will line back up and each can have it's own link and centered on the screen.

Saj

6

Thanks for the help, guys! Will try that ASAP!