I am trying to fit image in with text link to flexbox container. The problem that it's break my container and it's become look like next on small screen:
<el-container>
<el-main>
<div class="top">
<div class="download-compiler">
<div class="dmd-download">
<el-image src="http://dlang.ru/imgs/dmd_logo_128.png"></el-image>
<el-link style="color: black; font-size: 1.3em;">DMD</el-link>
</div>
</div>
<div class="code-snippets">
<div class="code-snippets-header">
Samples:
</div>
<div class="code-snippets-content"></div>
</div>
</div>
<div class="middle">
<div class="main-app-img">
</div>
</div>
</el-main>
</el-container>
Here is minimal jsfiddle.
https://jsfiddle.net/dhoc4zw5/
I'm not really sure what you're trying to achieve, but in your jsfiddle, just removing height: 20% from class .top make the image and text always stay in the pink zone.
Related
I have this fiddle:
https://jsfiddle.net/qa5dr0x8/130/
I dynamically create divs, so i dont know how many will i have them and i dont know width of them. I manage to achive to have them in one line but there is a space after last div in container. What i want to to fill container with that divs even if i dont know width any of them. I would love to achive that without using flex. Any suggestion ?
<body>
<div style="widht:30%">
test text
</div>
<div style="width:70%;border:1px solid black;">
<div style="background-color:red;display:inline-block;">
a1fsdfsdfsd
</div>
<div style="background-color:yellow;display:inline-block;">
b1dfsd
</div>f
<div style="background-color:blue;display:inline-block;">
c1d
</div>
</div>
</body>
you could use display: table instead of flex for the wrapper and use display:table-cell for the variable divs.
<div style="widht:30%">
test text
</div>
<div style="width:70%;border:1px solid black; display: table">
<div style="background-color:red;display:table-cell;">
a1fsdfsdfsd
</div>
<div style="background-color:yellow;display:table-cell;">
b1dfsd
</div>
<div style="background-color:blue;display:table-cell;">
c1d
</div>
</div>
https://jsfiddle.net/qa5dr0x8/131/
<body>
<div style="width:30%">
test text
</div>
<div style="width:70%;border:1px solid black;display:inline;">
<div style="background-color:red;display:inline-block;">
a1fsdfsdfsd
</div>
<div style="background-color:yellow;display:inline-block;">
b1dfsd
</div>f
<div style="background-color:blue;display:inline-block;">
c1d
</div>
</div>
</body>
If you want all in same line without space and without using flex then you can add css display:inline; in this div
<div style="width:70%;border:1px solid black;display:inline;">
I have a problem with my divs. I created 3 divs with same classes. I want to create 3 cards with avatar and personal info on them, but these divs are "sticked". I want to make a gap between them (from right side), but when I make padding-right, there's no gap, but more background color. How can I separate these three divs without changing width?
Here's my code:
<div id="team">
<div class="id">
<div class="idContent">
<!--Here is content in a frame!-->
</div>
</div>
<div class="id">
<div class="idContent">
<!--Here is content in a frame!-->
</div>
</div>
<div class="id">
<div class="idContent">
<!--Here is content in a frame!-->
</div>
</div>
</div>
http://codepen.io/anon/pen/PbMBPy
Thanks for help!
You have to use margin-right: 25px; instead of padding-right: 25px;
use margin-right instead of padding-right
What i have is sidebar and on right side i have content. What i want is that both sides are in container but that are both full width . This is my demo: https://jsfiddle.net/DTcHh/19067/
So i want that left background color start from beging of page but text inside is in container and also i want that background color of right content go to the end of page but text is in container. Any suggestion?
<div class="container">
<div class="col-md-3">
<div class="left_sidebar">
menu
</div>
</div>
<div class="col-md-9">
<div class="right-content">
content
</div>
</div>
</div>
Its simple, wrap the colored containers above the container class and use two different containers:
<div class="left_sidebar">
<div class="container">
<div class="col-md-3">
menu
</div>
</div>
</div>
<div class="right-content">
<div class="container">
<div class="col-md-9">
content
</div>
</div>
</div>
Here is a working Fiddle
REMOVED other edits because EDIT 3 should do the trick best
EDIT 3
Here it is, that must be it for sure now. The trick is done with a linear gradientand a custom container above your bootstrap container.
See Fiddle
What you're asking, is by default impossible, since the .container class has a set width on different viewports and it is also horizontally "centerised" by margin:auto.
To achieve what you are trying you will have to follow a different "logic".
I would propose something like this:
<div class="left-sidebar col-md-3">
<div class="sidebar-menu col-xs-6 pull-right">
menu
</div>
</div>
<div class="right-content col-md-9>
<div class="content-text col-xs-10>
content
</div>
</div>
I propse this solution in order to stay in the same "flow" as your code. You could also, just play with paddings, which makes more sense.
use class row before col div
<div class="row">
<div class="col-md6"></div>
<div class="col-md-6"><div>
</div>
How can I ajdust container to make it full width?
This is the space that's container taking right now, but I want it to have full width (like website).
I have created it like this
<div class="container-fluid container-va">
<div class="row row-dk">
<div class="col-md-12">
<p>SOME TEXT</p>
</div>
</div>
</div>
I have tried adjusting css like:
.container-va {
width: 100%;
}
but it doesn't work... Help please!
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>