I want create this.
What I have so far is this, but it is not responsive as screen size changes. It stays on specific width, that is why i am thinking to replace this with image
<div class="container-fluid">
<div class="betn-footer">
</div>
</div>
.betn-footer{
background-color:#f4f3f3;
height:50px;
text-align:center;
position:absolute;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
margin-top:-20px;
margin-left:65px;
width:973.88px;
box-shadow: 0 21px 30px -10px #080808;
}
Tell me if there is any other option to do this. Thank you!
Just remove your fixed widths and margins:
.container-fluid { margin-bottom: 2em; }
.betn-footer {
background-color: #f4f3f3;
height: 50px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
box-shadow: 0 21px 30px -10px #080808;
}
<div class="container-fluid" style="width:200px;">
<div class="betn-footer"></div>
</div>
<div class="container-fluid" style="width:500px;">
<div class="betn-footer"></div>
</div>
<div class="container-fluid" style="width:1000px;">
<div class="betn-footer"></div>
</div>
You should not use margin-left and instead center the footer / your content with margin: 0 auto. Then you can set your footer width to a flexible width via using %
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">
it will always display a picture in the center of the page.
Related
I have a problem with the size of the cards. On the Desktop side are ok, but on a lower resolution begin to be no longer equal. How should I proceed in this situation? I'm not an expert in css, I work on the backend but I would like in the future to have a correct solution how I could solve something like.
html
<div class="proditem">
%PROMO%
<div class="proditem_cover">
%COVER%
%promo_period%
</div>
<h3 class="protitem_title">
%TITLE%
</h3>
<div class="protitem_price">
%PRICE% eur %price_euro%
</div>
<div class="detalils"><a class="button1" href="%LINK%">Details</a></div>
</div>
a {
text-decoration: none;
color: inherit;
font-size:16px;}
.list_prod .proditem {
height: auto;
max-height: initial;
float: none;
display: inline-block;
margin-bottom: 10px;
vertical-align: top;
transition: 0.3s;
width: 40%;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
padding: 2px 16px;
border: 0 !important;
border-radius: 1rem;
.proditem img {
width: 170px;
height: 170px;
max-width: 10vw;
max-height: 10vw;
/* object-fit: cover; */
}
image
As far as I can see, they decrease in size because they don't have the same information, depending on the text and image if they're not equal. How can I make them equal regardless of the information they have?
Maybe you can try to create wrapper class like :
<div style="width:100%; height:auto; display:flex; justify-content:flex-start;" class="wrapper">
<div style="width:50%; height:100%; " class="content"> <div/>
<div style="width:50%; height:100%; class="content"> <div/>
<div/>
This just a simple example to give you a some styling or aligning tricks. Try and write me if its not-proper code for you.
How to center profile image depending of screen size using bootstrap?
Here what I have done so far:
html:
<div class="col-md-12">
<div class="col-md-2 col-xs-12">
<div class="deck">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="list image" width="160">
</div>
<div class="title-users-list-profile">
<img class="comments-author" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS_9j6SU0VDO8PQtsal3pvO2Xrp4eu2IbOYQVjLUDtRNQmn6PIBqDw3B4o" alt="image picture"/>
</div>
</div>
</div>
CSS:
.deck{
display: flex;
}
.comments-author {
border-radius: 50%;
border: 6px solid #fff;
margin: 5px;
box-shadow: 0 0 0 5px rgba(0,0,0,.2);
}
.title-users-list-profile img{
position: relative;
width: 50px;
height: 50px;
top: -35px;
left:50px;
margin-top: 8px;
margin-bottom: -25px;
}
https://jsfiddle.net/tzc2gdcf/
You can use flex box to align image.
Check this guide : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
and using #media to specific rules to single media size
If you are only wanting to have the image center based the current dimension you could look at adding a media query. Will change css rules based on pixel width/etc. https://getbootstrap.com/docs/3.3/css/
My bootstrap grid container is not full width. See image:
The container is only the bit at the top.
here is the code:
HTML:
<div class="container" style="width:100%">
<div id="my-row" class="row" style="width:100%">
<div class="col-sm-4 panel" style="background-color: red">
<h4 class="white light" style="margin-top:0px; padding: 20px 0px 0px 20px; float: left;">WHAT WE GROW</h4>
</div>
<div class="col-sm-4 panel " style="background-color: yellow ">
</div>
<div class="col-sm-4 panel " style="background-color: blue ">
<h4 class="white light " style="margin-top:0px; padding: 20px 20px 0px 0px; float: right; color: pink; ">SIGN UP FREE</h4>
</div>
</div>
</div>
CSS:
#my-row {
display: table;
height:20%;
}
#my-row .panel {
float: none;
display: table-cell;
vertical-align: top;
}
How do I make the container go the full width?
First of all use: .container-fluid for full width, no need to add style="width:100%" if you use it.
Second, remove margin and add full width to row:
#my-row {
display: table;
height:20%;
width: 100%;
margin: 0;
}
Remove padding from container-fluid:
.no-padding {
padding: 0 !important;
}
Answer:
<div class="container-fluid no-padding">
</div>
DEMO
You just have to remove width:100% from the #my-row element.
DEMO
Instead of using the container class you should use the container-fluid class.
This gives the div 100% width.
If you really want to use container you can add !important after setting the width to 100%. This will override the normal bootstrap styles. But I do not recommend this.
Add this css below to the .container class..
padding-left: 0;
padding-right: 0;
Add this css below to the #my-row id..
margin-left: 0;
margin-right: 0;
View my live demo on jsfiddle
i got problem with setting my layout right, elemnts doesn't align way i want to and i'm running out of ideas, or repeat same misteakes.
There is wrapper(green) thats fits its size to page width, container that i want to center (blue) that shrinks or expands depending on page width and then rectangular elements(brown) that i want to center inside container (blue) and allow them to rearrange according to width of container (size and amount is not constant)
HTML
<div id="tiles_wrap">
<div id="tiles">
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaab</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaav</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaaa</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">bbbv</div>
</div>
</div>
</div>
</div>
CSS
#tiles_wrap {
width: 100%;
display:block;
position: relative;
background-color: rgba(0, 255, 0, 0.3);
float: left;
padding-left:25%;
padding-right:25%;
}
#tiles {
margin: 0 auto;
height: 100%;
display:block;
float: center;
Padding: 40px;
line-height: 0.7em;
font-size: 12px;
background-color: rgba(0, 0, 255, 0.3);
}
.tilewrap {
padding: 5px;
float: left;
}
.tilebg {
height: 55px;
width: 70px;
background-color: brown;
display:block;
position: relative;
float:left;
}
.ribbon {
color: #fff;
padding:2px;
background-color: rgba(255, 0, 0, 0.5);
display:block;
position: absolute;
z-ndex: 22;
}
Thanks in advance fr all help!
You can't use float for this, there is no float: center; so that's one of your problems. Also, absolutely positioning elements tends to fix them to a particular spot, so they're not very good for centering and re-arranging depending on width of container.
You can, however, use display: inline-block; along with text-align: center; to do what you're after.
Also, don't forget that if you set the width of an object to 100%, then add 25% padding on the left and right sides, you are making the total width of that object 150% of its parent (in the normal content-box model.)
http://jsfiddle.net/UQ34L/1/
To get the blue to center, you need to set a width for #tiles, then remove the padding from #tiles_wrap. There is no such thing as float:center, so that is ignored.
Try this
#tiles_wrap {
width: 100%;
display: block;
background-color: rgba(0, 255, 0, 0.3);
float: left;
}
#tiles {
width: 65%;
margin: 0 auto;
Padding: 40px;
font-size: 12px;
background-color: rgba(0, 0, 255, 0.3);}
Try this
JSFiddle
As suggested by others, I've added display: inline-block to get the divs to sit alongside each other. As well as this, I added a wrapper div with id="wrapper" and applied a text-align: center to have the tiles align in the center.
Also I added a div with id="tiles_left" for the left margin div with a width of 30% and removed your "tiles_wrap" div as it is not needed with the changes I made. The "tiles" div with a width of 70%
<div id="tiles_left">
hello
</div>
<div id="tiles">
<div id="wrapper">
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaab</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaav</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaaa</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">bbbv</div>
</div>
</div>
</div>
New to using bootstrap, and am having trouble with a div rectangle that I would like to stretch full-width across the top of the page (much like the SO grey bar at the top). I have tried sizing to 100% and resetting margins, but nothing is working. I also tried taking the rectangle out of the container div, but then it disappears :(. I then tried making the rectangle a well instead, but that doesn't seem to want to let me set its height to 20px.
I've tried most of the rearranging-of-divs or using the !important as suggested on SO, but, for whatever reason, the divs aren't cooperating. I just want a blue bar to stretch across the top of the page, as per my bosses request :P
I'm a bit frustrated, and wonder if anyone can help me?
<body>
<div class="container">
<div class="rectangle span12"></div>
<div class="container">
<div class="row-fluid">
<span class="span12">
<img src="images/one-pager-blogcta-08.png" class="pull-right image">
</span>
</div>
</div>
and the CSS
body {
padding-left: 0;
padding-right: 0;
}
/* Set floating dom-heading margins to 0 */
[class*="dom-heading"] {
margin: 0;
}
.container .rectangle {
background: #1f2f5f;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
border-radius: 0px;
margin-left: 0px !important;
border: none;
height: 20px;
width:100%;
}
Site: intervalmed.com
Html:
<body>
<div class="navbar rectangle">
<div class="container-fluid">
<!--menu items-->
</div>
</div> <!-- .navbar -->
<div class="container">
<div class="container">
<div class="row-fluid">
<span class="span12">
<img src="images/one-pager-blogcta-08.png" class="pull-right image">
</span>
</div>
</div>
CSS:
.rectangle {
background: #1f2f5f;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
border-radius: 0px;
margin-left: 0px !important;
border: none;
height: 20px;
width:100%;
}
If you just want the bar on top, you can just set a border to <body>
body {
border-top: solid 20px #1f2f5f;
}
If you want an actual <div> with 100% of the document's width, then it should be outside the container, since the container is the one that wraps things with max-width
So just move your div outside container and set the height explicitly in your CSS (<div> elements will always fill it's parents width)
HTML
<body>
<div class="rectangle"></div>
<!-- THE REST OF YOUR PAGE -->
</body>
CSS
.rectangle {
background: #1f2f5f;
height: 20px;
}