A simple page which I've designed with bootstrap framework stops becoming responsive once the screen width is below 482px? The only thing i can spot is that it stops adjusting elements once the screen reaches the width of the form input fields plus an equal amount of padding either side, thus i suspect that the issue is somehow related to the form input field width settings, but I am unsure. Can anyone help please? I have read the documentation yet i am none the wiser regarding a solution.
Here's my bootply: http://www.bootply.com/DLxLacH4Jy#
Bootstrap has the following breakpoints
#media (max-width: 767px) {}
#media (min-width: 768px) {}
#media (min-width: 992px) {}
#media (min-width: 1200px) {}
So if you want to apply some specific styles for screens smaller then 482px
all you have to do is to write class like
#media (max-width: 482px) {
.class-to-center {
display: block;
margin-right: auto;
margin-left: auto;
}
}
The solution to the specific problem I was having in my example was that i had over complicated the form with bootstrap grid classes for screen size formats, e.g. .col-xs-4 /col-md-6 etc, this had disrupted the inline form display and in trying to override this, not quite understanding what was negating the inline display, I used a width class to set a width of the inline form, this was stopping the responsiveness below the set width of the inline form elements.
Cleaned and corrected code here; http://www.bootply.com/DLxLacH4Jy
I've taken the liberty of adding this as my own answer to the question, as it does represent the solution to the exact problem i was trying to solve, however both Yuyokk & Joe Conlin's comments above were directly relevant and helpful also, if not the precise solution to my problem.
Related
Would someone mind assisting me with the CSS code I need to have these 4 boxes with the text resizing the boxes for mobile devices (phones)..
This is the website... http://westmetrofire.stg.colorado.gov/
Here's the code (and I apologize I don't know how to use the coding section here).. I think the issue is here (and I need to come up with another #media section that defines the phone screen size)...
#media (max-width: 950px) and (min-width: 450px) {
.box {
text-align: center;
height: 180px;
I've tried several different things and the images gets all skewed.
Thanks for any assistance. Jim
Hello Jim,
#media (max-width: 450px)
.box {
height: 500px;
}
I switched the .box height and was able to get the headings, paragraphs, and the images inside the boxes on what would be an iPhone 12 Pro display. This does however lead to some whitespace below since not all the elements inside each box are taking up the same space. I am also fairly new to CSS, however if this were me I would look into adding a class for each box so you can size them individually until everything fits. For example .box-red or .box-blue. These can then be added to the HTML elements and styled under that media query.
I'm almost certain there is an easier solution, but maybe this well help in the meantime.
Got some weird stuff going on. Trying to fix up an old WordPress theme which was never designed for mobile and I found issues once I added media queries. They seem to be what I want overall on mobile devices but once I hit desktop, everything looks messed up as if it's adapting to the mobile media queries and I'm really confused as to why. Am I supposed to add something to the desktop styles to make this work overall? Here's my site in question: http://destinationbeershow.com/
If you have
<body class="mobile">
at your mobile version and you specify the .mobile in all your rules affecting only mobile, then I guess you will be out of the woods.
Actually, i just solved it. I had min-width for those elements when I meant to use max-width. Duh! I think I'm out of the woods.
You might want to clarify with at least one or two examples of the specific problems you're encountering, but just looking at one or two elements, remember some basic CSS rules.
When using media queries, any rules meeting the conditions will be triggered.
Rules overwrite each other top to bottom, which means whatever is listed last will be the property used.
If you're encountering problems when your rules look different, remember that whether CSS rules overwrite each other depends on a rule's specificity. (This is more of a side note, but important to remember. See this article on calculating CSS specificity if this is a problem you're encountering.)
For example:
#media (min-width: 768px) {
#content {
width: 656px;
}
}
#media (min-width: 480px) {
#content {
width: 100%;
}
}
Once the viewport (browser window size) is 480px your element with id="content" will be 100% width. Then, when your viewport is 768px, it will still be 100% width, because the second rule is overwriting the first one since both rules are true.
If you want rules to override the smaller media query rule, then you have to make sure your larger size media query comes after. For example:
#media (min-width: 480px) {
#content {
width: 100%;
}
}
#media (min-width: 768px) {
#content {
width: 656px;
}
}
Hope that makes sense.
I'd like to know whether it is possible to do something like this:
#media screen and (max-width: 50%) {}
(Note: the snippet above won't work because max-width expects <Length>)
I already tried max-width: calc(50%) but had no luck.
Is there a way to do this with only CSS in WinJS, or will I have to do it with Javascript on layout change?
Update:
See answer below. This is how you can do it for approx. 50%. But what if I want different values, such as 25%? Is there a solution?
I'm not sure with it's for, but I think portrait view can help you out in most desktop browse scenarios.
#media only screen and (orientation:portrait) {
.. styles
}
Here is a live example.
For the big resolutions, it works fine - you will see the 'popular products' at the bottom all in one row.
But if you resize your window to say 800 x 600, and scroll down you will see all the thumbnails in 1 column.
How can I get that to be in 2 columns? Or does Bootstrap not support that?
i.e. I don't want to have to change any of the logic in the default CSS files - I just wanted to see if I was doing anything wrong.
Thanks.
I am afraid you cannot get two columns in the mobile version with pure Bootstrap. The default media queries rearrange any .spanX in one single column:
#media (max-width: 767px) {
...
[class*="span"] {
float: none;
width: 100%;
...
}
}
And nesting an .spanX within another .spanX doesn't work either. What you could do is to extend the default Bootstrap classes with an special version of .span2 for your purposes:
http://jsfiddle.net/LPsQy/
The new .my-span2 behaves as a regular .span2, but for the mobile media query works as a fluid .span6 (takes ~50% percent of the width).
I think it is not trivial to do it without changing Bootstrap's CSS on your own. If you cannot do it nice, here is the ugly solution:
Generated custom Bootstrap without responsive "Narrow tablets and below (<767px)" option. Lets call it Big.
Generated custom Bootstrap with only one media (I choosed "Tablets to desktops (767-979px)"). Lets call it Small.
In Small CSS I removed lines: #media (min-width: 768px) and (max-width: 979px) {, #media (max-width: 979px) {, and their closing brackets }. These are grid system and navbar.
Create your own CSS with following content:
Your new css/bootstrap.css
#media (max-width: 767px) {
... paste Small CSS here ...
}
#media (min-width: 768px) {
... paste Big CSS here ...
}
See example.
Note 1: It may still be not exactly what you want, because bellow 767px the grid system is fixed 2-columned and you may prefer fluid 2-column.
Note 2: Some more changes are required cor hidden-* and visible-* classes to work.
Note 3: You can take some time to diff the CSS files to see what really differs them.
Bootstrap was created to make easy solution to common problem. If your problem is not common, then the solution will not be easy ;) In your case you need to recreate your own CSS by selecting some parts of Bootstrap's...
I'm making a website which has 3 breakpoint 768px, 1024px and 1900 px. Which size of CSS is good to keep outside media query containers?
Adding example
All specific styling inside media queries and all common styling outside
h1 {color:red}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px}
}
#media only screen and (min-width: 1024px) {
h1 {font-size:28px}
}
or
Most common used desktop first
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; font-color:red}
}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
or
Mobile first
#media only screen and (min-width: 480px) {
h1 {font-size:18px; font-color:red}
}
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; }
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
I believe you mean to ask what CSS should not be inside of the media query blocks, right?
If that is the case I recommend that any CSS that does not change be placed outside of the media query blocks. Any colors, font styling, etc. Any CSS that changes placement of elements, the padding, floats, inline or block display types, any structure-type CSS is what I would put in the media query blocks.
Update: To respond to the updated question, are you asking which order you should put the media blocks in? If that's the case as far as I know it doesn't really matter what order they go in. But to comment on the number of possible media queries, I would separate that CSS into different style sheets just to make it more maintainable. Your media queries would then be a part of the links to your style sheets in your HTML.
There are so many ways to approach this problem - and the decision may be different depending on the circumstances. For example, is there an existing site that you are reverse engineering to be responsive or are you starting from scratch?
STARTING FROM SCRATCH
If starting from scratch, one method is to create all of the basic styles OUTSIDE of any media query - so that these styles can be seen by any device (especially those devices that do not support media queries).
Basic styles could include just colors, and fonts etc - or it could be everything except layout.
Then, media queries are used to add the different layouts on top of the basic styles.
MIN or MIN AND MAX
The next question is how will you work your different media queries...
Will you allow them to be applied on top of one another - in which case you may start small and build up - using min-width only.
For example:
#media only screen and (min-width: 600px)
OR you may want to set them in a series of brackets - so that styes for one size do not interact with another size.
For example:
#media only screen and (min-width: 600px) and (max-width: 800px)
Again, there is no right or wrong - both have strengths and weaknesses. The first option allows you to use styles that flow through all widths. The second option allows you to fully control styles that appear in a specific width - without having to deal with the cascade.
DEALING WITH IE
There are a range of ways for dealing with older versions of IE including.
allow IE to see basic styles only
place media queries in separate CSS files and link to these files using media queries... then also link to a selection of these files (like wide screen CSS files only) via conditional comments.
Use some sort of JS solution like respond.js or others to force IE to understand the media queries.
HTH
I've read many articles recently that suggest starting with the smallest resolution first and working your way upwards using media queries. To me that also makes a lot of sense. The only problem is old browsers (IE) not understanding media queries. There are solutions to that problem though (if you Google).