I have a div with the ff css properties:
.header {
width: 100%;
background-color: #1cb14d;
position: fixed;
top: 0;
left:0;
border-bottom: none;
z-index: 999;
font-family:'Segoe UI Light';
color: #ffffff;
}
HTML:
<div class="header">
<div class="section_container">
<div class="col span_1_of_12">
//something here
</div>
<div class="col span_1_of_12">
//something here
</div>
<div class="col span_7_of_12">
//something here
</div>
<div class="col span_3_of_12">
//something here
</div>
</div>
</div>
I want to limit the min-width of it but it doesn't seem to work. I need to set the min-width to prevent the div from covering other contents when browser is size is adjusted. Is there a way to do it? Thanks
If the .header needs to have a min-width, you can just add it:
.header { width: 100%;
min-width: 200px; }
Otherwise, if you want the section_container to have a min-width:
.section_container { min-width: 200px; }
This will override/add the frameworks default min-width if it exists
Currently you're anchoring the element to the left and right boundry of the viewport with these directives, which supersede min-width and min-height:
left: 0;
right: 0;
Remove them and then add a min-width or a max-width directive, depending on the effect you're looking for.
Related
I want to make it so that one div can scroll horizontally independently of the other div. Scrolling divs should have a minimum width (e.g. 500px) and not be aligned to the width of the content. The other div has a width of 100%. How can i do this?
<div>
<div #parent style="width: 100%"></div>
<div #child style="position: relative; width: 100%">
<div #child class="child-container"></div>
</div>
</div>
Here is my css:
.child-container {
position: absolute;
overflow: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 500px;
}
I edited the post to be more realistic
What you're looking for is the CSS property overflow-x which will allow you to specify the overflow behavior with CSS.
Here is MDN's documentation on this property.
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
Update
Here is a working example of what you are asking for. If I'm not understanding your question, please let me know.
.padding {
padding:25px;
}
.container {
max-width:400px;
}
.child-container {
background:#dedede;
overflow-x:scroll
}
.child-item {
min-width: 500px;
}
<div class="container padding" style="background:#ededed;">
<div class="padding">
<h1>Parent</h1>
</div>
<div class="child-container padding">
<div class="child-item">
<h1>Hello world</h1>
</div>
</div>
</div>
I'm trying to get a response line next to a heading
Picture above is from a pdf not the site
I tried using a Div with a border bottom but its out of place because its a border it sits lower, I then tried using a <hr And The same thing it doesnt align properly There are one's at the bottom center ect.
How do I achieve something of the sorts without having to set responsive stylings every few pixel's.
<div class="container">
<div class="we-are">
<div class="row">
<div class="col-md-4">
<h2>We are.</h2>
</div>
<div class="col-md-8 line-right">
<hr>
</div>
</div>
</div>
</div>
.line-right hr{
position: absolute;
bottom: 0;
width: 100%;
border: 0;
border-bottom: 5px #BFE2CA solid;
}
My result:
I do realize I can ofcourse do something like
marign-top:50px
But it wont be very responsive
I would suggest a different approach using pseudo-elements
Here your HTML code:
<div class="container">
<div class="we-are">
<div class="row">
<div class="parent">
<h2>We are.</h2>
</div>
</div>
</div>
</div>
And here your CSS, where the line is made by the _pseudo-element after:
h2 {
margin: 0;
}
.parent {
position: relative;
width: auto;
display: inline-block;
}
.parent:after{
display: block;
content: "";
position: absolute;
bottom: 4px;
left: calc(100% + 20px);
width: 500px; /* Or whatever you need, e.g. width: calc(100vw - 200px); */
height: 5px;
background: #BFE2CA;
}
If you want to have the line vertically aligned just change your CSS accordingly (remove bottom and add top):
top: 50%;
transform: translateY(-50%);
Here's a working live Codepen: https://codepen.io/alezuc/pen/dyYGxYY
Yous should use something like dynamic when the font or the screen varies, you have to set the line to the period symbol first and then even if you increase/decrease the font that shouldn't change the line.
you can try something like this. you can try to change the font and you see the line sticks to the same position and you just have to increase the height of the line based on font.
Snippet
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: 5px;
border: 1px solid red;
}
.parent {
position: relative;
width: auto;
display: inline-block;
font-size:3em; /* change the size and see the difference */
}
.parent:after {
content: "";
position: absolute;
bottom: 20%;
left: calc(100% + 20px);
width: 500px;
/* height is the only thing you have to change irrespective of the font. */
height: 5px;
background: #BFE2CA;
}
<div class="container">
<div class="we-are">
<div class="row">
<div class="parent">
<h2>We are.</h2>
</div>
</div>
</div>
</div>
First of all, I'm not really good with CSS but I'm trying to make the <img> height equals the width of it using only CSS.
I'm also using bootstrap as shown below, so the width of each column is responsive.
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
.album .album_photo .photo_link img {
width: 100%;
}
<div class="album">
<div class="col-xs-3">
<div class="album_photo">
<a href="#" class="photo_link">
<img src="someurl" />
</a>
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<a href="#" class="photo_link">
<img src="someurl" />
</a>
</div>
</div>
</div>
This is how it looks like right now:
and this is what I'm trying to achieve:
Take a look at this pen, you'll know how to do that using padding-bottom trick:
Code pen
.album_photo {
position: relative;
padding-bottom: 100%;
overflow: hidden;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Consider using image as background in conjunction with background-size: cover.
I like this method. It makes the content of the column (in this case .album_photo) position: relative, sets the inner wrapper of the element ('.photo_link img') position: absolute; with a height of 100%. To keep the shape of the column, you use a pseudo-element that has a padding-top: 100%. The reason why this works is because percentage based padding is always relative to the width of the element. Thus with a padding of 100%, it will always be just as tall as it is wide. You can use the same method to create ratio based container sizes too (e.g. 3:1 ratio for slideshows having absolutely positioned slides). It's a neat trick.
#import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css);
.album_photo {
position: relative;
overflow: hidden;
}
.photo_link img {
position: absolute;
top: 0;
left: 0;
}
.album_photo:after {
content: '';
display:inline-block;
vertical-align: top;
width: 100%;
height: 0;
padding-top: 100%;
}
<div class="container">
<div class="album">
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
</div>
</div>
try this
img{
aspect-ratio:1;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
You can scale the images in any way, by simply applying a width & height. For example, You can say
.full-width-height { width: 100%; height: 100%; }
You can also use min-width, max-width, min-height and max-height.
However, you will run into aspect ratio issues with this.
You have two options that will keep aspect ratios in check using CSS and
.auto-width { width: auto; height: xxx; }
.auto-height { width: xxx; height: auto; }
Bootstrap provides a responsive class you can use as well. The class is img-responsive which you can read about here. This class is often used with center-block helper class.
you want your "album_photo" class to have a width and height of 100%, because those will fill the space in the parent element which has a class of "col-xs-3"
CSS:
.album_photo {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
set margin and padding to 0 and you will see that the img fits nicely in the parent element.
http://i.imgur.com/Veauoig.png
I am currently trying to work out how to make the 'From £' text to keep in the same position as the buttons above. The page is responsive so I have been unable to keep the text in one position.
The CSS I have used so far -
element.style {position: absolute; width: 97%;}
I put each of the 'From £' parts in their own class. Not sure if there is an easier way?
<div class="price2">From £300</div>
Any help would be great. Thanks!
Add a container for the element for the price and button so that they remain in context with each other.
http://jsfiddle.net/05orkj1a/
.prices{
width: 100%;
}
.price-column{
display: table-cell;
width: 33%;
text-align: center;
margin: 0 auto;
padding: 0 5px;
}
<div class="prices">
<div class="price-column">
<button>Bass</button>
<div class="price2">From £65</div>
</div>
<div class="price-column">
<button>Mid</button>
<div class="price2">From £300</div>
</div>
<div class="price-column">
<button>Treble</button>
<div class="price2">From £715</div>
</div>
</div>
You could also Float the columns left to cause them to collapse vertically as the screen shrinks with the same html. Just change the margin or padding depending on how far apart you want them spaced
http://jsfiddle.net/z6agt11e/
.prices{
width: 100%;
overflow: hidden;
}
.price-column{
display: block;
float: left;
text-align: center;
padding: 5px 5px;
}
You can also add an outer container and then create a inner container for each button-price set.
Here is the HTML code:
<div class="outter">
<div class="block">
<div class="button">button1</div>
<div class="price2">From £65</div>
</div>
<div class="block">
<div class="button">button2</div>
<div class="price2">From £300</div>
</div>
<div class="block">
<div class="button">button3</div>
<div class="price2">From £715</div>
</div>
</div>
Here the CSS:
.outter{
width:100%;
}
.block{
width:33%;
background-color: yellow;
float:left;
text-align: center;
}
And here a jsfiddle:
http://jsfiddle.net/SoniaGM/ej4mdwx9/1/
Hope it helps.
You can use the CSS3 ::after pseudo-selector.
Give at button class:
position: relative;
Then you have to write something lime this:
.button-class::after {
content: 'From £300';
background: transparent;
height: 1%;
width: 3%;
position: absolute;
top: 20px;
left: 0px;
}
Obviously, you have to change height: 1%; width: 3%; and top: 20px; left: 0px;with whatever you want!
If I have the following code, how can I make the second div take up the rest of the page?:
<div style="height:300px;">
blah
</div>
<div style="?">
</div>
For example, if the user's browser window's height is 1000px, then how can I make the second div 700px?
This is an approach you could take:
Make the first <div> a child of the second <div>
Give the outer <div> some padding equal to the height of the inner <div>
Use position: absolute; to get the inner <div> snapping to the top of the page
Now the outer <div> will act as the bottom <div>.
Example:
<style type="text/css">
div#outer
{
padding-top: 300px;
}
div#inner
{
position: absolute;
top: 0;
background: yellow;
display: block;
height: 300px;
width: 100%;
}
</style>
<div id="outer">
<div id="inner">
top content
</div>
bottom content
</div>
http://jsfiddle.net/Eq8Jq/1/
If absolute positioning is not a problem, you can do it like this:
<div style="position: absolute; top: 0; left: 0; right: 0; height:300px; background-color:yellow;">
Foo
</div>
<div style="position: absolute; top: 300px; left: 0; right: 0; bottom: 0; background-color: red;">
Bar
</div>
You can use on div2 style = "height: 100%". However, this only works if the container also has a height specified. If this is just in your main body then set body { height: 100%; } also
The key is style="height:100%" for the second div as mentioned by mrtsherman.
<div style="height:300px;background-color:yellow">
blah
</div>
<div style="clear:both;height:100%;background-color:red;">
Second div
</div>
The second div will have red BG for the rest of the page.
If this is not what you want, let us know.