Component behaving strangly

Bootstrap Studio Help
1

I have created a small grid using rows and columns. First time I add the grid to a page it looks fine. If I make a copy ^d then the copy has different fonts and image sizes.

Some kind of reset issue - if there is one correct grid then all the ones add later are displayed incorrectly. If I delete the correct grid then the next one added display correctly and following ones are incorrect.

This is the css file for the grid component:

#services-grid p {
font-size: 2.0em;
font-weight: 600;
margin: 0px;
}

#services-grid img {
width: 98%;
}

@media (max-width: 576px) {
.row div {
width: 100%;
}
}

@media (max-width: 576px) {
#services-grid p {
font-size: 1.7em;
font-weight: 500;
}
}

@media (max-width: 576px) {
#services-grid .odd {
order: 1!important;
}
}

2

Chances are that it is because you are using an ID rather than a class.

If you are using multiple instances, it is advisable to use classes.

When you duplicate the element in BSS it will rename the id with an increasing number… services-grid-1 -2 -3 etc, therefore you have no styles that correspond

3

That is absolutely brilliant. I would have never worked it out.

Thank you very much.

1 Like