Screen Sizes for Responsive Design

HTML & CSS
1

I want to create a design that will work well on most screen sizes, but I’m not sure what sizes I should use. Is there a recommended size for small laptops, tablets, smartphones, etc…? The article that I found said I can add CSS that will resize/reconfigure the layout based on the size of the screen being used.

1 Like
2

The best thing to do is forget about screen sizes and concentrate on creating a “fluid” design. That is one which is flexible enough to squash and stretch to any size. Then use media queries only where the design breaks and needs to be re-arranged, rather than thinking about specific devices or sizes.

6 Likes
3

You need to set breakpoints at whatever sizes your particular layout needs to change in order to continue working - the sizes are dependent on your design and not dependent on any particular devices.

For example of you have a two column design that breaks when the width of the two columns is squashed below X pixels width then you need to set a media query at X pixels so that it switches to a single column layout if the width is less.X will be dependent on what the columns contain as that determines how narrow each column can get.

3 Likes
4

Thanks for the replies, they both make sense. As far as the breakpoints go, how do I tell what the pixel width is? I can resize my design, and see where the columns cause issues, but the browser window doesn’t tell me the pixel width at that point.

5

The dev tools do, though. In firefox you need to switch to the “responsive design mode”, chrome tells you automatically on resize.

2 Likes
6

Okay, I use Internet Explorer, and I’ve never heard about the development tools. I will have to look for them.

7

Stop using IE for development. Use Chrome. Only use IE for testing.

disclaimer: I recommended Chrome but I’m sure there are other good browsers but that is what I use.

2 Likes
8

The development tools on Chrome are pretty neat. They seem like they will help a lot.

Thanks.

9

for sure

10

The developer tools in Chrome, Opera, Vivaldi, Safari, IE and Edge are all very similar. I think recent updates to Firefox have even brought the developer tools built in there almost up to the same standard. These days it doesn’t really matter what browser you develop in as they are all very similar (except for JavaScript in Firefox running somewhat slower). Still worth testing across a few of them though just in case there is some unexpected difference (particularly if you are using some of the latest CSS)

11

Hi,

I finished the page that I was working on. I have most of the sizing working correctly, but there are a few problems:

  1. I want the main content to be centered on the page. I have tried everything I found on w3schools.com, but I can’t get it working properly. The text is always off to the left when the browser is resized to full screen. I left the “debug” code in the CSS file, for what I was attempting to do.

  2. When I resize the browser window lower than (about) 360px, a horizontal scrollbar shows up, and both the colored header, and colored footer start showing a large white border on the right side. I’ve seen this before when there was a padding issue, but I can’t locate anything that is wrong.

Does anyone have any ideas?

Here is the page: http://beta.develsigner.com/kennethrjones.com/
Here is the CSS: http://beta.develsigner.com/kennethrjones.com/style/stem-blue.css

Thanks for any help.

12
  1. you have a div with class “content-text” that is floated left, hence your text is to the left. Remove that float, and your existing margin:auto should do the job.
  2. The scrolling is due to your table’s border-spacing. You could either remove that border spacing (making the text get real close together) or you’re going to need to assign widths to the td’s in the table and to the border spacing such that they remain within your designated page width.
2 Likes
14

I just wanted to come back quick and say thanks for the help on this. I have been really busy and haven’t had time to reply, or even try the fixes that were just suggested, but I am sure that they will work.

I originally had a 3 column design, and that float is something that was left over from that, and I apparently was overlooking it. Sometimes it helps to have an additional set of eyes on the code. I am also confident that the table adjustment will fix that other issue.

I just haven’t had time to get back to this for a few days, but thanks for the replies.

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.