I use the following code: bootstrap Circular progress bar using custom CSS and JS
To get a beautiful circular progress bar, but the problem, I want to make it bigger, it appears small, and when trying to do that, it becomes bad, and this is a mistake from me, is from someone who helps, please :)
Thank you, I know that the solution will be simple, but I'm not a professional in CSS
Any way to make it big with CSS?
Bootstrap circular progress bar has hardcoded values inside to be always 100px x 100px.
the easiest way to make it bigger is to use transform:scale() and make final chart rescaled to proper sizing.
See example fiddle: https://jsfiddle.net/ywoat4s2/26/
The downsides of this solution is that after scaling chart may be larger than surrounding box, scaling happen as a last thing in rendering so you need to be careful to not overlap container which wraps charts.
Related
I'm just using a small bootstrap carousel on a site, but it's acting a little oddly. The first image displays at the correct size but each subsequent one appears half-sized, centred at the top of the container for around half a second before resizing properly. Having reached a frustration point I'm hoping someone can point me in the right direction as to why it might be behaving like this.
Easy way you can handle
This just apply one commen class for images
Then apply CSS
Specify height and width
Definitely your problem get solved..
I saw the Google Material Design website and was amazed by the change of color of the left, sticky "speech bubble"-image when you scroll down.
I am trying to understand the concept but Google's code is huge and somewhat confusing...
I think there are actually two images, but I cant recreate it just with different z-index values alone (I can let the first image disappear and the first appear but in combination it doesn't work).
Do I need a JS-library for that? Waypoints/scrollreveal etc., is this some kind of SVG magic or am I overlooking a simple solution?
on simple usage try onScroll() method using js for applying basic css colors on your element.
I believe those are animated objects, and the sections (their containers) have overflow:hidden, so those objects stay within their sections.
Also they probably have position:fixed and positioned using'top' and 'left' properties to stay on place all the time (or probably some JavaScript magic).
And ther animation is launched using JavaScript function scrollTop(), when visitor is on a certain distance from a page top.
I'm not sure what is used in this exactly page, but you can change and adjust scale, size, color and transparency depending on position from page top using JavaScrip - 100%.
I'm fairly new to bootstrap and I having trouble making my site do what I want it to. Hopefully someone can steer me in the right direction.
I used bootstrap to make a nice responsive grid for my site within a container. The problem I am having is that I would like my backgrounds (different backgrounds in different sections) to fill browser window while the page content stays at 1170px max-width. Is there anyway to do this?
of course. adding your own css is not that bad but make sure your css is in last (e.g , )
do this in your background telling your div
<div style="position:absolute; top:0;left:0;background-image: url('img/urbg.png');">
dont box here. experiment, play and explore. bootstrap is boxed dont get TRAP with BOOTSTRAP. its cool but you need to know when to handle design with image background. see this
This is essentially what I'm trying to do:
I have an image I want to use as the background for the webpage, and I want to put content over it, while keeping everything responsive so it's always centered!. I'm using Foundation 4, which is making things tricky (but I want to learn how to do it this way). The black boxes will be images, and the idea behind this is that everything can remain responsive.
The black boxes are supposed to be centered. I've tried using absolute positioning for the boxes and forgoing trying to put them in a , but it doesn't seem to work too well (i could be doing something wrong).
Overlapping anything in Foundation 4 seems tough. I must be going about it wrong somehow. Thanks for your time!
I'd need to check your HTML code structure to confirm but I think what you want is .small-centered and .large-centered (they work the same as .small-1,.large-1 but for centering).
http://foundation.zurb.com/docs/components/grid.html (Search for Centered Columns on page).
Also for the boxes I hope you are using Foundation's Block-Grid for your boxes - it will make your boxing a lot easier to do.
http://foundation.zurb.com/docs/components/block-grid.html
I am trying to use css shapes instead of images wherever it seems appropriate.
Currently i'm aiming to add a white triangular shape to the end of my <li> links like so:
Here's a JSFiddle for you to tweak.
I've been with it for a while but as a novice developer I haven't been able to find an approach! The navigation bar stuff is at the bottom of the css and the html. I'm trying to keep the result responsive by using em and percent where possible and really this triangular shapes height needs to be the same as the nav_option class (which can double in height if the texts gets knocked onto the next line by window adjustment)
Any advice / solutions? Much appreciated!
Edit: if this is not possible due to my relative font-size then please detail an alternative solution? Suggesting the use of Javascript is helpful but a bit to vague for a novice like me.
Because you are using the border hack to make this shape, the measurement you need want work with, font-size, cannot apply. You will need a JavaScript solution to detect line-wrap and adjust the border dimensions accordingly.
The font size is relative with font-size of ascendant element, doesn't with width or height of parent element. So, to use responsive font-size, try to use some jquery plugin (FitText) or build a your JS.
http://fittextjs.com/