Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have been working on this site for a few days now and am trying to get it to look great when the window/viewport is ANY size... Currently it looks pretty good on a widescreen or normal 1024 monitor for me... However I am having problems getting it dialed out for iPhone / iPad and smaller sizes...
I would like for everything to be responsive and fluid... Currently when viewed on an iPhone only the 1st block looks good... The other blocks have content that extends past the right side of the window so that the user has to scroll over with his/her finger to view the content.
I've played with the viewport (set min & max) and Iv'e now got a min-width of 980px on each of the blocks to make sure the background covers the screen... Not quite sure where I'm going wrong here...
Would appreciate some pointers or anything to make my site more responsive! Tips... WTFS... Etc ;)
Thanks again
(post these comments as an answer because it turned out to be the answer)
I'd suggest getting a hold of Zurb Foundation or Twitter Bootstrap (recommend Foundation) and using that as your base layout while you get more familiar with responsive design. Once you see how they're put together you will be able to tackle your layout again.
change the layout for mobile version with the help of Media queries i mean desktop kind of design will not look good in mobile version for example the main menu is looking good in desktop and for lower screen sizes you have to change the Menu like dropdown..
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Currently I am developing website themes with fixed width so please give me a suggestion which framework I should adopt is there any other way to do thing this way.
Thanks in advance.
I suggest you to use Bootstrap 3, it's used by a lot of developers and it's documentation is really helpful.
To learn responsive design better and fast you should:
Understand the use of media queries, this article will let you
know about the standards breakpoints for them.
You can use LESS or SASS for creating a custom Bootstrap grid
that suits your project.
As suggested above, frameworks such as Bootstrap really speed up the development time of a website and make adding responsive layouts easier due to the grid system they use. For extra information using bootstrap go to http://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/. They provide some tips on responsive design.
For responsive website designing, you have to understand the css media queries. Though,it will get your job done, but designing through media queries seems like taking lots of efforts, specially when must faster and less time consuming alternatives are available.
I suggest you to go through twiiter bootstrap framework. Responsive website designing is much easier with it. You have to just include a couple of javascript files and apply some predefined classes(as per your need), and you are done.
There are two very good tutorials, i would like to mention. Just go through with them for a clear crisp understanding of bootstrap simplicity in responsive design. They have pretty good examples too. Just try altering your browser width to get a better understanding.
Bootstrap:
Link 1
Link 2
I would agree with using Boostrap 3 from personal experience.
Also instead of setting actual widths setting percentages instead makes it responsive as it goes to the size of whatever screen size you are using, as an example you can use this link.
Also, check out collapsing navbars for a responsive navigation to be collapsed on smaller devices, here is a link that will help you out: NAV.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I´m trying to develop my first website. And I´m a bit confuse about some points.
I´m developping the html & css and then I want to do my website responsive.
First, I did some research to choose the width for my website, and i found information that the 960px is the best width, So I´m developing my content in 960px! But I have a 17 inch laptop and I have too much white space around the content. Its better do with 1024px for example? Or 960px is better?
And if I do with percentage for example, instead 960px use 70% I´ll resolve the white space, right? This is correct to do?
Second, to my site be responsive I was searching information and I was studying about media queries, but if I use percentage, I dont need to use the media queries, because the site is already responsive, right, or not?
Sorry to bother with this question that may seem simple but I am a beginner and I have this doubt, and maybe with your exprience, you can help me understand better.
Using percentage, your site will be fluid. To be responsive, use media queries, so you have a site adapted to the screen size, not forcing the content.
A little about CSS Media Queries: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I'm trying to take a template that was designed to be responsive and make it "unresponsive."
http://myhurlburt.com/NEW/bowling.php
The width of the page is set to 960px. When I view it on an iPad or iPhone, you have to scroll to the side to see the entire page. Do you know what in my CSS is causing that? I would like the entire site to "fit" into a browser so the user does not have to scroll to the side.
It's a big job to change an unresponsive site to a responsive one.
But you could try something like this to get started.. .wraper currently has it's width set to 960px.
.wraper{
width:100%;
max-width:960px;
}
use % for width, height and other margins. Use media queries also. If not, do zoom:1(2,3 or something);
Start by scaling the website with min/max widths and additionally use percentages instead of px.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I recently made a website for a church. I used Foundation, SASS, and Compass. I've almost got it finished up when I notice that if you size the window down I get a horizontal scroll. So I add overflow-x: hidden; I thought that fixed it but when I tested it on my iPad I am still getting roughly 20px of padding on the right side. I then thought maybe it was from the box-shadow which made sense so I removed all the box shadows and its still there. Here is the link: http://www.jessefoutch.com/fumc/ any help would be appreciated.
Foundation already has its own set padding and margin for grid-columns and other grid elements. You can either change these parameters in the _settings.scss file in Foundation, or you can set the padding or margins to 0 manually and that should fix any of your issues. I checked and didn't actually see the issue you were speaking of however, so it may no longer be affecting your site
Perhaps you need to clear your cache. I have looked at the site in Firefox, Safari, and Chrome and only saw the standard browser scroll bar when I resized.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 12 years ago.
Improve this question
First of all I want make clear that though I'm still learning CSS, I think I have fair understanding of it and especially liquid aspect of it and I also think that this is the way to go, however my question is about the graphic stage of web designing, so if I want to start a new project in Photoshop; what are the best page dimension should I use, keep in mind that I intend to use relative values when coding in CSS? and thanks in advance.
I usually use 1300px x 2000px for the photoshop document.
Then I "sketch" up the 960px width wrapper.
From there I start the creative process.
Take a look at http://photoshopetiquette.com/ for some more tips on web design in photoshop.
Cheers!
Most of the pages are being made to fit in 1024x768 (without a horizontal scroll) and the width of the page is about 950-980px. I can suggest you to start with 1200x1400 canvas in Photoshop and you can always resize it just go to Image -> Canvas Size