I truly wouldn't be posting a question if I hadn't already spent hours digging through files and researching. I must really not know what I'm looking for :-|
I want to know how and why divs in a container (or the container itself) can change to 100% width when a responsive design is scaled to iphone dimensions - like the below:
http://demo2.woothemes.com/whitelight/about/
the sidebar sits underneath the main content, then the divs inside stretch to 100%
It's driving me absolutely mad! Any help / direction must appreciated :)
Basic Media query responsive layout example:
Demo: http://jsbin.com/ayojan/1/edit
Resize browser to see effect.
div {
outline:solid black;
}
.content {
width:80%;
float:left;
}
.sidebar {
width:20%;
float:left;
}
#media only screen and (max-width: 767px) {
.sidebar {
width:100%;
float:none;
}
.content {
width:100%;
float:none;
}
}
Key points: inside the media query you unfloat the elements (float:none) and set them to width: 100%;
Related
This is the codepen:
https://codepen.io/GummyGod/pen/XZqbKY
That's the query i wrote:
#media screen and (max-width:500px){
.content{
display:flex;
flex-wrap:nowrap;
}
.sidebar {
order:-1;
}
.resume {
width:100%;
order:;
}
}
Basically,at the end of the css file i made a css media query in order to make it responsive at widths from 0 to 500px ,however, when the size is in that range of pixels that weird tag shows up and i can't seem to be able to style it
Try this. Remove width and float:left for sidebar,main classes. Adjust padding for space between sidebar and main class based on your need.
.sidebar, .main {
display: table-cell;
}
I'm working with a theme that is supposed to be responsive but when the two column shortcode is used and a page is viewed on smaller browsers or mobiles, the columns shrink to fit the browsers width side by side instead of stacking.
It looks awful on smartphones, I am trying to make the columns stack.
You can see the page at: http://goo.gl/t8QOA5
Relevant css:
.one_half {
float:left;
line-height:22px;
margin-right:2%;
width:49%;
margin-bottom:27px;
display:block
}
.one_half_last {
float:left;
line-height:22px;
width:49%;
margin-bottom:27px;
display:block
}
use media queries to write conditional css based on the width of the viewport.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Example:
#media (max-width: 480px) {
.one_half, .one_half_last {
width: 100%;
}
}
Here is my template:
<div id="block1">text</div>
<div id="block2">
<span>content of variable size</span>
</div>
and some basic CSS
#block1 {
float:left;
}
#block2 {
float:right;
}
#block2 span {
}
When reducing the width, how could I make it behave so that, once the two divs cannot fit the page inline, the second div will go below the first (rather than be right floated anymore)?
NOTE: I would like to avoid using media queries.
This responsive theme CSS would be used for multiple sites with content of different sizes.
JSFiddle
In this current JSFiddle, The second div is on the right hand-side. It is fine to me.
If possible without media queries, i would like to design css so that once the second div goes below , the span content is not at the right-hand side
If you mean "I want div2 to go below, but aligned left this time", it's not possible as this behaviour is not predictable using CSS only.
There's no CSS-way to know when it goes below, so impossible to change the floating attribute at this moment.
You could achieve this using Javascript or jQuery. Logic would be:
on ( window resize ) {
if ( div1_width + div2_width > container_width ) {
Change div2 CSS.
}
}
Of course I would suggest to use media queries too.
You can set min-width on the divs. Then, when the line is too small, the one on the right will drop down. However, it will still be floated which may cause issues. That's where media queries come into play to fix such things.
Too many media queries would not make for a pretty responsive design, not to mention they would be a headache.
Anyway, you would have to use at least one media query to achieve a truly responsive design, the simplest example is below:
<div id="block1">text</div>
<div id="block2"> <span>content of variable size</span>
</div>
* {
padding: 0;
margin: 0;
}
#block1 {
float:left;
height: 200px;
background: yellow;
width: 49.5%;
margin-right: .5%;
}
#block2 {
float:right;
height: 200px;
background: tomato;
width: 49.5%;
margin-left: .5%;
}
#block2 span {
}
#media only screen and (max-width : 768px) {
#block1 {
float:none;
width: 100%;
}
#block2 {
float:none;
width: 100%;
}
}
Fiddle here.
If you want to have a look at something more practical, a good starting point is here(its an example of an accordion changing layouts depending on screen size, using media queries).
I have a responsive layout where the sidebar drop below the content in mobile.
In full width the list of items in the sidebar are at 100% width. So its like one item in one row...
In mobile I want 2 items in 1 row... by setting the width of each item to 50%. Not sure where I am going wrong...
DEMO: http://jsfiddle.net/nN6Zt/
#item {width:100%;background:#eeefff;}
#list_item{display:block;min-height:60px;border:1px solid #333}
#media only screen and (min-width:480px) and (max-width: 768px)
{
#item {width:50%;}
h1 {font-size:180%;line-height:120%;}
}
You have given 50% width to item, give it to list-item
Working Demo : http://jsfiddle.net/surjithctly/nN6Zt/2/
#item {width:100%;
background:#eeefff;
float:left;
}
#list_item {
width: 49%;
float: left;
}
49% to avoid breakage.
Or you can use box-sizing:border-box; as Tom mentioned.
#list_item {
width: 50%;
float: left;
box-sizing:border-box;
}
You have assigned the css for div but a doesn't have any css assigned to it....since your end child element is a a tag, its more semantic to assign a styling to it for all media queries use!
amend this s to your css for #media only screen and (min-width:480px) and (max-width: 768px) {} (or whichever was required to bring in the effects)
#item > a#list_item {
display:inline-block;
width:48%; /* to avoid any clash for breaking */
}
demo
since the hype is Responsive Web Design, and I already know how to write it, I am just here to clarify a few questions of my own before I keep doing something wrong if I am.
If we set a divs style like so:
div {
width:200px;
height:200px;
background: #000;
margin: 10px 5px;
}
Now to be responsive the way we want would we do-
div {
background:#000
}
#media screen and(max-width:1200px) {
div {
width:300px;
height:300px;
margin: 20px 5px;//Question is here
}
}
#media screen and(max-width:720px) {
div {
width:300px;
height:300px;
margin: 20px 5px;//question is here
}
}
#media screen and(max-width:360px) {
div {
width:200px;
height:200px;
margin: 10px 5px;
}
}
The question is in face if we set the margin or any style that is going to be the same for an for greater width or minimum width do we keep assigning it do can we leave it at that? So if we set the margin at 20px 5px will that stay with it until 1200px? And the same goes for reverse will it stay the same until it gets to 360px and then change?
It's just a question that has been bothering me.
The max-width:1200px media query will apply to all sizes below, meaning that you won't need to re-apply the same values again in the 720px one.
In comparison:
#media screen and (max-width:1200px) {
/* applies to all viewports below 1201px */
}
#media screen (min-width:721px) and (max-width:1200px) {
/* only applies to viewports above 720px and below 1201px */
}
In conclusion, seeing as the values in your second (720px) media query rule is the same as the bigger one, they are applied twice (not necessary).
i think use percentage value to margin and width. You can avoid the resizing problem