I'm using bootstrap 3.3.7 and I'm experiencing an issue of some borders between cells to be bolder
than others
I'm not sure if I'm going crazy or some borders are really bolder than others. How to make borders look equally bold?
Related
Page in question is here
The overflow can be seen on mobile only (e.g. iPhone SE) on Chrome browser. Issue doesn't happen on Firefox.
The issue is with the horizontal scroll table, shown here:
picture of the horizontal scroll table
If you remove the white-space: nowrap tag from the table.hscroll-table selector, the overflow goes away and the horizontal scroll works properly. Otherwise, the horizontal scroll works, but there's also overflow on the entire page, enabling horizontal scrolling throughout the whole page and a bad user experience.
I can't for the life of me figure out why this is happening. Is it a Chrome bug?
Any help would be greatly appreciated. I can remove the white-space: nowrap to fix the issue, but that makes the table design worse.
Weirdly enough, the issue only seems to be with the td tags. If I add white-space: nowrap to the header cells only, there's no unwanted overflow.
Ok, turns out the problem was because of the screen reader text that was being generated within the table by the rating icons.
I set the screen reader text to display: none as a temporary fix and now display the text right beside the rating instead.
I'm using Bootstrap glyphicons for a web app and love the flexibility of being able to leverage them as fonts, since that's what they are, not graphics. However, I'm running into a challenge with the glyphicon-remove-sign icon, which has a colored circle surrounding an otherwise empty "x". I like the default look of the black surrounding the "x" and want to use it to close a rounded-cornered iframe. But, because that "x" is empty, it displays whatever is behind it:
Ideally, I'd want to have that hollow "x" be a different color like white, easy enough to do with background colors, except that creates a box around the otherwise vectored font and looks unsightly for my usage, which has multiple colors to contend with behind the icon:
The question is: is there a way to just fill in the empty space inside the hollow area of this glyphicon without this kludgy-looking box? I looked at using a clip-path with the background color, but that won't work with IE. I welcome any recommendations anyone may have for a fix here -- thanks in advance.
create a wrapper div of the glyphicon, give it border-radius as to imitate the circle streching it and then give that background color
I am using this awesome Skrollr libary: https://github.com/Prinzhorn/skrollr (animations on scrolling)
So far I have this as my implementation:
<div class="band2 landing">
<div class="container">
<div id="inside" style="position:relative;height:700px" data-0="margin-top:0px" data-1000="margin-top:800px">
<img src="/static/images/snappie.png" width="280px">
<img src="/static/images/iphonehand.png" width="400px" style="float:right;margin-top:50px" data-0="margin-right:0px;" data-150="margin-right:190px" data-300="margin-right:0px;">
</div>
</div><!-- end container -->
</div><!-- end band landing -->
basically I am moving the entire "inside" div downwards when the user scrolls down. I increase the top margin by a certain amount when the user has scrolled a certain number of pixels.
While this technically works, it produces some really weird scrolling, as you can see here on the test site: http://snappiesticker.pythonanywhere.com/splash
see how the scrollbar quivers and shakes and how its hard to scroll past the yellow bar?
I feel like hard coding these pixel values is generally not the best way to go about this and will fall apart especially when using a variety of screen sizes, browsers, etc.
What is the correct way to do this? Any skrollr experts?
Instead of using margin-top, margin-right etc.
Try using the transform:translate3d(0, 0, 0).
The first two 0's are the x and y coordinates and should be adjusted to match the effect of the margins you were setting. The third 0 is the z coordinate, which should stay at 0.
This way you are killing two birds with one stone. The transform:translate property is a lot easier for the browser to handle and the 3d enables hardware acceleration. Hopefully this will smooth things out for you.
Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:
http://www.doorsets.org.uk/
I've tried reducing the text size in the navbar via a media query but that isn't solving it.
What am I missing?
Appreciate it. Thank you.
NJ
One solution might be to change the point at which the navbar collapses, you can do this by creating a customized Bootstrap and setting the #grid-float-breakpoint to a larger number.
This variable unfortunately also influences the dt and dd inside a .dl-horizontal which might be a problem.
If you want to use a media query to reduce the font-size you can use the .navbar-default .navbar-nav > li > a selector. It however needs to become 9px at the smallest viewport size to still stay on a single row which is quite unreadable.
From the Bootstrap documentation:
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
It goes on to say:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
I am working on a site with Spry Tabbed Pannels. My problem is that I can't get my .TabbedPanelsTab, .TabbedPanelsSelected, TabbedPanelsHover, and .TabbedPanelsTab a, to touch the .TabbedPanelsContentGroup.
There is a very thin white line in between the two and I've tried lots of things, like a negative margin, or an extra thick border. And nothing seems to work.
My tabs have images in them for design purposes, so that's just a heads up.
Here is the site for reference:
http://emilymagnuson.com/trustbank/index.html
Does anyone have a solution?
Thank you!
I think the problem is within your .TabbedPanelsContentGroup:
change the padding-top from 3px to 0px.
Let me know if I misunderstood your query.