I have scaled down star shape in css but cannot decrese the space between each of them.
here is the code.
// html
5 divs in a container
//css
container with flex property to center and space-around property
.star {
/*code*/
transform: rotate(35deg) scale(.15);
}
so accoding to the above code the stars are scaled but the space between them as not reduce.
Note that here i have used
Note that i have applied a transform scale to reduce the size but i cannot change the space between them in flex box.
Please help me scale down the div without affecting the space around it.
please refer the image attched to know what im saying here.
I am trying to fit them inside the container, but its clearly going out
Related
I have a project that involves having a sidebar that floats over an image. The sidebar is set to position: absolute to keep it over the image and to help it scale along with it when the screen size changes.
Here is a codepen that basically recreates what I'm working on: https://codepen.io/gojiHime/pen/JmYqaz
The issue I'm having is with controlling the size of the contents within the wrapper container. I want the preview div to scale along with the wrapper container. Currently, it does not work as expected in that the preview div does not start scaling as the width and height change for wrapper and for thumbs-inner. The thumbs-inner div scales correctly for the most part, but the bottom of div is cut off so you can't see the bottom of the scroll bar in smaller screens.
I know I set overflow: hidden on wrapper but without it the content in preview would extend outside of it as the height of wrapper changed.
So, I'm looking for ideas on how to fix the aforementioned issues. wrapper must stay absolutely positioned and the thumbs-inner div needs to have a vertical scrolling feature, so I can't do anything with those. I don't think setting a height makes sense for wrapper since it needs to scale responsively in height and width.
EDIT: Not sure how much this will help but this is a screenshot of what the layout of everything should look like: enter image description here
The Kraftmaid logo, full-size thumbnail and the text below it (which are in the .preview div in the codepen) have to be visible at all times when changing the screensize.
I'm not sure if this is exactly what you're looking for, but generally for responsive layouts you would want to avoid fixed dimensions, such as specific widths set in x number of pixels.
This shows your code with responsive layouts for .wrapper and .thumbs-inner (note that I haven't addressed any content issues within those two divs since I have no idea what your intended layout is):
https://codepen.io/anon/pen/ZqrZaj
Note that:
I've switched the two layout divs to use box-sizing: border-box; which will allow you to use pixels for margin and padding but still use percentages for width.
I've removed width from .wrapper and switched to percentage based absolute left and right declarations - if you modify these values, the layout should still work.
I've added borders to make the layout more obvious.
I currently have a div in my home page, serving as the first section of it. It has a background-image which is a SVG file.
What I'd like, is for the background to not move vertically when scaling it. Have it with fixed height, but scale horizontally.
Currently, I can get it to have 2 different behaviours, neither the one I want.
The first gif is closest to what I want, giving the svg element a height attribute and using preserveAspectRatio=none, but then the circles inside don't preserve their aspect ratio.
The second example could also work, but if the svg were clipped to the bottom of the div instead of the top. But I don't know how to make it scale "upwards" instead of downwards.
I hope what I try is not impossible.
Let me explain first: I have a responsive design which requires a background to be fixed under some situations (media query blocks). The design in question is this one:
http://think-open.at/fileadmin/templates/responsive/content.html
Basically there are two media queries: one for the maximal height and one for the minimal width. If there is enough viewport height there is a scrollbar in the content area and the design height is fixed. But if the viewport is not large enough for showing the predefined height the height-mediaquery removes the scrollbar from the inner div so there won't be two nested scrolling containers (body + div) and sets the content area to height: auto.
There is also a responsive media query if the viewport is too narrow but this works flawless.
Now the problem: When the design switches to the mode where the whole page scrolls (below 830px height) I would like to position the image in the right container "fixed" so it does not scroll out of the viewport. But then the problem arises, that I can't really position the background in regards to the container div as "fixed" positions an background image in regard to the viewport. I have created a CSS fiddle here:
http://dabblet.com/gist/ae5c3598e1465ce0c90e
If you change the width you notice the problem. I would like to have the right border of the image aligned with the right border of the green box.
Is this somehow possible? I have no problem using calc() as there will be a condition in my CMS to use the plain old-school design if an older browser gets detected.
I solved it myself now. Sorry for posting.
The trick was: As my design is centered, I started to try using calc(50% + somepixelvalue). This did the job.
I adjusted the CSS playground:
http://dabblet.com/gist/5b63553f47a81f3bb701
Now the image is always up in line with the right border of the green area. When scaling there is sometimes a 1pixel difference but this doesn't matter as the background will get assigned to some container element which acts as mask.
Is it possible to draw a circle using -webkit-border-radius in CSS3 whilst constraining the width and height to specific variables (such as height:100px and width:100px) so when text is added inside the circle the text wraps instead of forcing the size of the circle to change?
If you want to handle this with only CSS and make it responsive, it's not possible in the way you would like.
However, it can be done with some rather tedious JavaScript.
I provide three alternatives.
1. CSS only, imperfect solution.
_-==-_
-########-
- # # -
| # # |
- # # -
-########-
-.__.-
Which mathematically, is 14.65% of the radius on each side (which is the same as the width or height), assuming a perfect circle.
Don't forget that padding inside an element is relative to it's container's width, so padding: 14.65% won't work unless the circle is inside an element with the same width.
2. JavaScript.
Font characters have different sizes. To do this, you will need either:
a monospace (or close) font.
to come up with a script to calculate the width on the fly.
The script could do this by having an inline-block element with the CSS display: pre; to calculate the width of all the breakpoints (i.e. words). On browser resize, you would use these widths to calculate how many you could fit on each line.
However, each line would have a different length inside a circle, so you'd have to work out from the line-height, the circle height and the number of lines how wide the containing line would be.
This isn't a slow process but doing so onresize would be problematic, so I'd advise either using fixed ratio sizing of the font-size and the circle-size, so you wouldn't have to redo it all.
Alternatively, another way to resize the circle after it had been generated on load would be to use a CSS3 Transform with a scale factor.
3. HTML Canvas + JS
You could use a canvas instead, as per the solution below? It would be far easier. Even then, the width of the text is calculated but is likely much faster than loading each word into an inline-block in the DOM.
Wrap text to a circle shape in svg or canvas
There is no way to make the element actually be circular, but you can definitely make the circle be of set size and make the text fit into the largest square that would fit inside the circle using padding:
http://jsfiddle.net/pk7yk/2/
(Example only works in WebKit browsers)
Although you do have to make sure there isn't too much text inside the circle to fit.
It is possible to wrap text inside a circle created using css3 border radius.
you just have to add the padding amount to the border radius
eg:
border-radius is the width/ height divided by 2. The element must be
a perfect square to get a perfect circle. then add the padding amt to
the border radius
CSS:
.testCircle{
width:200px;
height:200px;
border-radius:150px;
background-color:#333;
padding: 50px;
}
HTML:
<div class="testCircle">
Text inside a circle
</div>
This will cause the text to wrap inside the circle. Tested in FF.
To know more about creating circles using css3
css circle with text wrapped inside.
P.S You have to be careful about the corners, though its looks circular the element is actually box shaped so have a comfortable padding so as to avoid the text being placed in the corners.
I have one big image as a background to my webpage. The image contains a box inside the image itself. How would I place text on that background image such that it should fit in the box, and shrink or resize accordingly (in other resolutions when the background resizes)?
If you're looking to resize the "box" containing the text, you should be able to set the dimensions of the element to percentage-based width and height values with CSS.
If you want to resize the text inside the element, then you might want to consider using JavaScript (perhaps jQuery) to poll the size of the window at set intervals and adjust the text size based on the new window dimensions.
Edit: To clarify, you should be able to set the dimensions of the text box (probably a div) to be a percentage of the page. For example, the div containing the text could be 80% of the window width and 80% of its height. You can then set the margin to be "auto". This should cause the margin around the box and the dimensions to be proportional to the window width.
Example:
<style type="text/css">
div#box {
height: 80%;
width: 80%;
margin: auto;
}
</style>
<div id="box">Text goes here.</div>
This will cause the "box" div to be centered horizontally on the page, but vertical centering is a bit trickier. You'll probably want to look at this page to figure out how to center it vertically to stay within the box in the background.
As suggested by the other individual, you could also make the box background just the background of the text's container and not the entire page background. This might be a bit easier, but I think you will still need to use the percentage-based width and height attributes and auto margin to center it nicely.
For starters, you can't resize a background image. Also, resizing text will need Javascript or a page refresh.
Try making an example at http://www.jsfiddle.net so people better see what you're describing.
UPDATE
Your question is still unclear and I strongly recommend jsfiddle. But if I've interpreted correctly...you're using FancyBox, which suggests you've got some Javascript running your page. Javascript can be used to find if your text is overflowing the container, and can resize it accordingly.
To do this, get your <div> (or container element) and check its .scrollHeight and .clientHeight properties. If the scroll is less than the client, the text doesn't need to be resized. If scroll is larger than the client, you can resize with the .style.fontSize property.
An untested example of what I'm describing is like this:
myDiv = $('containerElement'); // Get container object using its ID
size = 50; // Start with 50px font size
while(myDiv.scrollHeight > myDiv.clientHeight) {
// Decrement font size until scroll is less than client
myDiv.style.fontSize = (size - 1) + 'px';
}
You'll have to do a little legwork on this to get it to work how you like. Things to note:
I used the dollar function to get an object, you can google it for more info
Your container must have defined dimensions for .clientHeight to find
You may need to try .offsetHeight instead of .clientHeight
If you're just looking to control overflow, you can use CSS:
overflow-x:hidden or scroll or auto, overflow-y is the same
white-space:nowrap will prevent auto text wrapping
But, once again, my answer is vague since it's not clear (with code) what you're asking.
The problem with your solution is that it is very unscalable, not friendly to different browsers and will cause more problems as your website expands.
Try separating the box from the other bg image and use the box image as a background for the div you have the text in.