Responsive display

HTML & CSS
1

i am working on making a site reponsive i have lent how to do this but i was not the one that created the site so i want to resize it to fit to most mobile screen thu pls can anyone here help out on how i use the @media screen for that pls

2

Ok I’m going to let you in on a secret.

Your site should be fluid. That means containers should probably only have max-widths set, or no widths at all. Your site should scale perfectly when you take your browser window and close it and open it. If something does break, find out where it breaks (maybe it’s every resolution under 600px) and then write a media query to fix it accordingly. Let’s say something breaks under 600px. You’d then do…

@media screen and (max-width:600px){/*fix it*/}

Having your website be fluid first should be your first priority since the underlying foundation of your website should be fluid. Doing this will make it so you need hardly any media queries at all.

2 Likes
3

k thanks. it is helpful i just want to practice it thue so that if i find myslelf in such design situation i will know how to sort it

4

hello i have tried this but i dont seems to know what the problem was as am not getting the right results the size on the last media screen now show on the normal screen size ple help this is the code: ----------

ul#menu li a.first {
	border-bottom-left-radius: 7px;
	-moz-border-bottom-left-radius: 7px;
	-webkit-border-bottom-left-radius: 7px;
	border-top-left-radius: 7px;
	-moz-border-top-left-radius: 7px;
	-webkit-border-top-left-radius: 7px;
	padding-left: 20px;
}

@media screen 
  and (min-device-width: 320px){
  ul#menu li a.first {
	padding-left: 3px;
}
}

@media screen 
  and (min-device-width: 375px){
   ul#menu li a.first {
	padding-left: 3px;
}
}

@media only screen 
  and (min-device-width: 414px){
   ul#menu li a.first {
	padding-left: 5px;
}
}

@media only screen 
  and (min-device-width: 480px){
   ul#menu li a.first {
	padding-left: 5px;
}
}

@media only screen 
  and (min-device-width: 568px){
    ul#menu li a.first {
	padding-left: 5px;
}
}

@media only screen 
  and (min-device-width: 601px){
   ul#menu li a.first {
	padding-left: 5px;
}
}
@media only screen 
  and (min-device-width: 640px){
    ul#menu li a.first {
	padding-left: 5px;
}
}

@media only screen 
  and (min-device-width: 736px){
   ul#menu li a.first {
	padding-left: 10px;
}
}

@media only screen 
  and (min-device-width: 768px){
  ul#menu li a.first {
	padding-left: 10px;
}
}

@media only screen 
  and (min-device-width: 800px){
  ul#menu li a.first {
	padding-left: 10px;
}
}

@media only screen 
  and (min-device-width: 906px){
 ul#menu li a.first {
	padding-left: 10px;
}
}
5

Few things

  1. You didn’t say what was actually wrong. Please be specific
  2. We don’t have your HTML so I can’t reproduce your issue.

If you could, take your HTML/CSS, go to codepen.io (URL), and throw up a demo which shows the problem.

6

Stanly,

Post the test page that you are using that isn’t working for you. It should be a complete working page, right?.. starts with doctype, contains head tags, meta tags, CSS, and the HTML that the CSS styles, and finally ends with </html>

As @RyanReese says, we need to know what you expect to happen and what is not happening the way you expect it to happen, so a bit of a description would be very helpful. You can always include screen shots to better describe the issue(s).

We can work with that. (You don’t have to use CodePen .)

The important thing to realize is that we need to be able to reproduce on our monitors exactly what you see happening on your screen and understand what you see as a problem.

7

i will do that

8

but what i wanted to do was to get it to be responsive on mobile device and i want to specify each screen size or which ever way u think its best please let me know, thank you…

9

Ok forget the word responsive. Do you know what fluid design is? Taking your screen and going up /down the screen sizes? Should look good right? Responsive design is literally just that.

It’s ipmossible to say what you specifically need to do to make your website responsive since each website is different. You don’t need to worry about devices or anything. Grab your browser edge, and close it until it’s about 300px. Make all that display perfect. Then you can be assured that mobile devices will display your site fine.

1 Like
10

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