Dont know why this is happening in Bootstrap?

HTML & CSS
1

1334×616 88.9 KB

I dont know why 4th logo of Bootstrap is coming under Javascript and not under HTML5 which I want? THe page is working ok on md and XS screens.

Kindly advice.

2

It’s really not possible to diagnose an issue from a screenshot alone. Please post the relevant code, or a link to the live page.

3

It’s either snagging on the element before (css3) or you have nested it incorrectly in the column.

You need to ensure that each row is cleared which is complex in bootstrap as you need to set the rules for it.

Alternatively for the icons and text you have there you could set a fixed height (in em) for the block and then they won’t snag (assuming text won’t wrap).

Or it cold be something else in which case we would need to see the page concerned:)

4

provide cods

5

and chips ::fries:

5 Likes
6

Sorry I forgot to provide the link. Its http://harbindersingh.site88.net/

7

Hmm … I’m not seeing a snagging image, because most of the images are missing.

Firefox:

1108×401 24.7 KB

Chromium:

1128×384 22.1 KB

8

As suspected I gave you the correct answer in my first post and the floats are snagging because they are different heights. You seem to be using a mixture of font icons and custom styling but you are ending up with elements of different heights.

Some are 147px in total height and some are 141px in height which is why they snag. You have a margin-top of 9px on some items and 18px on others.

If you want unequal heights in your rows then you must add the bootstrap empty clear elements (ugh!) as shown in the link I gave above. Or alternatively add a class to those floats and set the height of each element to be the same (147px).

That’s because the content has been added using the content property and only Chrome allows this to be used (incorrectly I believe) on normal elements where other browsers only use the content property in conjunction with the pseudo class :after and :before elements.

The solution would be to use a background image or a real image instead of inserting via the content property.

2 Likes
9

I corrected the issue. Which free tool I should use to check browser compatibility of my webpage?

10

The W3C HTML and CSS validators and the four or five most popular browsers.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.