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.
Related
I tried using photoshop and I need to know how much height should be given for image in photoshop for each widths 575.98px ,767.98px,991.98px,1199.98px to get a good image.
#media (max-width: 575.98px) { ... }
#media (max-width: 767.98px) { ... }
#media (max-width: 991.98px) { ... }
#media (max-width: 1199.98px) { ... }
Whatever the image class, id or just the tag is, apply a width of 100%;
img {
width: 100%;
}
I use Bootstrap 4 for making my website responsive. Bootstrap is a Mobile first. As I understand that's mean I should first write CSS for small screens and then add breakpoints for bigger screens.
That's what I have:
#main{
width: 100%;
}
#media (min-width: 576px) {
#main{
width: 90%;
}
#media (min-width: 768px) {
#main{
width: 80%;
}
}
When in Chrome I open console and click "Toggle Device Toolbar" and change screen width to 350px ("responsive"), it uses css for 'min-width 768 px' (not even for 576px) and makes #main width 80%.
Why is that happening and how to solve it? Thank you!
try to use #media screen and (min-width: XXXpx) { ... } instead of just #media (min-width: XXXpx)
You could use #media screen and (min-width: [...]px). Otherwise your code seems good.
I am trying to use #media query to hide a span for tablet screen only like this:
#media screen and (max-width: 600px){
.tablet-screen {
display: none;
}
But it seems to be not working. Can someone correct me that i have to use max-width not min-width to hide span right ?
You have to use both. Under 600px it's not tablets, but smartphones.
You have to say it's min-width: 600px and max-width: 1280px. I will let you define your own breakpoints ;)
Demo : https://jsfiddle.net/Zetura/453gh680/
#media screen and (min-width: 600px) and (max-width: 1280px){
.hide-tablet {
display: none;
}
}
If you use min-width then increase it from top to bottom. Sequence matters!
#media screen and (min-width:220px) { ..... }
#media screen and (min-width:500px) { ..... }
#media screen and (min-width:700px) { ..... }
#media screen and (min-width:1000px) { ..... }
CSS reader stops reading the styles in the particular block when the current screen size is more than given in particular block.
And you don't need to use both at same time.
max-width is just opposite in sequence, biggest width first. But limits the biggest screen width supported. (Why? -> Just think like CSS reader.)
I need help to change % width on my category images within my site whenever my screen gets smaller. Or the images will get super small on smaller resolution.
What I want to achieve is something like this: http://www.twitch.tv/directory
I've tried to do this by using this code. (but it isnt working)
.category-list-item {
float: left;
#media screen and (max-width: 769px) {width: 20%;};
#media screen and (min-width: 480px) {width: 25%;};
#media screen and (max-width: 480px) {width: 33.33%;};
padding: 1em;
Would be super greatful for any help!
/ Martin
As rekire says, you messed the syntax, and you need to set full rules.
Also, there shouldn't be semicolons after the rules.
And lastly, your 2 final rules cover all the posibilities, width being greater or smaller than 480px, so the first rule will never apply.
I have changed it so that you have an style for lower res, another for higher res, and the default applied in between
.category-list-item {
background-color:red;
}
#media screen and (min-width: 769px) {
.category-list-item { background-color: green; }
}
#media screen and (max-width: 480px) {
.category-list-item { background-color: blue; }
}
<div class="category-list-item">Test</div>
I have a div class called form-groupBlogg
It is a form in which I want to adjust the width of it in both ordinary computer and mobile version. I have written the following CSS:
.form-groupBlogg{
width:74%;
margin-top:20px;
}
#media screen and (max-width: 768px) {
.form-groupBlogg {
width: 80%;
}
}
Only problem is that the #media screen and (max-width: 768px)-part wont adjust the width of the div class in the mobile version. The first part with the width: 74% works correctly. How can I adjust the width in the mobile version?
NEW answer:
I guess you just want a wider form on the small screens.
Your site is adjusted in a wrapper, so the width:80% is small on a small screen. Try to adjust the width of the form-groulBlogg and form-group to 100% on the smallest screens. Looks better in my tests.
Try:
#media screen and (max-width: 500px) {
.form-groupBlogg {width: 100%;}
.form-group {width:100%;}
}