I'm using bootstrap 'featurette' feature. On the page there is a text on the left and image on the right. when you shrink the browser size, they go on top of each other, with the text at the top and the image at the bottom. How do I change this so that the image is frist and then the writing underneath?
Ad example is here http://getbootstrap.com/examples/carousel/
If you notice the feature part you will see what I mean when you resize.
I have tried changing the float position as thats the only thing I can think of but it didnt work.
P.s just to clarify, I still want them the same place when over 756px (or whatever the size is) but just want the image at the top when it changes size in the example above.
You should use display:flex property to the container for both and use order property for the elements for example is below. Try changing the order of the elements and have a look.
.elements-container{
background: #000;
width: 100%;
height: 500px;
display: flex;
}
.text-box{
order: 2;
width: 200px;
height: 200px;
color: #ffffff;
background: #ff0000;
display: block;
}
.image-box{
order: 1;
width: 200px;
height: 200px;
display: block;
}
<div class="elements-container">
<div class="text-box">This is text</div>
<div class="image-box"><img src="http://lorempixel.com/200/200" /></div>
</div>
Related
The problem is demonstrated here: https://codepen.io/PengXiao/pen/NWwKpgB
As you can see in the above picture, message1 and participant1 was covering the whole width of message-container. participant1 is moved to the right for 50% with translateX and created a gap (shown as orange).
My questions is whether message1 can grow to fill that gap. I understand that transform will not impact the current layout. So we don't have to use flex and transform. I have just used flex for demo. However, we have the following constraints:
content for participant and message is dynamic;
participant must move to the right for 50%;
width of 'message-container' is fixed, but it does not consider the dynamic width of participant.
The final result I am trying to achieve is like this:
Yes, it is for the renderer of ZenUML :)
changes made using the transform property are merely visual, You can use negative margin to move the element.
.message-container {
display: flex;
width: 300px;
height: 50px;
background: orange;
}
.message {
height: 40px;
flex-grow: 1;
background: green;
}
.participant {
height: 40px;
margin-right: -40px;
background: pink;
}
<div class="message-container">
<div class="message">message1</div>
<div class="participant">participant1</div>
</div>
Consider this very simple header:
.box {
height: 100%;
width: 50px;
background-color: blue;
}
.row {
display: flex;
height: 60px;
background-color: yellow;
}
<div class="row">
<div class="box"></div>
<h1>This string needs to be able to wrap</h1>
</div>
The blue box needs to be defined by the height of the row and the text needs to be able to wrap. But as you can see, when the text wraps it extends beyond the flexbox. The flexbox can't grow at all because I have defined its height. If I remove the height specification then text wrap works correctly but the blue box disappears. This is a quite frustrating problem that I have spent hours trying to figure out. Is there no way to say to the row "your height is 60px but you can go bigger if you need to".
What I've tried so far:
Use min-height: 60px. For some reason the blue box still doesn't show up when I do this.
Use max-height: 100px. The row defaults to that size which is too big for when the text doesn't wrap.
I guess I could write media queries to manually change the height of the row, but it seems like there should be a more flexboxy way of doing this. Any ideas?
Here is the JS Fiddle if you want to play with it.
You don't need height: 100%; on child element of flex element.
And if you want minimum height of 60px on parent element, use min-height: 60px; instead of height: 60px;
.box {
width: 50px;
background-color: blue;
}
.row {
display: flex;
background-color: yellow;
min-height: 60px;
}
Here is the fiddle
https://jsfiddle.net/3bzeht52/
I am currently building a website with weblflow but run into a problem that someone here might be able to help me with. The is an issue I have for multiple projects, so I would really appreciate someone's help.
Basically, if you have an image full screen size (set as background image, 100vw and 100vh), and then want to put headings/labels on top of that image pointing to specific sections in that image, how do I get these headings/labels always move with the image when someone would resize the browser?
As for now I used absolute positioning for the headings/labels and used % margins to position them where I want them to point to on the image. The image itself I have set to position relative. However, with that solution the headings/labels never exactly continue to point to the same spot on the image when resizing the browser.
I think the main issue is that when someone only changes the browser's width, the image gets (for example) smaller bc it keeps it's ratio. Vertically the headings/labels don't move bc the height was unchanged, it's just the browser's width that was changed. So horizontally it's still fine but vertically the headings are off now since the image got smaller due to resizing the browser's width. So I guess I do know why it's not working but I don't know how to fix this. If someone has a solution for this, please let me know.
As an example: if you open this page: http://nestin.bold-themes.com/classy/ and scroll down to the section ‘True value is always inside’, there is an image with 5 numbered labels, no matter how you resize the browser, these labels/numbers stay in the same spot of the image. I see this quite often on websites. How was this achieved?
Would appreciate any help!
You create a parent wrapper, put inside the image and all the divs.
the parent is relateive and the divs are absolute.
here's a small demo.
* {
box-sizing: border-box;
margin: 0;
}
img {
max-width: 100%;
display: block;
width: 100%;
}
.parent {
position: relative;
}
.parent .box {
position: absolute;
width: calc(1.6vw + 10px); height: calc(1.6vw + 10px);
border-radius: 50%;
background-color: #fff;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
.parent .box.window {
top: 0;
left: 39%;
}
.parent .box.light {
top: 16%;
left: 46%;
}
.parent .box.pool {
top: 90%;
left: 50%;
}
.parent .box.plant {
top: 55%;
left: 3%;
}
<div class="parent">
<div class="box plant">1</div>
<div class="box window">2</div>
<div class="box light">3</div>
<div class="box pool">4</div><img src="https://images.pexels.com/photos/4075088/pexels-photo-4075088.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt=""/>
</div>
https://codepen.io/ShadiMouma/pen/BaKYyYX?editors=1100
You can achieve this with percentage positioning. For example,
In the parent div
position: relative;
In the child div
position: absolute;
top: 50%;
left: 30%;
Now the child div will always position itself 50% from the top and 30% from the left of the parent div. It does not matter what size the parent div is. I suggest you take a parent div and put the image and texts inside it.
Your example website also uses this technique.
check their code here
Another technique would be using HTML canvas. But for something simple like this, HTML canvas would be overkill.
How can I keep the play button centred even if the the image/video size changed?
.image{
position:relative;
width:500px; //changed
height:300px;
}
Here is my example...
Attention: my images/videos haven't no specific size, so they can change according to their own size... This is just an example!
I set up three examples to show how you could solve this problem.
Please see the fiddle: http://jsfiddle.net/audetwebdesign/mxSkQ/
The HTML is essentially yours:
<div class ="image ex1">
<a href="#">
<img src="http://placehold.it/200x150" alt="video">
<span class="play">
<span></span>
</span>
</a>
</div>
I am using a demo image with configurable dimensions, 200x150 for example, easily changed for testing.
Example 1 - Image Size Determines Size of the Parent Container
.ex1.image {
position: relative;
display: inline-block;
margin-left: 50px;
}
.image a {
display: inline-block;
position: relative;
}
/* Gets rid of the extra white space that follows an inline element*/
.image img {
vertical-align: bottom;
}
If you want the .image div to shrink to fit the image, use inline-block to display.
The margin-left is optional, will depend on the rest of the layout.
Important: To center the play button motif, simply set the a tag to display as inline-block and your arrow-motif-span will position itself nicely.
Because img is an inline element, browsers insert a small space after it that can show up if you have borders or backgrounds. Use vertical-align: bottom to clean that up.
Example 2 - Parent Container Has A Specified Width
You can specify a width for the .image parent container and then use text-align to position the image element.
.ex2.image {
position: relative;
display: inline-block;
width: 400px;
height: auto;
text-align: center;
}
Example 3 - Parent Container Has Full Width and Specified Height
In this example, I let the parent container fill up the width of the window and set the
height to 200px. To get vertical centering, I set margin-top to a hard-coded value that will depend on the height of the image. If you let the image take on a fixed height, this example is useful.
.ex3.image {
position: relative;
display: block;
width: auto;
height: 200px;
text-align: center;
}
.ex3.image a {
margin-top: 25px;
}
You need
top: 50%;
left: 50%;
margin: -25px 0 0 -25px; // top and left equal to half of the size * (-1)
http://jsfiddle.net/nGKcn/13/
Try playing with the image size/different images.
Give the image CSS of:
display: block;
margin: 0 auto;
This is just a general way you put stuff in the middle.
Unless I'm missing something maybe?
My code is something like the below. When theres 3 images everything is fine once theres 4 it gets full and moves the entire div.top into another row. How do i make the div inside top just start a new row instead?
I tried writing .top width=500px but once it hits or passes it instead the images inside are squeeze together instead of each being 150x150. I tried max-width on top instead and in opera and chrome i see the border of top as 500width but the images continue to render pass it. (i have a firefox problem with my div so the width looks fixed to something else).
So how do i make these divs go into another row? and not try to squeeze together
<div class="top">
<div><a href><img/></a></div>
<div><a href><img/></a></div>
<div><a href><img/></a></div>
</div>
I may need more information here, it's hard tell exactly what's happening. A screen-shot perhaps?
I would probably start with something like this:
.top {
width: 500px;
overflow: hidden;
}
.top div {
display: inline;
float: left;
width: 150px;
height: 150px;
}
Here's a solution that might help (used it in my example, just customized to fit your example)
.top {
display: block;
padding: 0;
margin: 0;
width: 100%;
}
.top div {
float: left;
display: block;
margin-right: 5px;
margin-bottom: 10px;
width: 47%; /* Not needed, but in my case I needed 2 columns */
}
Basicall, the .top div float: left; is what is making my images to go to next row if columns are full.