Image gets really small when I put it in a column - html

My png images gets really small when I put them inside a column in a row. However they are fine when there is not column but then they do not appear as a row and appear one above the other. I have no idea what may be causing the problem.
What I want to do: I want them to appear like this.
<div class="container">
<div class="row" id="parent">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block left">
<div class="heading">
<h3> Simple to Enjoy </h3>
</div>
<div class="inside">
<div class="row">
<div class=""> <!--These Images!!!-->
<img class="img img-responsive img-sec-4" src="images\home_section_4_free_ride.png">
<p>Free Rides </p>
</div>
<div class="">
<img class="img img-responsive img-sec-4" src="images\home_section_4_membership.png">
<p>Free XXX Membership </p>
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block center">
<div class="heading">
<h3> Simple to Earn </h3>
</div>
<div class="inside">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block right">
<div class="heading">
<h3> Simple to Save </h3>
</div>
<div class="inside">
</div>
</div>
</div>
</div>
Sorry for bad english and indent.
Here is my CSS:
#parent {
text-align:center;
height:400px;
width:100%;
}
.center {
margin:auto
}
.left {
margin:auto auto auto 0;
}
.right {
margin:auto 0 auto auto;
}
.img-sec-4 {
height: auto;
width: auto;
}
EDIT:
Here is the screenshot of my result:
(The red highlighted area is where the problem is)

simply add class col-xs-6 to the div wrapping those images (each one)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" id="parent">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block left">
<div class="heading">
<h3> Simple to Enjoy </h3>
</div>
<div class="inside">
<div class="row">
<div class="col-xs-6">
<!--These Images!!!-->
<img class="img img-responsive img-sec-4" src="//lorempixel.com/200/200">
<p>Free Rides</p>
</div>
<div class="col-xs-6">
<img class="img img-responsive img-sec-4" src="//lorempixel.com/200/200">
<p>Free XXX Membership</p>
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block center">
<div class="heading">
<h3> Simple to Earn </h3>
</div>
<div class="inside">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block right">
<div class="heading">
<h3> Simple to Save </h3>
</div>
<div class="inside">
</div>
</div>
</div>
</div>

Related

3 column layout but 1 under the 2

