I want to create a rather simple banner with bootstrap 3 but struggle with the image size of a logo.
This is my code:
<div class="container well">
<div class="row">
<div class="col-md-4 col-md-offset-1">
<div class="row">
<div class="col-xs-3">
<img src="http://via.placeholder.com/300x300" class="img-responsive" alt="Logo">
</div>
<div class="col-xs-9">
<address>
Company<br>
Address<br>
Contact<br>
</address></div></div>
</div>
<div class="col-md-3">
<address>
<strong>Person 1</strong><br>
Name<br>
Contact<br>
</address></div>
<div class="col-md-3">
<address>
<strong>Person 2</strong><br>
Name<br>
Contact<br>
</address></div>
</div>
</div>
https://www.bootply.com/PuYXFCgqAs
The logo should always have the same height as the company adress. As soon as the screen gets too small the columns should wrap onto a new line like this:
logo + company adress
person 1
person 2
In my code, the image is too high from the beginning and scales pretty weird on a smaller screen.
It seems so easy but my bootstrap skills are pretty basic. Every help is appreciated.
Related
I have tried to copy my section in the webpage as it is but when I copied my HTML5 code one below the previous it gave me an error, Such that the image in the first is at left and the text to right and I want it reverse for second section.
<div id="showcase-container">
<div class="showcase1">
<div class="col-2">
<img class="showcase1pic" src="images/apple.jpeg">
</div>
<div class="col-2">
<div class="feature-text">
<h1 class="section-title">Yes, it even looks good on an iPhone</h1>
<p class="section-left">It is important to make sure that you are coding for responsive design.We want all of our work to function property on all devices. This is the awesome way</p>
</div>
</div> <!-- End of Feature Text -->
</div>
</div>
<div id="showcase-container">
<div class="showcase1">
<div class="col-2">
<img class="showcase1pic" src="images/apple.jpeg">
</div>
<div class="col-2">
<div class="feature-text">
<h1 class="section-title">Yes, it even looks good on an iPhone</h1>
<p class="section-left">It is important to make sure that you are coding for responsive design.We want all of our work to function property on all devices. This is the awesome way</p>
</div>
</div> <!-- End of Feature Text -->
</div>
</div>
This is the image i want to display consecutively below it
This is the output I am getting
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").
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
I am trying to use the Enigma theme on my WP site.
It allows you to add a logo about 200px wide which works with the responsiveness of the site.
However, I want to upload a much wider image, which then resizes as the screen gets smaller.
I added a class to the image file and tried to target it with css
max-width: 100%;
height: auto;
I am familiar with media queries but nothing I do is working.
Here is the theme, this is an example site, not the real site I am working on but it presents the same problem.
http://bestgirlsonearth.com
I've erased my work on it just to show the theme as is.
Due to fluid-system-column of bootstrap your image is located in a 6col "col-md-6" and by definition that class can't take more space or less than her parents middle weight (here row)
I'm not a user of Twitter Bootstrap but i think you should change in your header.php to have two rows and your full-sized img :
<div class="row ">
<div class="col-md-6 col-sm-12">
<div class="logo">
<a href="http://bestgirlsonearth.com/" title="Best Girls on Earth" rel="home">
<img src="http://bestgirlsonearth.com/wp-content/uploads/2014/10/bgeheader3.png" style="height:182px; width:1023px;">
</a>
<p>The finest women on the planet</p>
</div>
</div>
<div class="col-md-6 col-sm-12">
<ul class="head-contact-info">
//you contact info
</ul>
</div>
</div>
by this :
<div class="row ">
<div class="col-md-12 col-sm-12">
<div class="logo">
<a href="http://bestgirlsonearth.com/" title="Best Girls on Earth" rel="home">
<img src="http://bestgirlsonearth.com/wp-content/uploads/2014/10/bgeheader3.png" style="/* height:182px; */ /* width:1023px; */"></a>
<p>The finest women on the planet</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<ul class="head-contact-info">
// Your contact infos
</ul>
</div>
</div>
cheers,
I have a problem with my Boxes onces i resize my webpage (browser) i am not sure how to use it, i use "col-sm-3"
<div class="col-md-12">
<div class="w-section inverse">
<h3 class="section-title">User's Outfits</h3>
<div class="row">
<div class="col-md-3">
<div class="box">
<div id="boxpic">
<img src="http://apinchofglitzandglam.files.wordpress.com/2014/03/dsc_0653.jpg?w=560&h=822" />
</div>
<div id="title" style="text-align:center;">Winter's Mist</div>
<p style="font-family:comic sans MS;width:250px;height:30px;"></p>
</div>
</div>
<div class="col-md-3">
<div class="box">
<div id="boxpic">
<img src="http://apinchofglitzandglam.files.wordpress.com/2014/03/dsc_0653.jpg?w=560&h=822" />
</div>
<div id="title" style="text-align:center;">Winter's Mist</div>
<p style="font-family:comic sans MS;width:250px;height:30px;"></p>
</div>
</div>
<div class="col-md-3">
<div class="box">
<div id="boxpic">
<img src="http://apinchofglitzandglam.files.wordpress.com/2014/03/dsc_0653.jpg?w=560&h=822" />
</div>
<div id="title" style="text-align:center;">Winter's Mist</div>
<p style="font-family:comic sans MS;width:250px;height:30px;"></p>
</div>
</div>
</div>
</div>
</div>
Here are the images -> http://justpaste.it/STacKovErFloW
It looks like your image is not resizing.
use this in your css style
.boxpic img {
width:100%;
height:auto;
}
Add the following class to your images:
img-responsive
An example is below:
DEMO JSFiddle
Also, BootStrap works from a bottom-up sense... meaning, if you declare the columns to be medium, then both medium and large columns will stay consistent with what you declared, i.e:
col-md-3 therefore implies col-lg-3
Whereas if you declare an extra small column size then that stays consistent with every column possible, i.e:
col-xs-3 therefore implies col-sm-3, col-md-3, and col-lg-3
So if you want something on your webpage to stay consistent for all devices, then you can declare the smallest column size (xs) and have that take care of all small, medium, and large screen sizes. An example of this is below:
DEMO JSFiddle