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%;
}
}
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;
}
Want to know correct (the best) way how to write (code) css for different window widths.
Here is live example https://jsfiddle.net/q0ony7Lb/16/
For example, have left, right sidebars and main content (#middle).
<div id="left">Content in left div<br/></div>
<div id="middle">Content in middle div<br/></div>
<div id="right">Content in right div<br/></div>
If widow width is less or equal to 400px, then want to show only #middle.
If width more than 400px and less than or equals to 700px, then display #middle and #left.
If width more than 700px, then display all.
At the moment doing in such way:
1) write default css (as understand "default" css applies if no other rules inside corresponding #media screen). Default css like
#left {background-color:#fff; background-repeat:repeat; background-position:left top; width:180px; height:25px; font-size:16px; font-family:Verdana; color:black; border-style:solid; border-width:1px; border-color:#000; text-align:left; padding:0px 0px 0px 0px; }
2) For certain window width write special css rules. Like
#media screen and (max-width: 400px) {
#left, #right { display:none}
#middle { width:350px; height:75px; }
}
#media screen and (min-width: 401px) and (max-width: 700px) {
#right { display:none}
}
As result, for example, if window width is less or equals to 400px then hide both sidebars and #middle resizes.
As i see applies css values from "default" and if inside #media screen and (max-width: 400px) { exists different values from "default", then applies different values (different values change "default" values).
Seems all works. But may be some better way how to do all?
Another way may be to write (repeat) whole rules for each width of window. And do not write "default" values. But in such case code would be longer....
One suggestion in the above code.
Since #right { display:none} applies for all widths less than 700, you can add it in #media (max-width:700px).
Use max-width media queries in descending order and keep changing the styles for the lower width screens.
https://jsfiddle.net/afelixj/q0ony7Lb/17/
How do i assign a fixed width property to the container class in bootstrap. I have tried to assign a width value to the major container but when i resize the browser, the content of the container become unresponsive.
<body>
<div class="container"> //This is the major container
</div>
</body>
You can either use <div class="container-fixed"> or your own media query in which you can specify the custom width for various resolution.
Here is an sample
#media (min-width: 768px) {
.my-custom-container{
width:600px;
}
}
#media (min-width: 992px) {
.my-custom-container{
width:720px;
}
}
#media (min-width: 1200px) {
.my-custom-container{
width:900px;
}
}
The default Bootstrap .container class has 15px padding on both left and right sides.
You can adjust this by adding additional padding to your container:
.container { //or use a custom class like .custom-container
padding-left: 100px;
padding-right: 100px;
}
Or you could also adjust the width of your container like so:
.container {
width: 75%;
}
Both of these solutions will maintain responsiveness, but the first one will potentially cause issues with smaller screens. You could also use %'s there as well (like padding-left:10%).
Whatever you end up using depends on your specific situation and the desired outcome. You should play around with different screen resolutions and pages on your site to make sure whatever you go with works well.
I have a possibly trivial question regarding responsive design.
The fluid grid for columns is amazing. However, is there any grid system for rows? For example, if I want to have a box that has margin-top in large screen but none in small screen, how would I do it?
you can use media-query, for example that you want is here:
jsFiddle
CSS:
div{
width:100%;
height:50px;
background:#ddd;
margin-top:0px;
}
#media (min-width: 500px) {
div{
margin-top:100px;
}
}
with some transition it will look better. (DEMO)
You are looking for something called a media-query. It lets you specify CSS but only if the browser viewport is less than (or greater than) a specified size. According to the src the small screen is triggered at less than 768px. So a rule like the one you are asking for might look like this:
<style>
#media (max-width: 768px) {
.row {
margin-top:0
}
}
</style>
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%;