I wrote a website but I have a bug in it, when I resize my browser my website resizes with it. I have noticed this in Firefox (10.0.2), Chrome (16.0.912.77) and opera (11.60). I tested some other websites omgubuntu webupd8 and when I resize Firefox it still looks good (it doesn't resize with the web-browser). I would love to post images but I need 10 reputation for that.
Using CSS, apply a width (such as 1000px) to your <body> and add margin: 0 auto; to centre the content. You'll have to bring the width of your navigation links down and re-position the ads, but this will stop your site from 'resizing' with your browser.
I strongly suggest using a good CSS Framework. Two good options are:
http://960.gs/
http://blueprintcss.org/
They provide you a fixed width layout as well as an easy way to divide the column into grids.
Related
no mater how mush I trying my web site responsiveness for mobile. but I am unable to do it I don't know what I am doing wrong. help me to learn how to make responsive site.
I tried to make some sites
repository-1: https://github.com/nasershareef/Practice-Frontend-Dev-8
site link-1: https://nasershareef.github.io/Practice-Frontend-Dev-8/
repository-2: https://github.com/nasershareef/Practice-Frontend-Dev-7
site link-2: https://nasershareef.github.io/Practice-Frontend-Dev-7/
I messed with size
grid
flexbox
nothing worked my site was not responsive I don't know what to do
When I'm opening your sites from links in Chrome DevTools and mobile view, sites are looking fine, so where is the problem?
Your first site totally looks fine in my opinion. I opened it and inspected it using DevTools but if you expect something else, then please elaborate.
Talking about the second site, you have used an image and upon reducing the screen size, your image is shrinking in just 1 dimension. It is not maintaining its aspect ratio. For this you can set width: 100% and height: auto. Do let me know if this works.
I am trying to make a webpage with HTML,css and jquery. But the problem is that the webpage is not working properly on phone or other small screen devices. Here is the link for the page.
The solution is quite simple. To have responsive layouts, use percentages for width/height and margins rather than pixels (px) so that they can auto-resize when the screen size changes. To make your bottom bike image look responsive, use width: 95% and height: 95% (or whatever other percentage you'd like). For the Bikerz icon, try using margin: Google Chrome's inspect feature is very useful so make sure to test it out on it. Simply right click on the web page and click Inspect. Once you are there you will see an icon left of the "Elements" section. When you click that, you can view your web page layout under different resolutions.
Either you have to write custom css to support mobile device or I will recommend to use Bootstrap framework in order make compatible your site on mobile. Bootstrap will allow you to developing responsive, mobile first projects on the web.
If you are going to use css then, i will also recommend you to validate your css support at different browser and mobile platform through canIuse.
I have a problem that I believe is a quick solution... I simply can't figure it out myself, however, and a quick run through search didn't help me either.
Basically, the only real issue I'm having I'd like to address is the logo (SERVICE FIRST) not shrinking down to fit inside of the width of the site in a mobile form. While the rest of the site responds fairly nicely (as nice as it usually gets) to the responsive web design, the header image doesn't so much as twitch, meaning it runs "off" the edge of the page.
My site is at www.test.servicefirstsvc.com
If you view it on a mobile device, or simply shrink your web broswer window to a phone size, you'll see the problem. Any help? I can paste relevant portions of the responsive CSS if needed.
Just give the img tag a max-width: 100%; via CSS.
You should add a height: auto; as well because of some weird issues with the Safari browser not paying attention to the aspect ratio of the image.
I'm a graphic designer, I have a small question, Ive learnt some of css and completed the HTML tutorial package over the internet multi time, so I have a good base of html-css coding at least, I do want to start converting PSD webdesigns into HTML-CSS, I've seen many tutorials step by step guides etc.. and they were helpful for sure but I'm afraid of many points:
The flexible point of the website, which means the following: my monitor is currently 1920x1080, let's say that I will code the website to fit on my screen and someone with a small / big screen than mine would open the site, will he see the objects moved from its original place? because defining by px is measured to fit to the user's monitor as far as I know.
Ensuring that the site will be working on at least 3 browsers plus, I know that every browser has its own css base reader and its very hard to set the website to fit all browsers especially internet explorer.
So, I don't want a special help to be honest, all I need is some points / well-guided tutorials to follow to ensure that the points I've reviewed being at least 50% solved..
What you are talking about is Responsive Web Design. Literally just search it up on the internet and you'll find tons of resources and blogs.
My tips are:
For testing multiple browsers download all of them (Chrome, Firefox, Opera, IE) and when you save your work (do this all the time) open it in all browsers so you know where your errors are coming from
Use the developer tools on your browsers. Chrome and Firefox have very good developer tools and help me figure our my problems. You can also use it to emulate mobile browsers and show your media queries (explained later).
Use em instead of px. pixels may look nice on your screen, but if the users screen is small they may find it hard to read your text. here is a good px to em converter http://pxtoem.com/
Use percentages. For example you can make your content div have width of 80% so that you have some space on both sides of your screen (like the design of stackoverflow). This means that your content will fit on most desktops well. Another example is a navbar, you can make it 100% wide so that it always fits the screen no matter the desktop.
Then we have media queries. These allows us to change the content based on the size of the screen. For example you can hide the navbar using a media query when a mobile user is viewing your website. Here is onc elink about media queries:http://cssmediaqueries.com/what-are-css-media-queries.html
Some people still develop for IE8 but it is a pain in the ass. You need to decide whether your audience will be using IE8. I'm guessing as a graphics designer you're going to be making a graphics blog, meaning that your audience will probably be using up to date browsers. So have a think if you really need to develop for older browsers.
As for the first point: there are some ready css frameworks, with responsive elements included. The most popular, I suppose, is Twitter Bootstrap. It has a grid system to help you make your html blocks change their width and even get hidden depending on the viewport width.
If you want to understand the techniques, you can study how media queries work.
As about cross browser stuff: you will have to test your pages in all browsers you want to support. That's the rule. On your way, this link can be useful.
The flexible point of the website, which means the following: my
monitor is currently 1920x1080, let's say that I will code the website
to fit on my screen and someone with a small / big screen than mine
would open the site, will he see the objects moved from its original
place?
The general way to get around this is to build a centered window, thus:
<html>
<div id="container">
<!-- your design lives here -->
</div>
</html>
#container
{
width:728px;
margin: auto 0;
}
Your design is now set at 728px which should fit most resolutions. You can have graphics that expand beyond this, see the bar at the top of SO, but your content should live inside this container.
Another potential solution to this is to allow you design to be completely flexible and contain all your elements in divs that float about, see Masonry for an example of a tool that helps with this.
Ensuring that the site will be working on at least 3 browsers plus, I
know that every browser has its own css base reader and its very hard
to set the website to fit all browsers especially internet explorer.
This is a bain of every web designers life. There is no substitute for good testing here. Something that will help is a CSS rest script like this one. This will remove some of the inconsistencies across browsers. But really you just need to, test and test again.
I have a very simple website that creates a horizontal scrollbar in the following:
Android:
Chrome
Firefox
Opera Mini
Not in Android Default browser but the site looks broken
iOS:
Safari
It's really no big deal but I'm comparing my website to the full desktop site of http://google.com and Google's website doesn't get the same problem as mine.
I am still pretty new at CSS and HTML and I feel like I'm breaking some really simple rule I don't know about that is creating this problem. Any ideas on how to fix this?
If you would like to test it. Go to http://natio.in
The horizontal scroll bar is appearing because you have fixed width's set on elements, that when the site is viewed on a mobile browser, the width of those elements is set wider than that of the viewport width. If you use a percent for widths, your webpage will be able to adjust accordingly.
well, you can include overflow-x: hidden; in the styles for your body tag, but if there is content outside the width of the phone, you wont be able to get to it. Or you could crate a responsive layout with media queries.