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 5 years ago.
Improve this question
I am currently redoing my css and other stuff thats needed to make my adaptive site to a responsive - until now I designed my site for my laptop and then scaled down and now Im doing from the other side.
I have managed to get the site look ok in 319x480 and now Im gonna see where to make my first breakpoint: exactly how do you go about this? Should I only resize window horizontally and see where a break is needed or should I also do it vertically? From the tutorials Ive seen they always just talking about horizontally, but arent you missing some stuff then?
Also, now it looks good in portrait mode. Lets say I will make a breakpoint at 600px width for portrait and one at 1000px and thats it. Should I then after go back to 319x480 and flip to landscape and expand the site once again and find new breakpoints for landscape mode too?
How are you going about this in a methodical way? I think this is a really cool way to design and I really wanna learn how to do it right.
Thanks!
You want to use min-width media queries if you are doing mobile first. Desktop first uses max-width. Concentrate on width rather than vertical height like you were asking, if the browser window height is resized it is usually fine with the scrollbar. You don't want people to have to scroll horizontally usually.
Example:
.header-title {
font-size: 14px;
}
#media screen and (min-width: 600px) {
.header-title {
font-size: 16px;
}
}
#media screen and (min-width: 1024px) {
.header-title {
font-size: 18px;
}
}
All the main breakpoints you can check in browser console. Here you can see, that as a rule, only width changes. Probably, vertical resize won't influence your page that much
In general CSS break points are horizontally because responsive have a "flow" layout. For example, if you have a grid layout with 3 photos side by side and your browser gets too narrow display all of them, the should get stacked on top of one another so the view can scroll through them.
It's always a good idea to test your site at multiple sizes and aspect ratios, especially if you are using fixed/absolute position or calculating heights.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I'm making an online portfolio, and my menu, which consists of 3 flip card images, needs to be able to work on touch screen devices. Since I don't want to change anything about the desktop menu, I was thinking of creating a completely new menu for mobile devices, which would mean discarding a section of my html code and inserting a new section.
I'm not sure how best to do this - for example, is it possible to create different index pages for different device sizes? Every time I try and search the answer to this I only find results about css media queries, which I'm using as well, but in this case it's the content I want to change. Any suggestions? Many thanks!
Erin.
Use bootstrap. Its a little bit of effort to learn this but it will be a asset for the lifetime. You will get lot of construct in it to make any webpage work on all the screens simultaneously.
Edit:
If you dont want to use bootstrap use the following media queries
#media screen and (max-width: 480px) {
.in-small-devices {
display: block;
}
.in-large-devices{
display: none
}
}
#media screen and (min-width: 480px) {
.in-small-devices {
display: none;
}
.in-large-devices{
display: block
}
}
Then apply it to the two divs that you want to show alternatively
<div class="in-small-devices"></div>
<div class="in-large-devices"></div>
With Bootstrap Grid classes you can define the width of a div on different screen (xs, sm, ...) sizes. For example you can hide whole codeblocks and display other html when on specific screen sizes.
<div class="visible-lg"></div> (visible on large screens)
<div class="hidden-xs"></div> (hidden on extra-small screens)
<div class="col-sm-6 col-lg-3"></div>
(at default 12 units are one row. This div will take 6 units space on small screens, but only 3 on large screens. This means 2 divs fit in row on small screens, but 4 divs on large screens)
take a closer look:
https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system
http://getbootstrap.com/css/#grid
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
My website is not working correctly in the mobile browsers here is the link
the navigation panel is not stretching 100% not covering the about us section
when viewing in the browsers please take a look and suggest a solution thanks.
Let me explain:
1) You want to avoid hardcoded margins cos you never know what type of screen size the user has. Instead position your nav in the middle with automatic margins, like this:
nav {
margin-left: auto;
margin-right: auto;
width: 900px;
height: 50px;
font-size: 18px;
font-family: helvetica;
}
2) Your nav now tries to fit its parent div (navbar), but navbar does not have a width set, so the width stays at 900px. But your #maincontain again has a hardcoded width of 1280px. Your images also have a width greater than 900px, this stretches your page to the biggest size but the navigation remains 900px therefore does not stretch.
3.1) Easy solution: set navbar to have: width: 1280px;
3.2) Correct solution: Remove the hardcoded width from your #maincontain, your images and anywhere else that stretches the screen.
3.3) In a long run, you will struggle to make a responsive website like that, I suggest using http://getbootstrap.com/ as a template, as its responsive, or learn how to use media queries to make your site responsive.
If this helped please UP the post and mark it as an answer! Thanks
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Logo on the left, menu on the right. The menu changes to a mobile menu at 600px and is below the logo, but between 600px and 800px the menu overlaps the logo, and I can't seem to solve it.
I did a bit of research and think it might have something to do with the float property, the menu is set to float right, and there is no float on the logo but when I float the logo or a div wrapped around the logo it breaks the layout. I feel like it should be an easy solution but I can't seem to figure it out, any help would be greatly appreciated.
Thanks
Both sides are fixed width, and the parent that houses both is flexible (based on the window width). When it's smaller, they'll overlap, as you know. There are several solutions.
1: Convert Parent to Fixed Width
This will fix the parent as a specific width, and the logo and menu will never get closer together.
2: Convert the Logo and Menu to Flexible
This will cause the logo and menu to change in width along with the parent, so nothing will ever hit. It won't work with the menu though, because text cannot be set to a % of width (unless you use Javascript).
3: Use Another Media Query
Eventually media queries kick in and change the site to a mobile version. Look at the width at which the menu and logo start to overlap. Set up a media query to change the logo to a smaller width at that point. I'd say 750px is a good break point.
#media screen and (max-width: 750px) {
.lcla-logo {
width:300px;
}
#menu-splash li {
margin-left:3px;
margin-right:3px;
}
}
You should probably do something like this -- >
#media screen and (max-width: 800px){
.lcla-logo{
width:70%; //you can change this according to you
margin: 5px auto; //for centering your logo
}
//----------------------------------
// AND here change your menu to mobile menu
//---------------------------------
}
This may solve your problem
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 5 years ago.
This post was edited and submitted for review 1 year ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I want to know how to make a website, and all of its elements responsive to adapt to different screen sizes: fonts, images etc...
I have done something like this:
#media only screen
and (max-width : 320px)
{
//here put the width and height of all the elements in the site
}
I have to specify target resolution for each one. Can there be a common setting that can apply to all resolution?
Can there be other ways to make it dynamic for each screen size? Is there an easier way?
Adaptive layouts (Responsive layouts) consists of the following three factors:
1. Flexible Layouts:
The divs you use to create your web page layouts need to consist of relative length units.
This means you shouldn't use fixed widths in your CSS, rather use percentages.
The formula to convert sizes from a design to percentages is (target/context)x100 = result
Lets take the picture above as an example of a design. To calculate what the size of the div on the left is going to be calculated like this:
(300px/960px)x100 = 30.25%
The CSS would look something like this:
.leftDiv
{
width: 30.25%;
float: left;
}
.rightDiv
{
width: 65%;
float: left;
}
For text to automatically resize you can use a unit called VW (ViewWidth)
.myText
{
font-size: 1vw;
}
This ensures that the text automatically resize relative to the view width.
2.Flexible Media:
Flexible media applies to images, videos and canvasses which automatically resize relative to its parent.
Example:
img, video, canvass
{
max-width: 100%;
}
This ensures that these elements resize automatically inside its parent.
3. Media Queries:
The next step is to use media queries like you've done in your question, these media queries define certain CSS statements for certain screen sizes. I normally use only three media queries for computers screens, tablets and phone screens. Its not necessary to have more than this because the Flexible Layouts and Flexible Media will ensure relative resizing if done correctly.
You may find this helpful: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
There are two options I am aware of.
Use Adobe Reflow, which exactly what you have but the software writes it for you and you just click and drag your elements, so you will achieve the same result much faster.
Have absolutely everything a percentage, size, margins, borders, everything. This way you won't have to rewrite code over and over, a 'one size fits all' option.
Take a look at Bootstrap and more specifically the Grid System. It should help you with css for different screen sizes.
Incase if you are new to CSS adaptive layout please do have a look at the following websites:-
a) Bootstrap
b) Foundation
In my opinion Foundation, is a great place to start with.It has a very beautiful documentation about grids.Please do check it out
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 want to build this site: http://www.alsite.com.br/misskessi responsive... but i have some doubts about the responsive format.
I want to know what i need to do to images, links, texts...? i think this is with percentage, but how much?.. how i can see how much i need to resize to fit the resolution....
exemple:
on my resolution (1600 x 900) this works fine:
#wrap{
position:absolute;
left:50%;
top:50%;
margin-left:-495px;
margin-top:-359.5px;
width:990px;
height:719px;
background-color: rgba(247, 8, 8, 0.2);
}
but on 1024x768 resolution, appears scrollbars... so i need to responsive this...
but how?
can anyone help me?
I hope this time i answer on a question about responsive design the question will not get deleted ;)
There is a difference between responsive design and percentages.
If you want to go for percentages you have to to add them at every point. Currently you are having it centered on the screen but your width and height and margins are fixed (in the logical, not the css way). You would have to change them to percentual values too. To keep the image from getting to big you should check out the max-height / min-height properties (the same way for width, left etc.)
Furthermore that is not really responsive, to make you site responsive and adaptive to even very small browsers you should check out media queries (http://css-tricks.com/css-media-queries/ and https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries). These two sites helped me a lot, when i had to create a responsive website in the past weeks (http://wywy.tv/howimetyourmother).
With media queries you can modify your css classes if various conditions are fullfilled, most times the width of the screen, by putting this in your css-code for example:
#media (max-width: 755px) {
.content {
width: 100%;
}
.header {
margin: 0 auto;
}
...
}
You can extend this code quite much, maybe have a look at the css-files on my developed site to see what i did and how it affects the appearance.
Here are a few things to keep in mind when building responsive sites.
Use Media Queries to define important break points within your design. Some common break points are <320px, <480px, <768px, >768px and up.
Make your layout fluid. You can use a grid system if it helps - 960 Grid System, Gridset, Columnal, Golden GS, etc.
Images should be set at 100% with a max-width. Make use of break points as well - You can make your images change positioning in relation to your different break points. When working with mobile layouts, keep only the essential images and hide the useless (non-important) ones.
Make use of Max-width/height and Min-width/height. These are very helpful as it lets you define a "lowest and highest" width/height in a few little characters.
For mobile layouts make your columns 100% width - You basically will use one column that spans all the way down. The media query you will use for this is for anything <320px.
As I said above - Keep only the essential content. On your bigger layout (>768-1024+) you can use your fancy images, but under that make sure you think content first and fancy second. This is specially important for mobile layouts.
Keep your layout simple
Don't forget your viewport meta tag.
< meta name="viewport" content="width=device-width" >
You could make the image a background-image and use "background-size: cover;", which scales it to browser size.