Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Bootstrap and breakpoints


piernas

Recommended Posts

I've been testing bootstrap breakpoints and found a strange issue that's driving me mad: found that the .visible-* and .hidden-* classes are not working on their edges. I'm using this simple code:

<div class="container">
  <div class="row">
  <div class="visible-xs">XTRA-SMALL</div>
  <div class="visible-sm">SMALL</div>
  <div class="visible-md">MEDIUM</div>
  <div class="visible-lg">LARGE</div>
</div>

I need a favor: Could you please test this codepen on this specific  widths - 767px, 991px and 1199px and tell me if the corresponding div shows or not?

http://codepen.io/anon/pen/VmKydG

 

Thanks!

Link to comment
Share on other sites

@@frankl thanks. Another "ghost bug" with bootstrap here!

 

Silly thing is that this happens both in firefox and Chrome for me. Nothing is shown at the edges of the breakpoints:

post-181458-0-58510300-1479853943_thumb.jpg

 

I have no idea on how to debug this one! :(

Link to comment
Share on other sites

@@frankl many thanks again. It must be something related to my setup I suppose but I've tried on two pc (windows 7 an 10, both chrome and firefox). Nothing.

Now tested on Microsoft Edge and voila! there is the text! (w00t)

I don't know if firefox and chrome shares some engines but the ones I've installed doesn't work. I've reinstalled them and the issue is still there. Sure it will be hard to debug what's happening. Maybe a language issue? (my pcs have windows in spanish)...

If someone else can test it and can't read any text on 767px, 991px and 1199px widths please let me know.

Link to comment
Share on other sites

@@wHiTeHaT yes I'm using the responsive view for testingg in both chrome and firefox. The issue is, when setting resolutions 767px, 991px and 1199px width all the divs are hidden. With all the others one is visible (the one corresponding with the size of the viewport).

 

@@frankl has confirmed he can see the hidden divs while I can't with same browsers and in two different OS - but it works well on a third browser he didn't test, so it seems to be a really hard to trace problem!!! I don't know how to debug it.

Link to comment
Share on other sites

@@piernas , i already tested and it worked.

 

But can you try again yourself with the following codepen:

http://codepen.io/anon/pen/xRdJdz

 

As of bootstraps documentation :

 

 

The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2.0. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling <table>-related elements.

Reference : http://getbootstrap.com/css/#responsive-utilities-classes

Link to comment
Share on other sites

@@wHiTeHaT same results here:

 

Firefox, chrome: No div visible on speciic points

Microsoft edge: One div visible in every resolution.

 

I have tested the hidden-XX classes and the results is the inverse:

 

Firefox, chrome: All divs visible!! on specific points, three on the other ranges.

post-181458-0-41191000-1479929297_thumb.jpg

Microsoft edge: Three div visible in every resolution.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...