Responsive Web Design Won't Work

HTML-CSS
1

Hello! I am very new to coding (this is actually my first project)but I can’t figure out why my responsive design isn’t working. Please understand as a total beginner my error is probably quite elementary, but nonetheless I can’t figure it out!

Here are the requirements I am trying to fulfill:
-In the desktop view (992px and above), each of the 3 sections should take up equal amount of space on the screen.

  • In the tablet view (between 768px and 991px, inclusively), the first 2 sections should be in the first row and be of equal size.
    -In the mobile view (equal to or less than 767px), each section should take up the entire row.

Here is the link to my code: JS Bin - Collaborative JavaScript Debugging

2 
@media (min-width 768 px) and (max-width:  991 px)

you have some syntax issues in this line

and welcome to the forum

3 
@media (max-width:  767  px) {
	.col-sm-1, .col-sm-2, .col-sm-3 {
		float:  left ;
		border:  1px solid green;
	}
	.col-sm-1 {
	width:  33.33%;
	}
	.col-sm-2 {
	width:  66.66%;
	}
	.col-sm-3 {
		width:  100%;
	}

this breakpoint for small screen?
well, if you want something take a full row
you should use width: 100% for this something

and again, check syntax here

4

(post deleted by author)

5

I don’t think that’s enough

6

Thank you! So if it is under 767 px, I am trying to have each item take up a full row. Does that mean I should have coded it like this?:

@media (max-width: 767 px) {
.col-sm-1, .col-sm-2, .col-sm-3 {
float: left ;
border: 1px solid green;
}
.col-sm-1 {
width: 100%;
}
.col-sm-2 {
width: 100%;
}
.col-sm-3 {
width: 100%;
}
}

7

I am sorry I don’t understand, could you please explain?

8

Better option

I am actually learning myself

So I have some exercise which is similar to yours, though it’s about flex.

You can check breakpoints there, in CSS

Take a look carefully at syntax how I wrote pixels in media rules. Don’t worry about screen rule for now.

Breakpoints at the bottom of CSS file

9

I am sorry that also didn’t give me any ideas on what to fix with my code

10

ok, take a look at the above
and at the below

min-width: 900px

try to catch the difference in syntax

11

with this I think you are moving in right direction

12

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