Resize Image Div with respect text div next to it - html

I have design which needs and image and text align next to each other in div(using col-md-6)i need height image to be resize wrt text div.on tablet and mobile it has be 12 column layout
Here is my html code
<div class="row fixed-height">
<div class="col-md-6 full-screen-col img-head"></div><!--col for imag row ends here-->
<div class="col-md-6 cont-bg full-screen-col">
<div class="description_container">
<h1>JOIN OUR TEAM</h1>
<p>We except a lot from our team members, and we give a lot in return- like ongoing training, professional growth
opportunities and competitive benefits. if Gaspar's sounds like your kind of workplace, we'd love to hear from you</p>
</div>
</div><!--container for text details-->
</div><!--row fors slide container -->
Here is css used.
.fixed-height{
height: 300px;
overflow-y: hidden;
}
.img-head{
background-image: url(../images/Gaspars-Construction-Employee-Photo-1024x683.jpg);
background-size: cover;
height: 100%;
}
Little help is much appreciated. Thanks in advance

Add this,
<div class="row fixed-height">
<div class="col-md-6 col-sm-6 full-screen-col img-head"></div><!--col for imag row ends here-->
<div class="col-md-6 col-sm-6 cont-bg full-screen-col">
<div class="description_container">
<h1>JOIN OUR TEAM</h1>
<p>We except a lot from our team members, and we give a lot in return- like ongoing training, professional growth
opportunities and competitive benefits. if Gaspar's sounds like your kind of workplace, we'd love to hear from you</p>
</div>
</div><!--container for text details-->
</div><!--row fors slide container -->

This should work:
HTML
<div class="row fixed-height">
<div class="col-md-6 full-screen-col img-head">
<img src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/308/308116-bigthumbnail.jpg"/>
</div><!--col for imag row ends here-->
<div class="col-md-6 cont-bg full-screen-col">
<div class="description_container">
<h1>JOIN OUR TEAM</h1>
<p>We except a lot from our team members, and we give a lot in return- like ongoing training, professional growth opportunities and competitive benefits. if Gaspar's sounds like your kind of workplace, we'd love to hear from you</p>
</div>
</div><!--container for text details-->
</div><!--row fors slide container -->
CSS
.img-head{
float: left;
}

Related

How to vertically stack bootstrap elements

