I`ve been struggling with this issue for a while now, even my co-workers can't figure this out.
The live version of this app runs on Bootstrap 3 and my local version on Bootstrap 4, the HTML is exactly the same. The font on Bootstrap 4 looks so much blurry than Bootstrap 3. I`ve tried all kinds of font rendering styling, but none solved the problem.
Bootstrap 3
Bootstrap 4
You require a good pair of eyes to see the difference, but believe me, the difference is visible. Screenshots were made on the same screen.
Anyone an idea?
Thanks in advance!
Bootstrap 4 uses the system UI font.
Reference: https://github.com/twbs/bootstrap/pull/19098/commits/73e5e89e0efb938072ba3b1da5d06d0d0e659db9.
https://github.com/twbs/bootstrap/pull/19098
You might want to change back to the regular one if you think it's blurry.
You need to check for all the browsers (maybe it's just a browser thing)
Also you need to check your own css. However, have a look here: https://www.icondeposit.com/blog:how-to-properly-smooth-font-using-css3
Seems to be only happening in Chrome. I guess I`ll have to deal with it. Thanks all!
Related
I want to start off by apologizing if this has been asked before. I tried to find the answer but nothing was popping out for me. I am still very new at coding and have hit a wall in my knowledge. I appreciate any help directly or showing me in the right direction.
We are having issues with the layout on different devices. The mobile site looks good, same with the desktop. However, between 768-799px, it distorts the site and then at 800-1300px it is distorted in another way, neither looks good. I have gone through and changed all of the #media queries to try to adjust it but have had no luck. I have attached two pictures of the different issues we are experiencing.
Thank you in advance!
Tablet view 768-799px
Over 800px
It is a little hard to tell exactly what is causing this without any code being posted, but flexbox is a great tool for this. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ is a good reference. My understanding is you want to prevent overlapping items, and how I would use this to prevent that is by putting them in separate flexbox items within the same container. There are tons of great YouTube tutorials on this topic if anything in the link is confusing.
Please I need to know is there any way I can resize ShareThis sharing buttons on my website?
The problem is that it is very small when rendered on a mobile device. I need to make it larger.
Is it possible? or it is fixed and can not be changed since we are retrieving it from the server?
This might be a late reply.
I work at ShareThis, and I believe this is definitely solvable. We have our new SOP (Social Optimization Platform) for customizing your buttons at https://platform.sharethis.com. And you can install and customize your buttons there.
And if you are using reactjs, we recently released our reactjs plugin at https://www.npmjs.com/package/sharethis-reactjs, and you can customize your buttons through the configuration. Find more details in the documentation, and if you have more questions, I'm glad to help.
I am trying to insert page-break-after:always; into the Print.css of a dynamic invoice.
The project is using Bootstrap 3, and I have been testing the printing on Chrome. In the invoice HTML I am using the bootstrap grid system, with bootstrap's 'hidden-print/visible-print'.
The issue I am having is: while using Bootstrap, Chrome is not recognising the page-break-after:always. I have read this is due to 'float:left' and many other factors, but after hours/days of tweaking them, it seems to make no difference. Print-break-inside:avoid; works fine.
I am curious if anyone else has encountered this recently, or if anyone with a superior knowledge of Bootstrap's inner-workings knows the root of this issue definitively?
It seems this is a ongoing problem, that Bootstrap knows about, and that may be fixed in Bootstrap 4. Until then I am stuck. I have no idea now how to achieve a print-break-after with dynamic content while using Bootstrap. Removing Bootstrap is not really an option due to the way the CSS is being loaded in my project.
Thanks in advance.
EDIT: Fixed
The only fix I found was to rebuild the layout by hand after setting:
float: none !important;
position: static !important;
in #media print.
This makes the Bootstrap col-* not work, but now the page breaks do. Pretty brutal fix but at least it worked. The 'row' class of bootstrap still works though, so there's that. Thanks for the help folks.
So I am using Bootstrap 3 that has not long been released. They changed the markup a bit in comparison to Bootstrap 2.xx.
Previously I asked the community on how I would center the buttons/links inside of a Boostrap navbar, and I was told that bootstrap offers a new class nav-justified. And when applied to a navbar it works brilliantly.
However my issue is that when I apply that it removes the style of a default the default look of bootstraps navbars. Sure it wouldn't be too hard to correct that with CSS but I'm wondering as to why just a center CSS class would remove the style of this?
Check out my Jsfiddle to get a more clearer view on what I mean
http://jsfiddle.net/MgcDU/6582/
Bootstrap 3 is still in RC1.
That means it's still on development and released for developers to be tested,you shouldn't download it unless you are a developer and a people who will help find bugs.
So what you need at the first is Bootstrap 2.3.2 because Bootstrap 3 was released at RC1 which means t's still on development and have alot of bugs...
I already try bootstrap 3 there was alot of bugs i guess you shouldn't use Bootstrap 3 First until it's completely released.
I am trying to put together a simple portfolio site, and have implemented a basic responsive design into the CSS as well (at the very bottom of it), and it behaves just fine - shrinks the 5 columns down to a single column and hides a few elements when I resize the computer browser. But on iPhone/Android browser it doesn't make any difference.
Here is the page in question -> Sample Page
And I can't figure out what the issue is... as in, this should be fairly simple to do, but apparently it's not, and now I'm losing sleep over it... so might as well ask here.
Have you [also] consider the use of viewport meta-tag? Just check This.
I tried loading the site but it seems like your custom js file is not found(404 error).