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();
Related
could you please tell me how to make logo at center in using css.Actually I am using media query for mobile view .In desktop my html is working fine , but in mobile view
I want to show logo on center and have two menu option side by side (see below image).
here is my code
#media screen and (max-width: 480px) and (min-width:320px) {
.header{
background: #00B7FF;
flex-direction: column;
}
}
https://stackblitz.com/edit/js-wcvzbw?file=style.css
Assuming you want to center it vertically, adding margin: auto; should do the trick in a flex column layout.
You could make the container width to 100%.
#media screen and (max-width: 480px) {
.container {
width: 100%;
}
}
And then align the header to center.
#media screen and (max-width: 480px) {
.header{
text-align: center;
}
}
You can see the example here.
I have a text (in a div) which shows on desktop and mobile screens.
Expected
I want the text to only show in #media only screen and (max-width: 768px)
How to
hide the div with display:none or
is there any other solution?
Use media query.
Set display:none to div and then apply display:block for mobile using max-width media query.
Stack Snippet
div {
display: none;
}
#media only screen and (max-width: 768px) {
div {
display: block;
}
}
<div>Text</div>
or you can use the min-width media query. Less code here
Stack Snippet
#media only screen and (min-width: 768px) {
div {
display: none;
}
}
<div>Text</div>
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.
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".