I've got a header, paragraph and image, and I want them aligned with the header above the paragraph, and the image to the right. When I run it I get the 3 elements in a horizontal row
<div class="container">
<div class="row">
<h1 class="col-xs-3 paddingtop">Joselin</h1>
<p class="col-xs-3 bio">
Growing up in the Caribbean, as a young girl Joselin worked as a
coffee bean picker, giving her a profound insight into using only
the freshest, and highest quality coffee beans.
</p>
<img class="col-xs-6 meetus" src="meetus.jpeg">
</div>
</div>
If the h1 should be above the p and the img, the best thing would be to put it in its own row: <div class="row">. Then put the p and the img in a row right under that.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<h1 class="paddingtop">Joselin</h1>
<p class="bio">
Growing up in the Caribbean, as a young girl Joselin worked as a
coffee bean picker, giving her a profound insight into using only
the freshest, and highest quality coffee beans.
</p>
</div>
<div class="col-xs-6">
<img class="col-xs-6 meetus" src="meetus.jpeg">
</div>
</div>
</div>
You can then play around with the column sizes (`class="col-xs-3").

how to fit both text and image in a row using 2 col-md-6

<style>
.backgroundcolor1 {
background-color: #567892;
}
</style>
<section>
<div class="row" align="center">
<div class="col-md-12 backgroundcolor1">
<div class="col-md-6 col-sm-6">
<div class="col-md-10 col-lg-offset-1 ">
<br>
<img src="assets/images/SPA/Icons/facials.png" class="icons" alt=""><br>
<h3>FACIALS</h3>
<p align="justify">Have you ever treated to a facial?<br> Facial treatments feel good, offering soothing relaxation, according to Day Spas. Facial massage treatments increase circulation and the flow of blood, and they include a variety of cremes,
aromatherapy and oils that moisturize the skin, smell good, and relieve stress as well as encourage peace of mind and contentment</p>
</div>
</div>
<div class="col-md-6 col-sm-6 textbox">
<img src="assets/images/SPA/facial.jpg" style="height: 100%; width: 100%; object-fit: contain;opacity:0.9;padding:0;margin:0; " alt="">
<figcaption><br><br><br>
<h3>Facials</h3>
</figcaption>
[enter image description here][1]
</div>
</div>
</div>
</section>
I am getting proper image fitting to text.. after i start resizing my image start reducing and there will be gap like the below image. i don't want it to happen for all the devices. my entire site is in this manner only. i don't want that extra background showing at the right side of the image.can anybody help me to solve this problem.
you can create row inside col-md-6 and define column that you want like
<div class="col-md-6 col-sm-6 textbox">
<div class="row">
<div class="col-md-7 col-sm-6">
<img src="">
</div>
<div class="col-md-5 col-sm-6">
<p>Text goes here.....</p>
<p>ddescription goes here</p>
</div>
</div>
</div>
you can print text first and image in second and change col length with your need. I hope this is what you need if not please try to clarify your question.
Please check this
.backgroundcolor1 {
background-color: #567892;
}
.back_imag{position:absolute !important; background:url(http://via.placeholder.com/500x400) no-repeat; background-size:cover; background-position:center center; left:0px; top:0px; bottom:0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<section class="container">
<div class="row" align="center">
<div class="col-xs-12 backgroundcolor1">
<div class="col-xs-6 col-sm-6">
<div class="col-md-10 col-lg-offset-1 ">
<br>
<img src="assets/images/SPA/Icons/facials.png" class="icons" alt=""><br>
<h3>FACIALS</h3>
<p align="justify">Have you ever treated to a facial?<br> Facial treatments feel good, offering soothing relaxation, according to Day Spas. Facial massage treatments increase circulation and the flow of blood, and they include a variety of cremes,
aromatherapy and oils that moisturize the skin, smell good, and relieve stress as well as encourage peace of mind and contentment</p>
</div>
</div>
<div class="col-xs-6 col-sm-6 textbox back_imag col-xs-offset-6">
<img src="" class="" alt="">
<figcaption><br><br><br>
<h3>Facials</h3>
</figcaption>
[enter image description here][1]
</div>
</div>
</div>
</section>

Test doesn't stack when screen is minimized bootstrap 3

Ok so I have the following HTML
<div class="container">
<div class="row col-sm-12" id="productBrief">
<div id="RaspberryAndChocolate" style="display:none; height:200px;">
<div class="col-sm-6 text-center">
<img src="~/Content/Images/YogurtImages_404x290/Rasberry_White_Chocolate_Yogurt.png" class="img-responsive" style="margin: 0 auto; padding-top: 5%" alt="Rasberry White Chocolate Yogurt" />
</div>
<div class="col-sm-6">
<h2 class="raspberryRed productLineHeight">FLAVOUR #3</h2>
<h1 class="raspberryRed">
RASPBERRY &<br /> WHITE CHOCOLATE
</h1>
<p class="productPara">
A decadent combination of whole raspberries and smooth white chocolate that you will want to make last as long as possible. Teaspoon recommended.
</p>
<p>
<span class="label label-danone label-as-badge" style="font-size: 0.9em; padding:3%">VIEW ALL FLAVOURS</span>
</p>
</div>
</div>
<div class="clearfix"></div>
<div id="BlueBerry" style="display:none; height:200px;">
<div class="col-sm-6 text-center">
<img src="~/Content/Images/YogurtImages_404x290/Blueberry_Yogurt.png" class="img-responsive" style="margin: 0 auto; padding-top: 5%" alt="Blueberry Yogurt" />
</div>
<div class="col-sm-6">
<h2 class="blueBerry productLineHeight">FLAVOUR #6</h2>
<h1 class="blueBerry">
BLUEBERRY
</h1>
<p class="productPara">
Just imagine plump and juicy blueberries immersed in a deliciously creamy yoghurt. Enough said.
</p>
<p>
<span class="label label-as-badge" style="font-size: 0.9em; padding:3%">VIEW ALL FLAVOURS</span>
</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-lg-12 text-center">
<div class="col-lg-2"></div>
<p style="width:70%;" class="text-center col-lg-8">
Experiencing Ultimate's uniquely luscious texture for the first time is beyond words. So don't even try. Take a moment to enjoy the ultra creaminess, the juicy ripened fruits and an array of wicked indulgences that come together to create a yoghurt like no other.
</p>
<div class="col-lg-2"></div>
</div>
</div>
Now there are roughly about 8 different divs but for simplicity I am only showing 2, but only one div is shown look at it as a random affect so the user refreshes the page a different div is shown (this is done in jquery) but if you look at the bottom of the HTML you will see another row with a P tag this is what is causing he issue, when displayed on a desktop it shows like this
when I minimize the browser the text at the bottom of the image displays under the text located to the right hand side of the yogurt box as shown here.
I have added the clearfix, tried adding a new container and yet the problem still remains....
You are using invalid bootstrap grid. Col should be a child of row. Use correct grid and everything will work perfectly.
Scott, hunzaboy says you need to use the dive like this
<div class="row">
<div class="col-sm-12"></div>
</div>
I don't fully understand your question, but hope you asking this,
when re-sizing your first image, I will suitably re-size without any harm to other divs. For that You need to devide that into 3 main divs, check the below code
<div class="row">
<div class="col-md-6">This is the image holding div</div><div class="col-md-6"> this is the right side text "Flavour #6, etc..."</div>
<div class="col-md-12">This is the text on the bottom</div>
</div>
I will look, 2 columns on the top and one column in the bottom.
For mobile view, you can use col-xs-12class, the it will show as stack.
Hope this is you asking. Thanks

Please help me with centering a text box

I'm new to HTML and working on a website where I need this text box to appear in the center as it looks rather odd on the left hand side (please help me make edits to the html as well:
<!-- Job Opportunities -->
<div class="wrapper wrapper-style3">
<article id="careers">
<header>
<h2>Careers</h2>
</header>
<div class="container">
<div class="row">
<div class="12u"></div>
</div>
<div class="row">
<div class="4u">
<article class="box box-style2">
<h3>Work With Us</h3>
<p>We are looking for enthusiastic, detail-orientated professionals to assist in our continued growth. As a small firm, we reward flexibility with excellent conditions and an enjoyable working environment. Rapid career progression is possible for candidates demonstrating the right characteristics. Please contact us, enclosing a CV, for details of our current vacancies.</p>
</div>
</div>
</article>
</div>
Create css class in <head>'s <style> element:
.centered { width:70%; margin: 0 auto; }
Add css class to div:
<!-- Job Opportunities -->
<div class="wrapper wrapper-style3 centered">
<article id="careers">
<header>
<h2>Careers</h2>
</header>
<div class="container">
<div class="row">
<div class="12u"></div>
</div>
<div class="row">
<div class="4u">
<article class="box box-style2">
<h3>Work With Us</h3>
<p>We are looking for enthusiastic, detail-orientated professionals to assist in our continued growth. As a small firm, we reward flexibility with excellent conditions and an enjoyable working environment. Rapid career progression is possible for candidates demonstrating the right characteristics. Please contact us, enclosing a CV, for details of our current vacancies.</p>
</article>
</div>
</div>
</div>
</article>
</div>
JsFiddle: http://jsfiddle.net/3Ly1s3tv/

Center image above text in bootstrap

I am trying to make the main page for a website.
I want three images with text underneath but the images are not centered above the text. Here is the jsFiddle.
JsFiddle
<div class="row" style="text-align:center">
<div class="col-md-4 col-xs-8">
<img src="http://s27.postimg.org/5emjkk14v/image.jpg" class="img-responsive" style="height:180px;width:180px;" />
<h4> Vaccinations</h4>
<p>Dogs and cats are susceptible to a variety of illnesses that can be completely prevented by following the appropriate vaccination schedule.</p>
</div>
<div class="col-md-4 col-xs-8">
<img src="http://s27.postimg.org/5emjkk14v/image.jpg" class="img-responsive" style="height:180px;width:180px;" />
<h4>Checkups</h4>
<p>Regular checkups are a key factor in pet wellness, and can often unearth problems that could lead to health issues down the road. </p>
</div>
<div class="col-md-4 col-xs-8">
<img src="http://s27.postimg.org/5emjkk14v/image.jpg" class="img-responsive" style="height:180px;width:180px;" />
<h4> Senior Pets</h4>
<p>Senior pets generally require more medical attention than their younger counterparts, just as senior humans do. So when is a pet considered “senior”? </p>
</div>
</div>
You need to set the left and right margins of the images to auto
.col-md-4.col-xs-8 img {
margin: 0 auto;
}
Updated JSFIDDLE
.img-responsive{display:inline-block}