I am using following div to display Image, Description, Content. The height of the div is fixed 416px. This is working fine. Till now in mobile device we were showing single column. As per our current requirement we would like to display three rows in mobile device.
I modified
<div class="categoryProduct col-lg-3 col-md-4 col-sm-5 col-xs-12" >
to
<div class="categoryProduct col-lg-3 col-md-4 col-sm-5 col-xs-6" > or
<div class="categoryProduct col-lg-3 col-md-4 col-sm-5 col-xs-4" >
I noticed that since the height was fixed to 416 there is lot of gap between rows when we shrink the size. How can i reset the size as per device.
Following is the div tag code
<div class="categoryProduct col-lg-3 col-md-4 col-sm-5 col-xs-12" >
<div class="slides">
<img src="src" width="222" height="296" />
</div>
<div class="productText" style="border-top: 1px solid #f0f0f0;">
<p class="product-list-designer">Designer</p>
<p class="product-list-title">Title</p>
<p class="product-list-price">Text</p>
</div>
</div>
Following is the css code
div.categoryProduct {
background-color: transparent;
float: left;
height: 418px;
padding: 5px 15px 20px;
}
div.categoryProduct div.productImage {
padding-bottom: 3px;
border-bottom: 1px solid #f0f0f0;
}
div.categoryProduct div.productImage a {
display: block;
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0;
}
I tried adding custom height nothing worked. If i try to remove height setting, the column alignment is lost and results page looks very untidy. I tried adding min-height for the div column.
I am lost with col-xs part rest all rendering is happening ok.
Related
I get one problem with some css and bootstrap, i still not find solution
the problem is div form content not reponsive by its parent div and always move div content outside of parent div and not adjust by parent div size when i change screen size for multiple devices.
I have one dive classs wrapper and inside it there are one nav and one div content
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar" >
</nav>
<div id="content">
<div class="row main">
<div class="col-lg-3">
</div>
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 trade">
</div>
<div class="col-lg-3">
</div>
</div>
</div>
in div content , there are one row , inside row , there are 3 div columns , in middle column , there one row that has problem .
<div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 trade">
<div class="tab_container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<form>
<div class="input-wrapper">
<div class="prefix">Price</div>
<input type="number" id="price" placeholder="Price">
<div type="text" class="css">Last</div>
<div class="suffix">USD</div>
</div>
</form>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<form>
<div class="input-wrapper">
<div class="prefix">Price</div>
<input type="number" id="price" placeholder="Price">
<div type="text" class="css">Last</div>
<div class="suffix">USD</div>
</div>
</form>
</div>
</div>
</div>
</div>
its css is
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#content{
width: 100%;
padding: 14px;
min-height: 100vh;
}
.tab_container{
padding:1px;
display:none;
}
form{
background-color: #ffffff;
border-radius: 10px;
}
.input-wrapper{
display: flex;
background-color: #222020;
border: 1px solid #7b7b93;
margin: 10px 0;
border-radius: 5px;
}
.prefix,
.suffix{
color: #7b7b93;
}
.prefix{
padding: 3px;
width:50px;
}
.suffix{
width:60px;
padding:2px 0px 0px 8px;
}
.css,.cdd{
padding:2px ;
color:#f5f5f8;
}
input{
background-color: transparent;
text-align: right;
color: #f5f5f8;
width:110px;
}
here is desktop screen size
here is small laptop size
div content not responsive and move outside
here is tablet view
here is mobile view
it not adjust by parent div size ...
I first think it may be bootstrap grid problem , i changed for various device columns , not ok .
may be due to form responsive problem , this form not change when screen size change .
my experience too low in frontend , please help me , How can i fix that
Try to switch up the sizing of your bootstrap columns and div classes.
For example, you have applied a 60px width to "suffix". On a smaller device that displays less pixels on the screen, it could struggle to show 60px of "suffix" content whilst also trying to display the rest of the page.
Suffix should really be set to % rather than px. You would apply px to the column itself then define how much % suffix should take up inside the column.
I'm not an expert with grids and bootstrap and run in to similar issues, but I recommend you try out Webflow - it's free to use and allows you to generate these grids yourself, responsive to all screen sizes. You can then take the code from Webflow and apply it within your own website you're having problems with.
Suppose I had a table of elements with varying widths. Is it possible using just Bootstrap/css to break all rows when one row is too large to fit? For example:
<div class="container-fluid">
<div class="row">
<div class="col">ShortLabel</div>
<div class="col-xs-auto num">1111111111</div>
</div>
<div class="row">
<div class="col">SomeReallyReallyBigHugeMcLargeLooooooooongLabel</div>
<div class="col-xs-auto num">2222222222</div>
</div>
<div class="row">
<div class="col">ShortLabel2</div>
<div class="col-xs-auto num">3333333333</div>
</div>
</div>
.row {
margin 20px;
}
.col {
border: solid 1px black;
padding: 10px;
}
.col-xs-auto {
border: solid 1px black;
padding: 10px;
}
.num {
text-align: right;
}
Ideally when the size of the container becomes too small to fit the second row, I want to maintain the behavior where it breaks the row into two lines, but have it happen for all rows simultaneously. See https://jsfiddle.net/wt6dLav4/2/
I need to achieve an even distribution of pills inside a div for all 4 major screen sizes using flexbox. The smaller the screen size less divs are to be fit to a single row. The rest of the divs should be placed on the next row. The number of divs to distribute is not known beforehand. Each pill is going to receive a word inside so a min guaranteed width is needed.
Here's a picture of what the outcome for various screen sizes might look like for a single row. How do I go about doing smth like this?
something like this:
.row {
display: flex;
flex-flow: row wrap;
list-style: none;
padding-bottom: 12px;
}
.pill {
min-width: 50px;
max-width: 200px;
margin-right: 12px;
margin-bottom: 12px;
text-align: center;
padding: 6px;
border: 2px solid;
border-radius: 50%;
flex: 1 0 0;
}
.pill:last-child {
margin-right: 0;
}
<div class="row">
<div class="pill">foo</div>
<div class="pill">bar</div>
<div class="pill">foobar</div>
<div class="pill">foo</div>
<div class="pill">bar</div>
<div class="pill">foo</div>
<div class="pill">bar</div>
<div class="pill">foobar</div>
<div class="pill">foo</div>
<div class="pill">bar</div>
</div>
<div class="row">
<div class="pill">foo</div>
<div class="pill">bar</div>
<div class="pill">foobar</div>
<div class="pill">foo</div>
<div class="pill">bar</div>
</div>
<div class="row">
<div class="pill">foo</div>
<div class="pill">bar</div>
<div class="pill">foobar</div>
</div>
<div class="row">
<div class="pill">foo</div>
</div>
You can adjust the min and max width of the pill elements according to your needs.
I am trying to understand Bootstrap, however - I can't figure out why this ain't working on xs. I have a total of 12 columns, but it still puts the col-xs-11 beneath the col-xs-1.
CSS:
[class^="col-"] {
height: 20px;
background-color: #563d7c;
background-color: rgba(86,61,124,.35) !important;
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.6);
}
.row {
margin-top: 15px;
margin-bottom: 15px;
}
HTML:
<div class="container">
<div class="row">
<div class="col-xs-1">1</div>
<div class="col-xs-11">11</div>
</div>
<div class="row">
<div class="col-xs-2">2</div>
<div class="col-xs-8">8</div>
<div class="col-xs-2">2</div>
</div>
</div>
Result on xs:
with border-css
without border-css
Could someone tell me what I am missing here? The 2-8-2 is working properly, but the 1-11 not.
I am working on the latest version of Firefox + I am using Bootstrap version 3, not 4.
Edit 1:
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
What's happening is that your col-xs-1 column is reaching its minimum width based on its padding and content, and can't go any smaller. This means the col-xs-11 doesn't have enough space and is being pushed to the next line.
The problem is that the cols have 15px left & right padding so even if it was empty you col can't go any smaller than 30px.
Usually you would redistribute the cols on the smallest screen to allocate more space for the smallest cols, e.g.
<div class="row">
<div class="col-xs-2 col-s-1">1</div>
<div class="col-xs-10 col-s-11">11</div>
</div>
However if that isn't an option, you could use media queries to adjust the padding for smaller screens, e.g.:
[class^="col-"] {
height: 20px;
background-color: #563d7c;
background-color: rgba(86,61,124,.35) !important;
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.6);
}
.row {
margin-top: 15px;
margin-bottom: 15px;
}
#media (max-width: 400px){
[class^="col-"] {
padding-left:5px;
padding-right:5px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-2 col-s-1">1</div>
<div class="col-xs-10 col-s-11">11</div>
</div>
<div class="row">
<div class="col-xs-1">1</div>
<div class="col-xs-11">11</div>
</div>
<div class="row">
<div class="col-xs-2">2</div>
<div class="col-xs-8">8</div>
<div class="col-xs-2">2</div>
</div>
</div>
(Note, the media query isn't working in the snippet for some reason, but this code does work in a standalone html page!)
I'm having a small HTML/CSS Bootstrap problem here. Basically I have a span4 with a picture on the left side then a span8 with a paragraph describing the picture on the right side.
<div class="container">
<div class="cent text-center">
<div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
<div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
<div class="span8 section">
<h3 align="center">Title</h3>
<div class="team">
<p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
</div><!---team END--->
</div><!---span8--->
</div><!---Row END--->
</div><!----cent END--->
</div><!--container END-->
.cent{
text-align:center;
margin:auto;
width:auto;
}
.section {
padding-top:20px;
margin:auto;
}
.team {
text-align:center;
margin:auto;
max-width:600px;!important
padding-left:20px;!important
padding-right:20px;!important
}
.profile {
max-width:200px;
text-align:center;
margin:auto;
padding-top:10px;
}
.pro {
padding-left:100px;!important
}
.box {
background:#FFF;
border:1px solid #CCC;
box-shadow: 0px 1px 1px #CCC;
padding: 0px 20px 20px 0px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
min-height:220px;
}
Now the only thing I want to do is invert the code so that the picture is now on the left and the description on the right but it seems when I do that the span4 does not go on the side of the span8 but instead under it.
<div class="container">
<div class="cent text-center">
<div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
<div class="span8 section">
<h3 align="center">Title</h3>
<div class="team">
<p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
<div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
</div><!---team END--->
</div><!---span8--->
</div><!---Row END--->
</div><!----cent END--->
</div><!--container END-->
You have a lot of unnecessary code in there. Maybe this is not exactly what you are looking for but instead of trying to figure out the code you provided, I just started fresh and provided a much cleaner way of doing what you want to accomplish.
You should modify your question as you ask for what already is. At the top you say: "basically I have a span4 with a picture on the left side then a span8 with a paragraph describing the picture on the right side." but then down below you say "now the only thing I want to do is invert the code so that the picture is now on the left and the description on the rite but it seems when I do that the span4 does not go on the side of the span8 but instead under it."
the key is to use the "float" property.
here is the html:
<div class="container">
<div class="span4">
<img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" />
</div>
<div class="span8">
<div class="span8-text">
<h3>Title</h3>
<p>this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
</div>
</div>
</div>
and the css:
.container {
position: relative;
clear: both;
text-align: center;
}
.span4 {
float: right;
width: 200px;
}
.span8 {
position: relative;
float: left;
width: 350px;
}
here is the jsfiddle: http://jsfiddle.net/h69Bh/
Use CSS float property span8 float:left and span4 float:right
Take a look DEMO
This is it:
add this in head section below all links to bootstrap cdn :
<style>
img{
width: 100%;
height: 100%;
}
</style>
and this in body tag:
<div class="container img-responsive">
<div class="row">
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
description goes here
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<img src="1.jpg">
</div>
</div>
<div>
check responsiveness:https://jsfiddle.net/sugandhnikhil/c0zoq8e1/1/