I'm a novice programmer, only took one course in high school. I'm trying to make a website for my business, using c9.io to write- but can't figure out how to make my page adjust to any size. I've tried finding a solution online but can't seem to fix my problem- I'm completely stumped! Good luck and thanks!
HTML and CSS code below.
https://docs.google.com/document/d/1wl1Ui-vvB39ysCQd2B5-7Yl-gYRPdQ7hUyD_L-tDcs4/edit
Edit:
The problem has been fixed, here is the CSS code that I used:
.container4 {
width:99%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
Media queries alongwith twitter bootstrap or flexbox are used to make websites responsive.
Media queries help you manage layouts for different devices say phones, tabs and desktop. Keep following in mind while writing css:-
Use ems/rems for margins/padding, avoid using pixels
2.use sass instead of pure css, its really easy to scale
Related
I was wondering if there's a maximum number of breakpoints that a website should have. Just a way of seeing ifit has too many breakpoints which I believe is not a good sign, or is it?
The website I built has 8 breakpoints. Is it bad? Should I have less?
The site is a bit complex althought I tried to gather as much code as I could that has the same characteristic, like:
CSS:
nav ul li, table, video, section ul, footer, .botoes, #nome, #destaque {
margin: auto;
}
nav ul li, .lista p, .smilies {
font-size: 37px;
}
You should just keep it simple and use as few breakpoints as possible to achieve the wanted results. There is no absolute maximum number for this, as more complex websites probably require more breakpoints.
This explains good practices using breakpoints well.
Mobile-first design is something one should be aware though: Create your website for small screens first, and set breakpoints as the screen gets bigger, not the other way around. This is useful, because this way you let computers, which usually have more processing power than smartphones, handle breakpoints, and smartphones can just display the site "as is", without having to calculate large amounts of breakpoints.
Read more about mobile first
I'm in the process of creating Fluid images for my website (see the CSS below)
I'm taking a mobile first approach when it comes to media queries.
My question is - what exactly does 'image-rendering: auto'; do?
Does this rule ensure optimal image quality at any size? Should I be using this rule when apply mobile styles?
Should I be using image-rendering: OptimizeQaulity; ?
img {
max-width: 100%;
height: auto;
image-rendering: auto;
}
Many thanks,
P
Image Rendering describes the process of how the browser does work with your (on mobile versions probably) overcalled images when downscaling them.
image-rendering: optimizeQuality trys to give you the best looking result possible. But on mobile first you may want to try image-rendering: optimizeSpeed.
For further information you can google image rendering css which will result in a lot of information. My quick tipps is the htmlcss.wikia right here or the mozilla docs article.
If you need further information feel free to ask.
Best regards,
Marian.
Basically, I want to reset (undo) a Twitter Bootstrap 2.2 reset for img that originates from the reset.less file.
Twitter Bootstrap is essentially setting this css:
img {
width: auto\9;
height: auto;
}
What CSS can I add after this to undo this? I'm actually using the bootstrap-sass gem, so that's what I need to deal with.
If I comment out the CSS in the gem source, my issue is resolved, but that doesn't help me when the gem is loaded by heroku. So I need a local override/monkey patch to fix this.
Thanks. Here is the issue: https://github.com/desandro/isotope/issues/335#issuecomment-11507013 and here: https://github.com/twitter/bootstrap/issues/6541
The problem without this patch is that the awesome isotope library can't function properly as chrome and safari can't draw the images correctly.
You can add in a new duplicate selector underneath this one:
img {
width: auto;
height: auto;
}
That should override it.
Adding it into a new file that is called under the main one in the <head> section of your document would work too.
I posted the answer here: https://github.com/twitter/bootstrap/issues/6541
Inlining this in the CSS worked, like this:
<img src="blah-blah" width=398 height=265 style="width:398px; height:265px">
In fact, I also tested Isotope without using the width and height attributes, like this:
<img src="blah-blah" style="width:398px; height:265px">
And that worked fine! Any recommendation if it's better to only specify the CSS?
I was able to very easily test this without bootstrap (or bootstrap 2.0) by using this CSS:
img {
width: auto;
height: auto;
}
It seems that the width and height in the CSS do override the image properties, and before the images get loaded, the browser does not know how much space to allocate, and then, even after the images load, the spacing is still wrong, at least with Isotope. Inlining the style does workaround the issue. I think I tried using regular styles, but that didn't seem to work, but I may have had a CSS priority issue. Any way, since the image size is laid out with the image properties, it's rather natural to put in this tiny bit of inline CSS. I hope we eventually find a better solution, as this will surely affect others when upgrading.
Or at least this should be documented that one needs to use the inline style for the width and height of the image rather than the properties.
Im using the bootstrap examples with Meteor (fluid.html). I've updated my bootstrap to the latest 2.0.4.
However I'm having an odd problem with the padding-top: 60px; conflicting in the wrong way with
#media (max-width: 979px)
body {
padding-top: 0;
}
and well.. webkit seems to do this (only on Meteor for some reason):
It ends up looking like this:
(Theres a gap at the top above the black bar) - Of course this is the fluid layout so the browser needs to be dragged down to small view (for iPhones/Androids/Tablets)
How would I manage to get the browser to take padding-top: 0 as the preference so It doesn't do this? Or why is it doing this (the css files are loaded in the same order - first bootstrap.css and then bootstrap-responsive.css. I can't figure out the difference
(its supposed to be like this: http://twitter.github.com/bootstrap/examples/fluid.html)
After upgrading to 2.0.4 I still had the issue where at certain resolutions content would get hidden when using navbar-fixed-top. This is what happens at certain resolutions:
After tweaking the CSS I came up with the following which fixes it at all resolutions when added to the top of my CSS file:
#media (min-width: 979px) { body { padding-top: 60px; } }
Hopefully this will sort out your issue.
It does not just do this...
It does more than that. You should inspect what padding-top is set to instead, go through the whole panel and see what is setting it, this should tell you where the problem lies. In a really worst case you could use padding-top: 0 !important; although it should be known that !important is bad advice and you should be able to get around not having to add that.
I don't see how Meteor is responsible as they don't add in any major CSS changes as far as I am aware of; but it might be that there is, but you can only tell if you look where padding-top is set.
I'm about to start designing my site that I coded in php. It's a rather complex site...
Obviously, I want to make it suitable for all browsers and devices.
Should I code the CSS using fixed pixels for normal computer dimensions and when I'm done with that make another stylesheet for other devices such as iphone and ipad?
Or should I attempt to make an adaptive site that works with all resolutions? In this case, should I look into CSS frameworks? Any recommendations?
Here's some tips for designing a web page that works on ALL screen sizes. I'll delve a bit into media queries and other things too.
On web pages I've done in the past they usually have existing graphics (usually banners/headers, etc.). so I usually design the web site using a maximum width for example, if the banner image that already exists is 900px wide I'm going to make the page 900px wide, more specifically the content wrapper will be 900px wide and it's contents will sum to 100%.
Keep everything in a global content wrapper. This is the easiest way to ensure the page size stays 100% consistent.
The sum that makes up the wrapper should always amount to 100%. Fill the wrapper, but it will never go outside of it. You may have numerous columns or divisions, which you can size at any percentage up to a sum of 100. (like, col1 width="33%", col2 width="33%", col3 width="34%" = 100%)
Try to pick images that work for ALL screen sizes. There is no built-in way to swap to mobile images when working with responsive web design (there are javascript solutions), but pick an image that looks good when scaled down.
Avoid scaling an image up. This is why i tend to make the max page size the same size as a header image (if there is one). If the page has no images, 100% liquid layouts are very good too.
If the content wrapper is fixed, turn it into a percentage with a media query :D example below.
I'm going to write up a basic example of a MAX width 900px page with columns that works on any site mobile/desktop.
default-style.css
img
{
max-width: 100%;
height: auto;
width: auto; /* ie8 */
border: none;
}
.content_wrap
{
width: 900px;
margin-left: auto;
margin-right: auto;
height: auto !important;
}
/* Columns */
#column-wrap
{
float: left;
width: 100%;
}
#column-left
{
width: 30%;
float: left;
}
#column-middle
{
width: 35%;
float: left;
}
#column-right
{
width: 35%;
float: left;
}
default-queries.css
/* Turn it into a liquid layout at our max-width of 900px */
#media screen and (max-width: 900px)
{
.content_wrap
{
width: 100%;
}
}
/* most smart phones */
/* This query will turn all 3 columns into 1 column at 540px */
#media screen and (max-width: 540px)
{
#column-wrap
{
position: relative;
clear: both;
}
#column-wrap div
{
margin-bottom: 10px;
float:none; clear: both;
}
#column-left
{
width: 100%;
}
#column-middle
{
width: 100%;
}
#column-right
{
width: 100%;
}
}
Now for the html :D
index.html
<!DOCTYPE html>
<html>
<head>
<link href="default-styles.css" rel="stylesheet" />
<link href="default-queries.css" rel="stylesheet" />
</head>
<body>
<div class="content_wrap">
<div id="column-wrap">
<div id="column-left">
<p>HELLO I"M LEFT COLUMN</p>
</div>
<div id="column-middle">
<p>HELLO IM MIDDLE</p>
</div>
<div id="column-right">
<p>RIGHT</p>
</div>
</div></div>
</body>
</html>
So this is a most primitive example of a responsive web site. Using the class content_wrapper at a fixed width of 900px (because the biggest image im using may be 900px). But when the screen is smaller than 900px, we switch from fixed to liquid via media query switching to a liquid width will allow our images to scale down, our text to wrap, and a whole bunch of other great things!
But, there's more to it than that. That's all we need to do if the page only has linear content, but most pages have different columns to make the most of large screen sizes. This is where media queries REALLY come in handy. If you study the columns, their sum takes up 100% of the content_wrap at all times. And they will scale down for a small website, but they will be really really tiny. This is why I make another media query for smaller screens and eliminate the multi-column layout. Simply clearing the floats and making each column have a width of 100%, will allow for a much more efficient mobile layout.
Anyway, really long answer but hopefully my views/opinions on how to properly design a website with CSS/HTML (php, ASP.net, MVC, etc, can all be thrown in there too) will get you started! Design with a wrapper, media queries, no upscaled images, and images that look good scaled down are really good practices IMO ;)
I like fixed width pages! They are more universal and prevent over-scaled images Media queries in CSS3 take care of responsiveness ;)
I usually DON'T do mobile-first designs, but that's just my personal preference. I see no advantage to one way over the other
As stated in another answer, for non-CSS3 browsers response.js works very well
As usual, it depends. If you think your site is going to be accessed by many devices then you probably want to look at responsive design: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/ and http://www.alistapart.com/articles/responsive-web-design/ for more details.
The recommended approach is to take a 'mobile first' approach to the styling, so it works well with little markup for mobile devices and then progressively enhance for other devices with larger resolutions.
You may want to use frameworks or hand-code it - that's something of a personal choice.
If you have significantly different needs for different devices, you may want to create entirely different sites for mobile, similar to the current BBC news for instance, although it's worth noting that many sites including BBC are moving to responsive techniques, so this is a trend that is being adopted more and more.
It's also worth considering which browsers your audience will be using. As you reach back into older IE versions especially you'll need to look at javascript techniques such as the respond.js library to allow media queries to work.
The two aren't mutually distinctive.
The two approaches are generally:
Multiple stylesheets, media queries decide which one to load.
Use fluid measurements (percentages) so the site is fluid.
In reality, you often end up using a bit of both.
There are many issues with trying to do this, one particularly being that older IE doesn't support media queries, and renders everything all the time.
Frameworks are good, but you may find them restrictive. There are many around, and they all basically do the same thing, so just google Responsive CSS framework and see what you find.
I'd also recommend looking into SASS at this point - I use it so I can auto generate an IE stylesheet that has the 960px width version with no media queries, whilst generating another sheet with all the queries in.
Already been answered, I see, but I think what I've got to say is relevant...
Most sites do both a desktop site and a mobile site. Desktop sites are almost always fixed width, with a maximum width at about 1000px. This is starting to change, though, you will see more adaptive sites than in the past. Mobile sites need to have an adaptive width, because of all the crazy different resolutions on all the various phone models out there. I recommend that the smallest width the mobile site should work at is about 320px, because most modern phones are at least that width.
As for mobile detection, take a look at PHP Mobile Detect, it's what I use, and it works pretty well. You just throw in
<?PHP
if ($detect->isMobile()) {
header('Location: /path/to/mobile/site');
} else {
header('Location: /path/to/full/site');
}
?>
at the very top of the first page. You should use a seperate splash page that redirects to something like index2.htm so that users can choose to view the desktop site if they want. It saves you a lot of trouble trying to figure out how to set cookies...
I recommend making an adaptive or responsive that can maintain its look across multiple device resolutios. With that being said CSS framework will be your option so your html file is not filled with your topic content and style code.