i have a problem with order div on small screen.
My code:
<header>
<nav>...</nav>
</header>
<div id="main">
<section id="slider">...<section>
<section id="new_articles">
<article>...</article>
<article>...</article>
<article>...</article>
<article>...</article>
<section>
</div>
<aside>
<section id="calendar">...<section>
<section id="ads">...<section>
<section id="forum">...<section>
</aside>
<footer>...</footer>
I would like to show this in the order:
1. header
2. slider
3. calendar
4. ads
5. new articles
6. forum
7. footer
what i should change?
"slider", "new articles" and "forum" have a dynamic height
You can play with float:
Here is example: https://jsfiddle.net/3f1s70er/1/
When some element is 2nd in the flow, but has float: left and element that is 1st in the flow, but has float: right - then those elements have different order.
I used order. Thanks for help
You can use media queries To make It responsive
Refer:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
http://www.w3.org/TR/css3-mediaqueries/
Related
I am trying to add space between elements <header> and section <section> but they are stuck to each other, such that when I apply margin to the bottom of the the top element or at the top of the bottom element, the top element moves down along with the bottom element, this only happened after I added the footer.
And I did a search but I was not able to find solution for this.
Thanks to All..
.hclass {margin-bottom:20;} // header - the top most part, need space below this
.tryi {margin:top;} //section the second part, need space above this
#divfootr {width:100%;height:auto;position:absolute;bottom:0;text-align:center;} // footer code
<header class="hclass">
<nav id="indxpg">
<div class="mainnav">
</div>
</nav>
</header>
<section class="tryi">
<div id="logotable">
</div>
</section>
<footer class="footer">
<div id="divfootr">
<p><span class="copyright"><strong>© 2016</strong></span></p>
</div>
</footer>
Your way to add margin is incorrect. It must be something like this (for a fixed margin) :
margin-top:20px;
Your missing px.
.hclass{margin-top:20px}
I want to preface my request by apologizing for asking a question that has already been asked; I've tried a lot of the suggestions I've seen and been unsuccessful in getting my code to work.
Onto my question: I'm trying to get four divs to position themselves side by side whenever possible on my Wordpress site starting from when the screen width is 1030px or smaller. My layout is responsive, and my divs are 300px wide, so I don't want them to sit adjacent to each other if they will break their container (i.e. if the container's width is 340px, I don't want the divs to be next to each other; I want to see the divs stacked on top of each other. If the container's width is 800px, I want a 2x2 grid of divs).
My site (the divs are the green blocks): http://coolnewssite.com/
Html for the divs (the "sidebar" is the container):
<aside id="sidebar" class="span4">
<div class="widget-area" role="complementary">
<aside id="text-18" class="widget widget-1 odd default widget_text clearfix">
<div class="textwidget">
<img src="http://coolnewssite.com/wp-content/uploads/2014/02/SampleAd.jpg">
</div>
</aside>
<aside id="text-3" class="widget widget-2 even default widget_text clearfix">
<div class="textwidget">
<img src="http://coolnewssite.com/wp-content/uploads/2014/02/SampleAd.jpg">
</div>
</aside>
<aside id="text-17" class="widget widget-3 odd default widget_text clearfix">
<div class="textwidget">
<img src="http://coolnewssite.com/wp-content/uploads/2014/02/SampleAd.jpg">
</div>
</aside>
<aside id="text-19" class="widget widget-4 even default widget_text clearfix">
<div class="textwidget">
<img src="http://coolnewssite.com/wp-content/uploads/2014/02/SampleAd.jpg">
</div>
</aside>
</div>
</aside>
Any clues as to how to set this up? I've tried fiddling with display: inline-block and float:left, but so far, no luck. Thanks in advance for your help!
At the breakpoint you want them to sit side by side, try the following:
// This will tell the sidebar to be full-width rather than the set 300px
aside#sidebar {
width:100%;
}
.widget {
// This sets the max-width of the ad area to 50%
max-width: 50%;
// This tells the browser to put the border and any padding inside the max-width
box-sizing: border-box;
// This will sit the elements next to each other
float: left;
}
.textwidget {
// This overrides the 300px width on the inner div
width: auto;
}
Hello all and thanks for the input.
I've looked at a number of templates but haven't felt that I've found a clean way of presenting vertically centered content of a "section" on single page layouts. I am referring to the entire section space space here, not the elements within.
The desired effect is to limit the viewable content to sections at a time and use a scroll to move to the next section on the single page ... easy enough with easing.js.
So for a psuedo markup there would be something like
<section id="topic1"
<random element>
<random element>
</section>
... Some space added to ensure no overlap of sections are viewed here ...
... e.g. margin-top: 100px or 10%
<section id="topic2"
<random element>
<random element>
<random element>
<random element>
</section>
... Some space added ...
... e.g. margin-top: 100px
...etc
As the browser moves to each section (by anchors) each one would be shown with " empty space" and it delivers a nice effect. The challenge is to always have the sections vertically centered as we change devices in a 'responsive' type approach. I've also found some inconsistencies with Internet Explorer. Understandably at certain screen sizes (say table landscape height and phones) this becomes impossible and scrolling will be necessary.
Any thoughts on a CSS approach to implement this cleanly would be appreciated.
You can do it by using a wrap and using the css properties display:table and display:table-cell together with vertical-align:middle
HTML markup with your needed wrap:
<section id="topic1">
<div class="wrap">
<div> aaaa</div>
<div> aaaa</div>
</div>
</section>
Needed css:
section{
display:table;
height:220px;
background: #ccc;
width:100%;
}
.wrap{
display:table-cell;
vertical-align:middle;
}
Living demo
Using line-height is a more simple method but you need to know the height of the section.
You can find more ways about how to accomplish it here.
There are a couple different ways to can use the Bootstrap markup to achieve what you are looking for. Here is one example:
.space {
padding-bottom: 200px;
}
<section class="container space">
<div id="scroll-to" class="row">
<div class="col-xs-6 col-xs-offset-3">
<p class="text-center">Random Elements</p>
<p class="text-center">Random Elements</p>
<p class="text-center">Random Elements</p>
</div>
</div>
</section>
<section class="container space">
<div id="scroll-to" class="row">
<div class="col-xs-6 col-xs-offset-3">
<p class="text-center">Random Elements</p>
<p class="text-center">Random Elements</p>
<p class="text-center">Random Elements</p>
</div>
</div>
</section>
I would try and concentrate on the offset classes and look at using .center-block and .center-text. Center-block will align your elements center, and center-text will do the same for text. This will keep you from bloating your css and keep everything predictable for responsive design.
Hope this helps.
I have been using twitter bootstrap to design my homepage and something keeps bugging my mind about the usage of media queries in css frameworks such as twitter bootstrap.In my example i am displaying four images like
<div class="container">
<div class="row">
<section>
<article class="span3">
<img src="gandalf1.jpg" />
</article>
<article class="span3">
<img src="gandalf2.jpg" />
</article>
<article class="span3">
<img src="gandalf3.jpg" />
</article>
<article class="span3 last">
<img src="gandalf4.jpg" />
</article>
</section>
</div>
</div>
With the row class and basic resets for section,this works surprisingly well and it responds well down to mobile.I feel that i have no say on what's happening and so i want to get some control.
What i want is to force everything under the <section></section> into some kind of contract to make them behave in some way,for instance,in my example at some point,the images are listed one after another vertically.
In my contract for instance,i want the images to never leave their original order - (the original order is horizontal i.e one row with four images,the second row with four images and so forth) and should respond to the change of width by resizing without breaking out of their confines when the width is between 600px and 980px
#media screen and (min-width:600px) and (max-width:980px) { ... }
To achieve this,i have tried many things and the first thing i thought of is to make the <section> and inline-block,but that failed to produce the desired effect.I am afraid trying to redo the .row class will be a very tall order at those widths.
Should i concentrate my efforts on looking for a solution using my css code i write or should i try and modify the .row class at those widths?.
I'm stying bootstrap sticky footer on my project: http://twitter.github.com/bootstrap/examples/sticky-footer.html
Is it possible to set height of content to fill remained space?
Let me explain. I want to reside image and I need to it gets sized relates to available height.
If your intention is fill any space between the end of the content and the start of the footer, I can see all sorts of challenges.
Depending on the specifics of your image, maybe you can include it as a background like this:
http://jsfiddle.net/panchroma/hBzjn/
You could use media queries, possibly with different images at different viewponts and also use padding to refine the results.
Good luck!
HTML
<div id="wrap">
<div class="contentWrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p>page content</p>
</div>
<div id="push"></div>
</div><!-- end contentWrap -->
</div> <!-- end wrap -->
<div id="footer">
<div class="container">
<h3>sticky footer </h3>
</div>
</div>
CSS
#wrap{
background: url(http://is.gd/0QPvoC) left bottom; /* define image and position */
}
.contentWrap{
background-color:#fff; /* quick fix so background image is hidden behind main content */
}