I am using Bootstrap's responsive style sheet and I have 4 squares in divs spanning 12 columns, so |3|3|3|3|
and when I view this in a mobile browser I see:
|12|
|12|
|12|
|12|
But I want to see:
|6|6|
|6|6|
In other words, I dont want the items to appear one after the other, more two on one row and two on the next.
Is this possible?
By default bootstrap's media query does the following:
#media (max-width: 767px)
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
}
In order to achieve the layout you need, set another media query something similar to :
#media (max-width: 767px)
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
float: left;
width: 50%;
}
Tweek the css as you see fit.
If you're only concerned with .span3 DIVs a media query like this will work..
#media (min-width: 400px) and (max-width: 767px) {
.row-fluid .span3 {
width:44%;
float:left;
}
.row-fluid .span3:nth-child(3) {
margin-left:0;
}
}
This would still allow the cols to switch to 100% width (stacked) at less that 400 pixels for tiny screens. Demo: http://bootply.com/69753
Another option is to use the responsive utility classes as shown in this demo:http://bootply.com/64868 ,but this requires separate markup for each responsive "view".
Related
I am trying to make a responsive webpage with my site here: https://chunzg.github.io/about.html
I have made a flex container for the photo and text.
Have used the media query below to first test on my laptop screen :
#media only screen
and (min-device-width: 300px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2) {
.sidebar {
width: 100%;
}
.photo {
width: 100%;
}
.text {
width: 100%;
}
}
but it doesn't work - nothing changes. I would like the sidebar, photo and text to be stacked vertically on top of one another if I am looking at it on a narrow screen.
I know I must be doing something wrong but just don't have enough experience to know what needs to change
Thanks
Hey I am giving a reference:https://www.w3schools.com/css/css3_mediaqueries_ex.asp
I couldnt understand the exact question but I think it should be like this:
/* On screens that are 992px wide or less, go from four columns to two columns */
#media screen and (max-width: 600px) {
.sidebar {
width: 100%;
}
.photo {
width: 100%;
}
.text {
width: 100%;
}
}
In my code I scripts lets webpage to change width by 100 if the screen size is less than 600 or equal to 600.(Maybe it can be usefull for your ipad or small devices screen)
Also why did you used min and max at the same time?
Note that I am not professional but I have had some experiences with css so that my answer maybe could not be the solution. But lets try this.
I wanna make my website responsive and all sizes correctly work, but the problem is when the screen is <420px they use the media query 992px information, not the 420px why ?
the problem is all classes work correctly in 420px but in this class, they take the 992px
#media (max-width: 420px) {
div.test {
width: 200px;
}
}
<div class="container test">
<img src="img/img.png">
</div>
It sounds like you're calling a max-width:992px media query after your max-width:420px media query is defined. Keep in mind CSS is compiled top-down, and your logic needs to accommodate this. Instead, consider your media query order:
#media (max-width:992px) {
...
}
#media (max-width:420px) {
...
}
The best practice is to build the site "mobile first", meaning the default values are for the mobile version, and then you can override width definitions using media queries.
So if you want 200px on 420px width, and 400px on 992px width, you should do something like:
.test {
width: 200px;
}
#media screen and (min-width: 992px) {
.test {
width: 400px;
}
}
Always use min-width and always start with the small resolution and override with bigger resolutions.
Hi I'm fairly new to bootstrap and what I'm trying to achieve is to have a jumbotron on top of my page with different paragraph formatting to accommodate for a background image which takes lets say 30% of full width space.
I have offset my text by padding-left: 300px; and it looks fine on desktops but this rule also applies to a paragraph in mobile device mode resulting it being very skinny and tall.
Is there a way where I can set lets say 3 different paragraphs each showing under certain screen size?
Just use media queries:
#media screen and (max-width: 320px)
{
p{
padding-left: 0;
}
}
#media screen and (min-width: 321px) and (max-width:800px)
{
p{
padding-left: 100px;
}
}
#media screen and (min-width: 801px)
{
p{
padding-left: 300px;
}
}
I have some problems with my responsive design.
I have 20 boxes like this
I want to do responsive with mediaqueries
#media screen and (max-width:960px) {
}
#media screen and (max-width: 783px) {
}
#media screen and (max-width: 524px) {
}
But I can't control the boxes in my design. JSFiddle
Try some solutions like these:
http://purecss.io/grids/
http://semantic-ui.com/
Or try adding a specific width to each box for each media query.
I just put these lines of code into the CSS area and it worked outstandingly:
#media screen and (max-width:1500px) {
.block {width: 250px}
}
#media screen and (max-width: 700px) {
.block {width: 100px}
}
If only the width needs to be responsive you can work with max-width and width in percentages. Like so: http://jsfiddle.net/bbwkc/3/
.block_main {
max-width:750px;
width: 75%;
}
And so on.
How to center 3 images in a row at 480px screen width, and 2 images at 320px?
Here is JSFiddle Demo
<ul>
<li><img/></li>
...
</ul>
#media (max-width: 480px) {}
#media (max-width: 320px) {}
Put a display: inline-block; on your <li> and text-align: center; on your <ul>. This way your images will allways be center aligned. In your media queries you can set the width of your <ul> (display: block;) so you'll have the correct amount of images lined next to each other.
example:
http://jsfiddle.net/skeurentjes/qfrRG/2/
Something like this does the job:
http://jsfiddle.net/isherwood/qfrRG/4/
#media (max-width: 480px) {
/* would like 3 centered images in a row */
img {width: 30%; margin-left: 2%;}
}
#media (max-width: 320px) {
/* would like 2 centered images in a row */
img {width: 45%; margin-left: 5%}
}
Adjust widths and margins to suit.
Is this something like what you were looking for?
Just beware it uses some attributes that aren't available in old browsers. Specifically nth-child();