How would i do something like this? http://jsfiddle.net/BxaNN/369/
but with the top column in the center top?
NOTE: this is not my code
<div class="container">
<div class="row">
<div id="content" class="col-lg-4 col-lg-push-4 col-sm-12 ">
<h2></h2>
<p></p>
</div>
<div id="sidebar-left" class="col-lg-4 col-sm-6 col-lg-pull-4">
<h2></h2>
<p></p>
</div>
<div id="sidebar-right" class="col-lg-4 col-sm-6">
<h2></h2>
<p></p>
</div>
</div>
</div>
The bootstrap classes you have already does this for you. You just need to reference the bootstrap cdn. You could also, center the text to make it pretty. check out the grid system here: Bootstrap Resource
.container {
text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div id="content" class="col-lg-4 col-lg-push-4 col-sm-12 ">
<h2>1</h2>
<p>1</p>
</div>
<div id="sidebar-left" class="col-lg-4 col-sm-6 col-lg-pull-4">
<h2>2</h2>
<p>2</p>
</div>
<div id="sidebar-right" class="col-lg-4 col-sm-6">
<h2>3</h2>
<p>4</p>
</div>
</div>
</div>

Horizontally aligning elements in a div

I am trying to align three elements in a div in such a way that the image is inline with h1 while the p tag is beneath the h1 tag.
.valign{
position:relative;
top: 50%;
transform: translateY(-50%);
vertical-align: middle;
}
.banner{
position: relative;
height: 100vh;
width:100vw;
background: #eee;
}
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="banner" style="display:flex">
<div class="container">
<div class="valign">
<img src="img/logo.png" style="height: 150px;width: 150px">
<h1>Anirudh Sharma</h1>
<p>This is my portfolio</p>
</div>
</div>
</div>
</div>
</div>
Here is an image for reference:
This is how the elements must be arranged
This is how the elements are looking right now:
This is a screenshot of the webpage
Any help would be appreciated.
Try this
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="banner" style="display:flex">
<div class="container">
<div class="valign">
<div class="float-xs-left float-sm-left float-md-left">
<img src="img/logo.png"></div>
<div class="float-xs-left float-sm-left float-md-left">
<h1>Anirudh Sharma</h1>
<p>This is my portfolio</p></div>
</div>
</div>
</div>
</div>
</div>
the class value for float is based on bootstrap 4
Try this html
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="banner" style="display:flex">
<div class="container">
<div class="valign">
<div style="float:left">
<img src="img/logo.png" style="height: 150px;width: 150px"></div>
<div style="float:left">
<h1>Anirudh Sharma</h1>
<p>This is my portfolio</p></div>
</div>
</div>
</div>
</div>
</div>
Use floats, Bootstrap provides pull-left and pull-right helper classes, so use it on the two parts of your layout to have them side-by-by.
You need to add some margins here and there to make it look good.
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="banner" style="display:flex">
<div class="container">
<div class="valign">
<div class="row">
<div class="pull-left">
<img src="img/logo.png" style="height: 150px;width: 150px">
</div>
<div class="pull-left">
<h1>Anirudh Sharma</h1>
<p>This is my portfolio</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/n8o1w3cq/

Responsive breakpoint breaks incorrect

I have a problem with a landingpage that I am building. When the page hits the breakpoint: 991px, the book picture is dipasering under the banner.
Is there someone who can help me solve this, and see through the developer tools if it is something to do with the CSS?
Link to page.
The Html I have is here:
<div class="background-image" #Html.Raw(topImageStyling)>
<div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 img logo img-responsive">
</div>
</div>
</div>
<div class="book container col-sm-12 hidden-sm hidden-xs col-md-3 col-lg-4">
<img src="
</div>
<div class="container col-sm-12 col-md-9 col-lg-8">
#if (!string.IsNullOrEmpty(headerText))
{
if (pageAlias == "Blog")
{
<h1 class="header-xl center">
#Html.Raw(headerText)
</h1>
}
else
{
<p class="header-xl center">
#Html.Raw(headerText)
</p>
}
}
#if (CurrentPage.HasValue("imageTeaserText"))
{
<p class="sub-header center">
#Html.Raw(CurrentPage.imageTeaserText)
</p>
}
</div>
<div class="col-sm-12 visible-sm visible-xs">
<img src="
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 main-content" id="main-content">
<div class="row">
<div class="col-lg-12">
#CurrentPage.GetGridHtml("inovoGrid")
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In landingpage.css line number 804 position: relative; invisible it.
Solve if we put another class in
<div class="col-sm-12 visible-sm visible-xs new-class"> .... </div>
.new-class {
position:inherit !important
}
Hope it will help you.

How to display two cards horizontally with equal height using bootstrap

Im using bootstrap. Need to place two cards of equal row-height. Each card is placed inside col-xs-6. Card contains text and buttons. When i use col-height col-xs-6 card both the card join together. Could be please help me on this.
<div class="row">
<div class="row-height">
<div class="col-height col-middle col-xs-6 card">
<div class="row">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Login</h3>
</div>
<div class="col-xs-12 text-center">
Login!
</div>
</div>
</div>
<div class="col-height col-middle col-xs-6 card">
<div class="row">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Sign UP</h3>
</div>
<div class="col-xs-12 text-center">
Sign Up!
</div>
</div>
</div>
</div>
</div>
Is that you want?
.row should be wrapped into .container
.card {
border: 1px solid black;
margin: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row-height">
<div class="row">
<div class="col-height col-middle col-xs-5 pull-left card">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Login</h3>
</div>
<div class="col-xs-12 text-center">
Login!
</div>
</div>
<div class="col-height col-middle col-xs-5 pull-right card">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Sign UP</h3>
</div>
<div class="col-xs-12 text-center">
Sign Up!
</div>
</div>
</div>
</div>
</div>

How to set fixed space between columns with different height with Bootstrap 3?

I'm trying to have a nice grid of items on my site using Bootstrap 3 grid, while each item has a different height.
The problem is that i get different spaces between the items.
Forgive me for the long code, I had to write 6 items in order to show the problem. Once you read the first you'll notice it repeats but with different length due to different item description.
<div class="container">
<div class="row-fluid">
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor1</p>
<p class="boxDescription">Description of vendor1</p>
</div>
</div>
</div>
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor2</p>
<p class="boxDescription">Description of vendor2 which is longer and the layout takes more than one line...</p>
</div>
</div>
</div>
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor3</p>
<p class="boxDescription">Description of vendor3</p>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor4</p>
<p class="boxDescription">Description of vendor4</p>
</div>
</div>
</div>
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor5</p>
<p class="boxDescription">Description of vendor5</p>
</div>
</div>
</div>
<div class="col col-sm-6 col-md-4">
<div class="result-padder">
<div class="box">
<p class="boxTitle">vendor6</p>
<p class="boxDescription">Description of vendor6</p>
</div>
</div>
</div>
</div>
</div>
The result is that the first row is set right but the second row comes out bad.
I want the spaces between all items to be the same, making it much more fluid.
Note: the heights of the items change all the time, so it has to work with all set of heights.
Take a look at it, you need to resize the result window to max in order to see the problem: http://jsfiddle.net/asafusan/09egpzkj/6/
How can I fix it?
I'm a rookie in programing so please explain extensively.
Thanks
i happen some time if you put less data then other so it become some irregular shape,
for this you have to give a fix height to your div, but it cause one issue that is it will be in same height in mobile or tablet as your applied,
so for this you have use media queries for mobile version
i am declaring another class that is grid, and give static height
Your code looks good, I would use a visual border to see the code. I created a mockup for you here
[http://www.bootply.com/Pzn15AfwyA][1]
.container {
border: 1px solid blue;
}
.result-padder {
border: 1px solid red;
margin-bottom: 10px;
}
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
</div><!-- .row 1 -->
<div class="row">
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="result-padder">
<h1>vendor1</h1>
<p>Description of vendor1</p>
</div>
</div>
</div><!-- .row 2 -->
</div>
</div>
[1]: http://www.bootply.com/Pzn15AfwyA