i want to ask you how can i make a responsive list with 3 items in wich when i reduce the size of my browser the items go vertical and the one is below the other, when the browser window is growing the items will be in one. My code for the list is the following , i managed to order them in center and in one row but i am getting confused about the responsive..
<div class="list">
<ul id="2" class="3">
<li>< </li>
<li> </li>
<li> </li>
</ul>
</div>
and the css
.list{
position: relative;
width: 100%;
display: block;
}
.list li {
width: 33.3%; /* nice 3 columns */
float: left;
padding: 0; /* should have zero paddng/margin */
margin: 0;
}
.list li > span {
margin: 6% 6% 0 0; /* now margins are specified relative to outer <li> width */
display: block;
}
What you are looking for are css media queries. For example, add this to your css:
#media (max-width:500px){
.list li {
float:none;
}
}
Here's a jsfiddle.
Suggest you read this:
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
http://cssmediaqueries.com/what-are-css-media-queries.html
You can use media queries to set a breakpoint and set the ".list li" width to 100% when the window width is less than the size you want.
Here's a link about media queries: http://cssmediaqueries.com/
Related
I need to centre a div. This div is the width of its 2 containing 'rows'. The width of these 'rows' is defined by their content. The content has both left and right aligned elements. I also need the content which is less tall to be vertically centred.
So far Ive done all of this. I also need a background colour on the rows and a space between them. Ive done the space with div.spacer but im wondering if its possible to achieve the same thing without an empty div to keep my markup cleaner?
Im struggling as display table-row and table-cell don't allow for margin.
I also tried using pseudo content to absolutely position a white block over the top to make it look like there was a space between the rows, but relative display doesnt apply well to an element with display table-row cross browser.
I tried using the border-spacing css property but it adds margin both above and below rows, and I just need the margin below.
Below is my markup. The image shows exactly what I need to achieve, so can I do the same thing without div.spacer?
http://codepen.io/anon/pen/ZWMPgB
<div class="cont">
<div class="row">
<h2>Heading</h2>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="spacer"></div>
<div class="row">
<h2>Longer Heading</h2>
<ul>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</div>
</div>
body {
padding-top: 10px;
}
* {
margin: 0;
padding: 0;
}
.cont {
display: table;
margin: auto;
}
.row {
display: table-row;
background: grey;
}
h2 {
display: table-cell;
padding-right: 50px;
font-size: 3em;
}
ul {
display: table-cell;
vertical-align: middle;
}
li {
display: inline-block;
}
.spacer {
display: table-row;
height: 10px;
}
Maybe you need something like this:
.row > * {
border-bottom: 5px solid #ffffff;
}
This will add 5px space after your rows.
I'm wondering if someone can help with this problem. I spent a lot of time on it and I'm all out of ideas, I've tried various suggestions from Google results, various combinations of flex grow and shrink, and couldn't get it working.
Demo: https://embed.plnkr.co/dIPh53W4DBkmTB51DCHp/ (open with IE 11)
Edit the code: https://plnkr.co/edit/dIPh53W4DBkmTB51DCHp?p=preview
In this case, in tablet view the <ul> flex width should be 90%, but in desktop view the <ul> flex width should only be 55%. However, we don't want the <ul> in desktop view to be shorter than it is in tablet view, so we set a min-width: 864px on <ul> for desktop view. So if you resize screen between 950px and 970px, the <ul> should no longer shrink suddenly.
This seems to work fine in all of Chrome, Firefox, Safari, and IE10.
But in IE11, the element is the wrong width and won't center as expected. I think it's because at 960px browser dimension, 55% would be max-width: 528px on the <ul> element, but it also has min-width: 864px. For some reason, IE11 renders this as being positioned to the left (instead of the center), with a width of 528px. So IE11 seems to ignore the min-width property, it doesn't handle it like the other browsers.
Code example:
index.html:
<div class="progress-bar">
<ul>
<li>Test item</li>
<li>Test item</li>
<li>Test item</li>
<li>Test item</li>
</ul>
</div>
style.css:
div {
display: flex;
flex-direction: row;
justify-content: center;
}
ul {
display: flex;
flex: 1 1 90%;
max-width: 90%;
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: flex;
flex: 1 1 0%;
justify-content: center;
margin: 0;
padding: 12px 0;
list-style-type: none;
background: #f7f7f7;
}
#media (min-width: 960px) {
ul {
min-width: 864px !important;
flex-basis: 55%;
max-width: 55%;
}
}
IE 10 actually works fine in this case, so seems that IE 11 release might have broke something that was already working.
Any ideas how this can be resolved?
Since there seems to be no way to resolve this in IE11, I added a temporary media query to change the behavior for the specific dimensions.
In the case where we want 90% width up to 959px screen size, then 55% after 960px screen size -- I did calculation to determine that we want the <ul> element width to be 864px (960px x 90%) when screen is between 960px and 1570px (864px / 55%). So for this dimension range, I force a width and max-width of 864px.
Then for screens larger than 1571px, the flexbox 55% continues to apply again.
Using this method, I can completely ignore min-width.
#media (min-width: 960px) and (max-width: 1570px) {
ul {
flex-basis: 100%;
max-width: 864px;
width: 864px;
}
}
I'm trying to make two boxes where to put a chart and I'd like them to have same width for the entire width of page and autoresizing when I resize the page:
<style>
#middle_row_contents li {
display: inline-block;
list-style-type: none;
padding-right: 2em;
*display: inline;
}
</style>
<div class="middle_row_box">
<ul id="middle_row_contents">
<li>
<div class="hours_rooms_used">
<div><h3>Meeting hours per room</h3><select id="years_rooms_used"></select></div>
<div class="tab_rooms_used"><canvas id="chart_rooms_used"></canvas></div>
</div>
</li>
<li>
<div class="hours_per_customer">
<div><h3>Meeting hours per customer</h3><select id="years_rooms_customer"></select></div>
<div class="tab_rooms_customer"><canvas id="chart_per_customer"></canvas></div>
</div>
</li>
</ul>
</div>
I tried to put width: 50%; on both and assing width: 100% on middle_row_box's div but it didn't worked...how I could do that? And if I put two elements like and a inside a , shouldn't they appear side by side since in my case looks like in a new row?
Cheers,
Luigi
You need to set width to LIs too. How they should know you want to resize them?
#middle_row_contents {margin: 0; padding: 0;}
#middle_row_contents li {
display: inline-block;
list-style-type: none;
padding-right: 2%; /* ems and % aren't compatible, use the same units */
*display: inline;
width: 47%; /* lower than 48% because of a white-space gap between inline-block elements. Use float to avoid this gap. */
background: red;
}
http://jsfiddle.net/x98g7c3k/
Try this javascript snippet
document.getElementById("hoursd_per_customers").style.width = (document.getElementById("hours_rooms_used").clientWidth - 10) + "px";
Hope it will work.
For more details, Click here...
I have a set of social media icons at the top of my sidebar: outtacontext. But I'm having trouble positioning them in the right place at different viewport sizes. Actually, it's working for all the smaller viewports but the positioning is off for the larger screens.
Here's my main css for this positioning:
#top #sidebar_bg .social_bookmarks {
position: absolute;
right: 69px;
z-index: 152;
margin-top: 102px;
}
#media only screen and (max-width: 989px) and (min-width: 768px){
#top #sidebar_bg .social_bookmarks {
right: 33px;
margin-top: 65px;
}
}
For some reason, with the larger screens the icons appear to get centered within the sidebar. But any media queries I make to adjust just start adding problems.
Can anyone point me in the right direction? Thx.
First of all, I'm Argentinean, so forgive me for my English!
Here's my help...
The HTML markup is:
<div id="sidebar_bg">
<ul class="social_bookmarks">
<li class='twitter'>
<a href='http://twitter.com/outtacontext'>Follow us on Twitter</a>
</li>
<li class='facebook'>
<a href='http://facebook.com/chamomileteaparty'>Join our Facebook Group</a>
</li>
<li class='gplus'>
<a href='https://plus.google.com/106461359737856957875/posts'>Join me on Google Plus</a>
</li>
<li class='linkedin'>
<a href='http://linkedin.com/jeffgates'>Add me on Linkedin</a>
</li>
<li class="rss">
RSS
</li>
<li class="flickr">
Flickr
</li>
</ul>
</div>
The CSS styles:
#top #sidebar_bg {
text-align: center; /* This will center EXACTLY on the middle the icons (acording to the #sidebar_bg width on every screen resolution */
}
#top #sidebar_bg .social_bookmarks {
display: inline-block;
z-index: 152;
margin-top: 102px;
}
#media only screen and (max-width: 989px) and (min-width: 768px){
#top #sidebar_bg .social_bookmarks {
margin-top: 65px;
}
}
ALTERNATIVE CSS - if you want to put it right or left, and use media queries to determine the separation width from one of the sides, you can use this:
#top #sidebar_bg {
text-align: *****; /* right or left */
}
#top #sidebar_bg .social_bookmarks {
margin-*****: 40px; /* right or left */
display: inline-block;
z-index: 152;
margin-top: 102px;
}
#media only screen and (max-width: 989px) and (min-width: 768px){
#top #sidebar_bg .social_bookmarks {
margin-*****: 25px; /* right or left */
margin-top: 65px;
}
}
I solved the problem. I had tried making a media query for what I thought was the largest viewport size. As it turns out, I wrote it for the wrong width (just "barely" wrong but you know what that means -g). The media query for positioning should have been set for a min-width of 1140 px. I had set it for 1122px. So close. LOL
Hey i'm trying to align things next to each other and under each other
Here is the css I'm using.
/* title styles */
#wpp-post-title {
float:right;
width:100px
}
/* thumbnail styles */
#wpp-thumbnail {
float:left;
width:80px;
}
It shows up like this
but i want it to show like this
Use classes instead of ids and look at clear property http://www.w3schools.com/cssref/pr_class_clear.asp
Something like this could work:
jsFiddle demo: http://jsfiddle.net/vPvbn/
CSS:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: block;
height: 80px;
margin: 10px 0;
padding: 20px 0 0 85px;
}
HTML:
<ul>
<li style="background: url(http://i.imgur.com/9M7yb.jpg) no-repeat 0 0; padding-right: 10px;">LEAKED: The Winner of RuPaul's Drag Race Season 4 Is...</li>
<li style="background: url(http://i.imgur.com/eJxiy.jpg) no-repeat 0 0; padding-right: 10px;">WATCH: Rihanna's 'Battlefield' Movie Trailer.</li>
</ul>
/* title styles */
#wpp-post-title {
width:100px
display: inline-block;
.display: inline;
.zoom:1;
}
/* thumbnail styles */
#wpp-thumbnail {
display: inline-block;
.display: inline;
.zoom:1;
width:80px;
}
Without seeing your HTML, I can only guess, but my best guess would be to add the following style to your CSS:
/* You will probably need to change "li" to something more specific, lest it
break your existing list styles. */
li {
overflow:hidden;
}
This will force the list item to wrap itself around your floated bits. Elements that are floated do not change the height of the parent container, so because everything inside the <li> is floated, your <li> element has a height of 0px, and you get the weird behaviour that you're seeing. overflow: hidden fixes this by forcing the <li> to acknowledge the height of #wpp-thumbnail and #wpp-post-title.
Giving #wpp-post-title a height that is equal to your thumbnail should solve the problem, at the moment the browser is automatically determining the height of the div based on the text inside it.
Also, make sure both divs are given display: inline-block property