In the botton of this there is a fullwidth picture with some stairs. I would like to make that around a 500px height.
It works when I set an inline height:
<section class="pv-40 ding-bottom-clear parallax dark-translucent-bg hovered background-img-4">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="testimonial" style="height: 500px;">
</div>
</div>
</div>
</div>
</section>
But when I set the height in css it is not working, and I cannot understand why?
<div class="testimonial controlHeight">
</div>
CSS
.controlHeight {
height: 500px;
}
It is a CSS document with a lot of lines CSS codes, so the document is called. I thought maybe something was overwriting, so I tried to set it at the end of the CSS document, but still not called.
controlHeight is a class selector. Therefore you need to write
.controlHeight {
height: 500px;
}
with the dot at the beginning.
You have:
controlHeight {
height: 500px;
}
Which matches against elements named controlHeight. You want:
.controlHeight {
height: 500px;
}
which matches elements with the class controlHeight.
Related
I am trying to create a div with a background-image, but the image is not showing. If I set the height in pixels (px) not percentage(%), the image is shown. So, I suspect there is no height set before. But I've set the html body height and width.
The code is below:
html {
height: 100%;
width: 100%
}
body {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<div class="row" style="height:100%">
<div class="leftdisp" style="width:50%;background-image:URL('https://images.unsplash.com/photo-1491884662610-dfcd28f30cfb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8amFwYW5lc2V8ZW58MHx8MHx8&w=1000&q=80')">
</div>
<div class="rightdisp" style="width:50%; background-color:#00000"></div>
</div>
I think there's nothing wrong with it? Are there any mistakes I made?
EDIT:
I already added background-size and background-repeat.
Your expectations are wrong. The height of div (and other block-level elements) is determined by its content, unless specified explicitly otherwise.
Since both of your inner div elements have no content other than whitespace (a background-image is not content), their height resolves to 0.
To fix it, assign a height to the divs.
Please start using the element inspector in your browser's developer tools (F12 on Windows).
first background-image:url() second you didnt set height of that image.`
.leftdisp {
height: 300px;
}
<div class="row" style="height:100%">
<div class="leftdisp" style="width:50%;background-image:url('https://images.unsplash.com/photo-1491884662610-dfcd28f30cfb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8amFwYW5lc2V8ZW58MHx8MHx8&w=1000&q=80')">
</div>
<div class="rightdisp" style="width:50%; background-color:#00000"></div>
</div>
`
Please add min-height property on leftdisp div
Just replace this code
<body>
<div class="row" style="height:100%">
<div class="leftdisp" style="width:50%; min-height: 500px; background-image:URL('https://images.unsplash.com/photo-1491884662610-dfcd28f30cfb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8amFwYW5lc2V8ZW58MHx8MHx8&w=1000&q=80')">
</div>
<div class="rightdisp" style="width:50%; background-color:#00000"></div>
</div>
</body>
if you want to set image to background, do it in body tag.
<body style="width:50%;background-image:url('https://images.unsplash.com/photo-1491884662610-dfcd28f30cfb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8amFwYW5lc2V8ZW58MHx8MHx8&w=1000&q=80')">
<div class="row" style="height:100%">
<div class="leftdisp">
</div>
<div class="rightdisp" style="width:50%; background-color:#00000"></div>
</div>
</body
I am trying to create a album style like the example below:
if you look at the recent works section where you have an image on one side and text on the other but it takes up the whole width of the page:
https://colorlib.com/preview/theme/racks/
or the example on this page:
https://getbootstrap.com/docs/4.4/examples/product/
<section class="recent-ideas">
<div class="container">
<div class="card w-50 h-10 p-3" style="width: 18rem;">
<img class="card-img" src="images/bulb.jpeg" >
</div>
</section>
The code i am using above basically creates a card in bootstrap but when i insert the picture i dont know how to format the height and width to keep everything the same
As I mentioned in the comment use container-fluid and overwrite the left/right padding using another class in a different css file.
HTML File
<div class="container-fluid my-container">
<div class="row no-gutters"></div>
</div>
CSS File
.my-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
Then you can add your css file as you normally do. The reason to not overwrite the container-fluid class is because you might need it in another part of your site with the paddings.
The second option is not use the container class and use the row and no-gutters:
<div class="row no-gutters">
<!-- your content here -->
</div>
To give the images the same width just use the same column class in all of them and use the background-image property in the elements instead of using an actual image. Since in the sample the images have a link in them you can use something like this:
HTML File
<div class="row no-gutters my-row">
<div class="col-12 col-md-6">
</div>
<div class="col-12 col-md-6">
<div class="content-container">
<!-- content-here -->
</div>
</div>
</div>
CSS File
.content-container {
display: flex;
height: 100%;
align-items: center;
padding: 2rem 1rem;
min-height: 50vh;
}
.content-text {
text-align: center;
margin: 0;
}
.image-link {
display: block;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 50vh;
}
I added the min-height to the image and content container in order to keep the sizes regardless of the content. In the link you provide the reason all the elements have the same height is because they have the same amount of text, if you change that the entire layout breaks in an ugly way, that is a sign of a poorly thought and constructed layout, that hasn't been tested thoroughly.
Here is a working example:
https://codepen.io/rhernando/pen/WNbaaeN?editors=1100
I am following my previous question that has two boxes, that have two images (can be vertical or horizontal), the issue is the height of boxes are fixed and when I change the window screen in some screen sizes the images bypass the border of the boxes.
I checked answers of these questions 1 and 2 but did not help much.
DEMO
CSS
.items { */
position: relative;
margin-bottom: 7px;
margin-left: 7px;
margin-right: 0px;
text-align: left;
background-color: red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
padding-left: 1%;
height:260px;
}
.col-md-12.col-xs-12.btn>a>img {
float: right;
width: 100px;
height: 50px;
}
.col-md-12.col-xs-12.my-col {
padding-left: 100%;
}
.my-row {
bottom: 0;
padding-right: 0;
position: absolute;
}
.my-row {
bottom: 0;
padding-right: 0;
position: absolute;
}
.btn {
float: right;
bottom:0;
margin-right:-12px;
margin-bottom:-6px;
position:absolute;
right:0;
}
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3 items">
<div class="row">
<div class="col-md-12 text-center">
<h4>T1</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h5>T2</h5>
</div>
</div>
<div class="row">
<div class="col-md-12 row text-center">
<a
href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
title="T1" data-gallery rel="nofollow"> <img
id="imageresource"
src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
class="img-thumbnail" width="30%" style="margin-left: 30px;" />
</a>
</div>
</div>
<div>
<img src="#" class="btn" />
</div>
</div>
<div class="col-md-3 items">
<div class="row">
<div class="col-md-12 text-center">
<h4>T1</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h5>T2</h5>
</div>
</div>
<div class="row">
<div class="col-md-12 row text-center">
<a
href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
title="T1" data-gallery rel="nofollow"> <img
id="imageresource"
src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
class="img-thumbnail" width="25%" style="margin-left: 30px;" />
</a>
</div>
</div>
<div>
<img src="#" class="btn" />
</div>
</div>
</div>
</div>
</div>
First off, the markup is over complicated for what you want and line 15 and 45 are applying bootstrap classes .col-md-12 and .row on the same element which is in incorrect. Bootstrap class .col-xx-nn must be assigned to a child element with a bootstrap class .row.
Getting back on track to what you want. I have simplified the HTML code to get your desired result, I think. Check it out and let me know what isn't right and I will change it and explain why.
https://jsfiddle.net/6y4uf16y/84/
What I did was create a container div around the sale image that uses the CSS flex box. This div will take up any remaining space. Therefore, if you change the height of your .items element. The flexbox container will adapt and the sale image will respond appropriately to the new size. There is no fixed heights here except for the one that was placed on the .items class of 260px which I believe is what you wanted.
The reason for this is that the bootstrap class .img-reponsive needs a height and/or width attribute to be responsive. Therefore, I have set the height and width equal to the flex box container around it. You can change the width value or .img-sale back to 30% if you wish.
Moreover, as a bonus, I have aligned the button to always be in the bottom right corner as I think you wanted it.
If this answer solves your problem, don't forget to mark it as the correct solution.
Cheers
Edit Sorry wrong JSFiddle link, correct link has been added. I also added proof that it is dynamic with multiple rows of text in the h4 and h5 elements.
You have to add class
.col-md-12 >a>img.btn {
float: right;
width: 100px;
height: 50px;
}
because .col-md-12.col-xs-12.btn>a>img is not applying to any of your given HTML div content
Is it a design requirement that the images get wider as the boxes get wider? If so, the only way to keep the images within the boxes is to increase the height of the boxes as you increase the height of the images.
If it's not a requirement that the images scale up, then you can see my solution here: http://jsfiddle.net/6y4uf16y/75/
All I did was remove the explicit widths from your images (the first was width="25%" and the second was width="30%") and instead used CSS to control the scale by limiting the max-height of the images. .items img {max-height:100px;}.
Since you have a fixed height and need to keep the images inside the boxes, you know for a fact that also have a fixed maximum height on the images
I am not sure if you can have line break on T1 & T2, otherwise you can do this
img{
max-height:170px;
width:auto
}
DEMO
i agree with #Bhavin Solanki and may be the one thing i will suggest that try to give the
width: 100px;
height: 50px;
in to percentages Or else you can go with Media queries for the particular image selectors that will help you to manage a lot
Your HTML Bootstrap code isn't totally correct:
You can't nest a .col-md-12 class inside a .col-md-3 class not
in my knowledge at least.
Your .rows classes are not always well positioned within the code
see the fiddle link that i prepared below.
I tried to do my best to understand what you want to achieve with your code i also ordered tags within your code so that your divs fit the window size regardless of its width.
EDIT
Try to define the width of your image with vw unit (width:15vw;) That will keep the image from crossing the containing item.
I illustrated an example for you here :
http://jsfiddle.net/merhzqwg/65/
Hope it helps.
OK this is the thing, your code is not very clean. there are some errors as well
for eg: you have used the id="imageresource" twice. An id can ONLY be used once on a single page. Very Important.
but i will provide a quick fix for this.
by default bootstrap adds max-width: 100%; height: auto; to the class img-thumbnail to override that what i have done is i have added a class to both of the images img-sale.
<img class="img-thumbnail img-sale" id="imageresource" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong" width="30%" style="margin-left: 30px;" />
and added the following css:
.img-sale {
max-height: 170px;
width: auto;
}
http://codepen.io/anon/pen/OVwrpJ?editors=110
http://jsfiddle.net/6y4uf16y/82/
but the rest of the code is not recommended to proceed with.
Since this question is outdated my question is how do I create a fluid row within non-fluid container.
I want to have a non-fluid container as my default layout, however the map I am placing, i need it to be full-width non-fluid.
here is my html:
<div class="container">
<div class="row-fluid">
<div id="map-canvas" class="container-fluid"></div>
</div>
</div>
row-fluid is not working with bootstrap 3, setting width: 100%; only takes width of its parent (non-fluid container).
JS Fiddle, Please increase output window width so you can see the difference.
Thanks in advance
Try following code. You can make a 100% width container inside fixed layout.
http://jsfiddle.net/m1L6pfwm/2/
HTML
<div class="row row-full"> content... </>
CSS
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
height: 100px;
margin-top: 100px;
left: 50%;
}
I'm not sure that a completely understand your question, but can't you just use Bootstrap's container-fluid to contain the map row?
http://bootply.com/KP9j6dKCES
<div class="container-fluid">
<div class="row" style="height:100px; background: #f00;">
this should take 100% width
</div>
</div>
Either use apropriate layout
or get same effect using following
<div class="row-fluid" style="position:absolute;z-index:5">
<div id="map-canvas" class="container-fluid"></div>
</div>
<div class="container" style="z-index:0">
<--fluid with respect to first static/relative parent-->
<div class="row-fluid">
<div id="map-canvas" class="container-fluid"></div>
</div>
</div>
You can play same effect using Z-index but not with it's grand parent
I need a help
i failed to change background color for bootstrap parent element using css
this is my html code
<div class="body-panel">
<div class="col-sm-4 left-guest">
testing
</div>
<div class="col-sm-8 right-guest">
</div>
</div>
this is my css
.body-panel{
color: blue;
background-color: red;
}
.left-guest{
border: dotted 1px black;
min-height: 1000px;
}
.right-guest{
border: dotted 1px black;
min-height: 1000px;
}
but background-color at class body-panel is not working, and color is working
can someone help me?
thanks
.body-panel has zero height due to the floated children (col-sm-8)
You need to clear the floats by either giving .body-panel a row class or a clearfix class, both of which are built in bootstrap helper classes.
<div class="body-panel row">
<div class="col-sm-4 left-guest">
testing
</div>
<div class="col-sm-8 right-guest">
</div>
</div>
<div class="body-panel clearfix">
<div class="col-sm-4 left-guest">
testing
</div>
<div class="col-sm-8 right-guest">
</div>
</div>
EXAMPLE
Give body-panel overflow:hidden or even better, a row class.
This is because col classes from bootstrap are floated and as such parent element does not take them into account for height, so your body-panel has no height amd even though it applies background color, you don't see it.
I strongly suggest giving it a row class, as that' s a proper way to use bootstrap grid classes.
You can use jquery to achieve this scenario
please try this to change background color of parent div.
**
<script type ="text/javascript">
$(document).ready(function () {
$(".left-guest").parent().css("background-color", "yellow");
});
</script>
**