I'm using bootstrap 3 in the latest release - 3.3.4 - and unfortunately the .img-responsive class isn't working properly.
I tried everything, even .col-md-12 along with .img-responsive and nothing.
HTML:
<header class="container" id="container">
<div class="row">
<section class="col-md-3">
<a href="#">
<img class="img-responsive" src="http://placehold.it/350x150" alt="..." />
</a>
</section>
<section class="col-md-9">
<p>something else...</p>
</section>
</div>
</header>
CSS:
#container {
height: 60px;
background-color: red;
}
You can see the live preview here.
#edit
The image is over the container - the red part - that is the reason for the question, .img-responsive was supposed to resize the image to make it fit, but it doesn't.
Delete height: 60px;
You only need:
#container {
background-color: red;
}
Image has height 150px, but #container has 60px.
Your code is perfect. Here my pen http://www.bootply.com/Dka4RjELYK. Have you check your links and script references?
Related
I am using left: auto; in the hope of overriding left: 0; but it is not working (see jsfiddle) - I want <header class="h1..."> to be center aligned.
HTML:
<div class="root">
<header class="h1 header-opacity-enabled sticky-enabled sticky-no-topbar menu-animation-enabled hover-delay-enabled sticky-collapse sticky-opacity-enabled with-search-box with-cart-box lr-mi-with-widget-visible sticky" data-sticky-trigger-position="400" data-menu-slidedown-duration="400" data-menu-slideup-duration="500" data-menu-fadein-duration="300" data-menu-fadeout-duration="400" style="top: 0px;">
<section class="main-header">
<div>
<div itemtype="http://schema.org/Organization" itemscope="itemscope" class="title">
<div class="logo-wrapper"> <a class="logo" href="https://websitetechnology.dev/" itemprop="url"> <img alt="Doig Website Technology" src="https://websitetechnology.dev/wp-content/uploads/2016/04/logo3-blue.png" itemprop="logo" height="77"> </a>
<h3>Website Engineering, Optimisation & Advertising</h3>
</div>
</div>
</div>
<div class="shopping-bag">
<div class="widget woocommerce widget_shopping_cart">
<div class="widget_shopping_cart_content">
<div class="wrap">
<p class="empty-item">There are no items in your cart.</p>
<!-- end product list -->
</div>
</div>
</div>
</div>
</section>
<div class="s-801"></div>
<div class="s-981"></div>
</header>
</div>
CSS:
.h1.sticky.sticky-opacity-enabled .main-header {
background-color: #FFFF00;
}
#media screen and (min-width: 801px) {
.root header.sticky-enabled.sticky {
margin: 0 auto;
width: 1236px;
padding: 0;
max-width: calc(1070px + 10%);
}
.root header.sticky {
position: fixed;
top: auto;
left: auto;
width: 100%;
}
}
Live site here. Scroll half way down the page until the sticky <header> pops down from the top of the window.
left: auto; is being applied, yet the <header>' is stuck to the left side of the screen. This` needs to be center aligned.
Can you help please?
I have try to solved you and attached screenshot please find it. screenshot will help you to solved your issue.
Thanks,
It must be because css specificity. In a few words:
Specificity is the means by which browsers decide which CSS property
values are the most relevant to an element and, therefore, will be
applied. Specificity is based on the matching rules which are composed
of CSS selectors of different sorts.
If you give more specific selector, you can override the settings.
In Example, a more specific selector then your would be:
div.root header.sticky {
or
body div.root header.sticky {
...
This could help: Specificity calculator
Also, if you view in Chrome i.e. you can see if a css settings was overriden by being marked as struck through
put your header inside this section
<section style="padding: 0;max-width: calc(1070px + 10%);margin: 0 auto;">
<!--- put your header section here ---->
</section>
How to size/wrap a div container around an image inside It? Where float: right and margin-left: auto are potentially causing issues.
I'm struggling to get a div to be sized by wrapping properly around the image inside it. Please have a look at the example I'm referring to here:
Link to Example
(Might be worth playing around with the window size to help explain my problem)
I'm practicing with Bootstrap for the first time. The red blocks on each side are grid blocks 1 and 12, with the blue, and green sections filling the remaining 10. The big orange rectangles are responsive images that I want to be kept central spaced 20px apart at all times.
Using Chrome's "Inspect Element" (or similar) - If you inspect the orange rectangle on the right hand side, and have a look at the container div (class="container-img-r") - This div is wrapping around the orange image exactly how I wanted (albeit including the invisible border). But I'm not having much luck achieving the same result with the div container for the orange image on the left side (it still fills the blue parent element)
I've played around with different options for float/margins/position but can't seem to crack it.
Here's the CSS I have for the relevent content:
.container-img-l {
/* float:right; ??? Nothing I tried here seemed to make a difference */
}
.container-img-r {
float:left;
}
.item-pos-l {
margin-left:auto;
border-right:10px solid transparent; /* Margins just collapsed when resizing window */
height:323px;
width:510px;
}
.item-pos-r {
float:left;
border-left:10px solid transparent;
height:323px;
width:510px;
}
The reason for me wanting the div to accurately wrap around the responsive images is that I want to overlay some more CSS content over the images, scaling/re-positioning automatically as the window/device size changes (Click here and you'll clearly see where I'm hoping to implement this responsive style).
Maybe there are clashes with the Bootstrap CSS at play but I'm out of ideas.
Your first link doesn't remotely look like the html you want to make responsive. It would be best to learn responsive and fluid (no pixels heights or widths if possible) css before attempting to modify a framework you are unfamiliar with. Also, you have an error in your html - validate it to make sure you've closed all your elements. Also indent and comment all your code and avoid the use of inline styles.
Demo: http://jsbin.com/wazanu/2/
http://jsbin.com/wazanu/2/edit -- edit link
CSS:
body {background:#eee}
.header {padding:20px;}
.portfolio-grid .col-sm-6 {
margin-bottom: 30px
}
.img-wrapper .title {
text-align:center;
}
#media (min-width:768px) {
.img-wrapper {
position: relative;
overflow: hidden;
}
.img-wrapper img {width:100%;}
.img-wrapper .title {
position: absolute;
text-align:left;
bottom: -90px;
padding: 0 20px 20px 20px;
height: 150px;
background: red;
transition: all .5s ease-in-out;
}
.img-wrapper .title h3 {
margin: 0;
height: 60px;
line-height: 60px;
}
.img-wrapper:hover .title {
bottom: 0
}
}
HTML:
<header class="header text-center">
My header
</header>
<div class="container">
<div class="row portfolio-grid">
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
<div class="title">
<h3>Title of Project</h3>
<p>Content about project goes here</p>
</div>
</div>
</div>
<!--/.col-sm-6 -->
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placebear.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
<div class="clearfix visible-sm"></div>
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
</div>
<!--/.row-->
</div>
<!--/.container-->
I have rectangular, not necessarily square images.
Using Bootstrap's img-circle, I'd like to get circular crops, not elliptical/non-circular crops of these rectangular images.
How can this be accomplished? The crops should behave in an img-responsive manner and should be centered.
JSFiddle to illustrate the non-circular behavior of non-square img-circle images.
<div class="container-fluid text-center">
<div class="row">
<div class="col-xs-12">img-circle test</div>
</div>
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://placekitten.com/g/200/200" />
</div>
<div class="col-xs-6">
<img class="img-responsive img-circle" src="http://placekitten.com/g/200/200" />
</div>
</div>
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://placekitten.com/g/200/400" />
</div>
<div class="col-xs-6">
<img class="img-responsive img-circle" src="http://placekitten.com/g/200/400" />
</div>
</div>
<div class="row">
<div class="col-xs-6">
<img class="img-responsive" src="http://placekitten.com/g/400/200" />
</div>
<div class="col-xs-6">
<img class="img-responsive img-circle" src="http://placekitten.com/g/400/200" />
</div>
</div>
</div>
I see that this post is a little out of date but still...
I can show you and everyone else (who is in the same situation as I was this day) how i did it.
First of all, you need html like this:
<div class="circle-avatar" style="background-image:url(http://placekitten.com/g/200/400)"></div>
Than your css class will look like this:
div.circle-avatar{
/* make it responsive */
max-width: 100%;
width:100%;
height:auto;
display:block;
/* div height to be the same as width*/
padding-top:100%;
/* make it a circle */
border-radius:50%;
/* Centering on image`s center*/
background-position-y: center;
background-position-x: center;
background-repeat: no-repeat;
/* it makes the clue thing, takes smaller dimension to fill div */
background-size: cover;
/* it is optional, for making this div centered in parent*/
margin: 0 auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
It is responsive circle, centered on original image.
You can change width and height not to autofill its parent if you want.
But keep them equal if you want to have a circle in result.
Link with solution on fiddle
I hope this answer will help struggling people. Bye.
I use these two methods depending on the usage. FIDDLE
<div class="img-div">
<img src="http://placekitten.com/g/400/200" />
</div>
<div class="circle-image"></div>
div.img-div{
height:200px;
width:200px;
overflow:hidden;
border-radius:50%;
}
.img-div img{
-webkit-transform:translate(-50%);
margin-left:100px;
}
.circle-image{
width:200px;
height:200px;
border-radius:50%;
background-image:url("http://placekitten.com/g/200/400");
display:block;
background-position-y:25%
}
You stated you want circular crops from recangles. This may not be able to be done with the 3 popular bootstrap classes (img-rounded; img-circle; img-polaroid)
You may want to write a custom CSS class using border-radius where you have more control. If you want it more circular just increase the radius.
.CattoBorderRadius
{
border-radius: 25px;
}
<img class="img-responsive CattoBorderRadius" src="http://placekitten.com/g/200/200" />
Fiddle URL: http://jsfiddle.net/ccatto/LyxEb/
I know this may not be the perfect radius but I think your answer will use a custom css class. Hope this helps.
use this in css
.logo-center{
border:inherit 8px #000000;
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright:75px;
-moz-border-radius-bottomleft:75px;
-moz-border-radius-bottomright:75px;
-webkit-border-top-left-radius:75px;
-webkit-border-top-right-radius:75px;
-webkit-border-bottom-left-radius:75px;
-webkit-border-bottom-right-radius:75px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:75px;
border-bottom-right-radius:75px;
}
<img class="logo-center" src="NBC-Logo.png" height="60" width="60">
You have to give height and width to that image.
eg. height : 200px and width : 200px
also give border-radius:50%;
to create circle you have to give equal height and width
if you are using bootstrap then give height and width and img-circle class to img
the problem mainly is because the width have to be == to the height, and in the case of bs, the height is set to auto so here is a fix for that in js instead
function img_circle() {
$('.img-circle').each(function() {
$w = $(this).width();
$(this).height($w);
});
}
$(document).ready(function() {
img_circle();
});
$(window).resize(function() {
img_circle();
});
You Need to take same height and width
and simply use the border-radius:360px;
You could simply use .rounded-circle bootstrap.
<img class="rounded-circle" src="http://placekitten.com/g/200/200"/>
You can even specify the width and height of the rounded image by providing an inline style to the image, which overrides the default size.
<img class="rounded-circle" style="height:100px; width: 100px" src="http://placekitten.com/g/200/200" />
On the website I'm working on (this), I have a div with an img in it. This is the html
<div><overlay> <img class="img1" height="225" src="NYC/wtc1.JPG" width="225" /></overlay</div>
<div><overlay> <img class="img2" height="225" src="NYC/wtcmem.jpg" width="225" /></overlay></div>
<div><overlay> <img class="img3" height="225" src="NYC/sky.jpg" width="225" /></overlay></div>
<p> </p>
nothing too complicated. This is the CSS for the classes img1, img2, and img3.
.img1
{
position:absolute;
left:12%;
}
.img2
{
display:block;
margin:auto;
}
.img3
{
position:absolute;
right:12%;
}
also pretty simple. But, if you look at the website, the 3rd image (at least for me on Safari) is much lower than the other two. Why would this happen? I don't see anything in the CSS or HTML that would cause this.
If you have some markup like this:
<div class="wrapper">
<div><img class="img1" height="225" src="http://rwzimage.com/albums/NYC/wtc1.JPG" width="225" /></div>
<div><img class="img2" height="225" src="http://rwzimage.com/albums/NYC/wtcmem.jpg" width="225" /></div>
<div><img class="img3" height="225" src="http://rwzimage.com/albums/NYC/sky.jpg" width="225" /></div>
</div>
Then I think this CSS will have approximately the effect you're after:
.wrapper {
display: table;
width: 960px;
}
.wrapper > div {
display: table-cell;
width: 33%;
text-align: center;
}
.wrapper > div:hover img {
opacity: 0.5;
}
Demo. I set width: 960px; so that it would force things to be wider than the JSFiddle window, but you could set width: 100%; for your page.
I've tried to do the best I can with your code, the following will work for you:
<div class="container" style="overflow:hidden; text-align:center;">
<div style="display:inline-block; margin: 0px 80px;">
<div class="overlay">
<img class="img1" height="225" src="NYC/wtc1.JPG" width="225">
</div>
</div>
<div style="display:inline-block; margin: 0px 80px;">
<div class="overlay">
<img class="img2" height="225" src="NYC/wtcmem.jpg" width="225">
</div>
</div>
<div style="display:inline-block; margin: 0px 80px;">
<div class="overlay">
<img class="img3" height="225" src="NYC/sky.jpg" width="225">
</div>
</div>
</div>
Note that <overlay> is not a valid HTML element. also I've seen on the page you used something like <margin>. It's not a good practice to invent HTML elements.. You can get all the functionality you need using regular <div>s (although I don't think this will break your page.. maybe only in older browsers..).
What I basically did:
Wrapped the three <div>s with a container with text-align:center. This will make the three divs inside it aligned to the center.
Added display:inline-block; to make all the divs follow the text-align.
Added margins to the divs to space them
Note that I strongly recommend to replace your <overlay> with something like <div class="overlay">
div tag naturally stack vertically. So you will need to add an id to each div or you could just put all the img in one div.
The block css attribute is effecting the layout. It is pushing the next img to the next line.
I'm working on the "About Us" header on this page
Basically the little div there with the images and blue "About Us" block was an image, but for SEO purposes, I'm now replacing it with a structure that can use an <h1>...</h1> tag.
As you can see, the layout of the images and header tag works perfectly, but it's pushed the right column of the page in under the content.
I've checked, and double-checked and it looks like all floats are properly contained (unless I missed something) so I'm not sure how to fix this.
Can anyone tell me what I'm doing wrong here?
The HTML:
<div class="page_header">
<div>
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-1.jpg">
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-2.jpg" alt="" />
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-3.jpg" alt="" />
<h1>About Us</h1>
</div>
</div>
The CSS:
/* Page Headers
----------------------------*/
.page_header div {
overflow: hidden;
min-width: 665px;
}
.page_header img, .page_header h1 {
float: left;
margin: 10px 10px 0 0;
}
.page_header img:nth-child(2) {
clear:right;
}
.page_header h1.about-us {
line-height: 90px;
background: #00f;
color: #fff;
padding: 0 42px;
}
Thanks in advance!
Hey Ortund Actually wrote a HTML markup in bit of improper way so you should write like this :-
<div id="main">
<div id="content">
<div id="sidebar-primary">
</div>
see the attached image its working fine through this method :-
That is because your <div id="sidebar-parimary"> should reside inside the <div id="main"> element.
Currently it is:
<div id="main">
<div id="content">...</div>
</div>
<div id="sidebar-primary">..</div>
it should be:
<div id="main">
<div id="content">...</div>
<div id="sidebar-primary">..</div>
</div>