DEV Community

Page responsive not working

lolleri200 on July 27, 2020

I can't get my page responsiveness to work no matter what I do. I posted my code here if anyone can help.
https://codepen.io/Sampsa96/pen/JjGVwKw

Collapse
 
manishfoodtechs profile image
manish srivastava

Problem is with your css. Check 1080 px and around...

Collapse
 
lolleri200 profile image
lolleri200

What do you mean? Check 1080 px how?

Collapse
 
manishfoodtechs profile image
manish srivastava

Check your css. Best way is to open it in Google Chrome developer mode

Thread Thread
 
lolleri200 profile image
lolleri200

Well I only see one error: "Failed to load resource: the server responded with a status of 404 (Not Found)"

  • I don't really understand what it means
Thread Thread
 
manishfoodtechs profile image
manish srivastava

This means certain external links not accessable to browser. Use Ctrl+u to see your html code available to browser

Thread Thread
 
lolleri200 profile image
lolleri200

Yea I know, but how do I fix the problem?

Thread Thread
 
manishfoodtechs profile image
manish srivastava

Okay when I will get time I will review your code in deep. Meanwhile, try responsively.app/

Thread Thread
 
lolleri200 profile image
lolleri200

Thanks, I will give this a try :)

Thread Thread
 
lolleri200 profile image
lolleri200

Ohh I thought that app makes my page responsive, but yea it does not look good on tablets and smartphones.

Thread Thread
 
manishfoodtechs profile image
manish srivastava

Following are problems:
(1) You have fixed the size in css.

(2) The best easy way to achieve similar template is using bootstrap. Actually, libraries like bootstrap gives lot of freedom and no worry about responsiveness.

Thread Thread
 
lolleri200 profile image
lolleri200

Alright, but in our assignment, we are told to make the page responsive using CSS. So how can I do that?

Thread Thread
 
lolleri200 profile image
lolleri200

Can u help me?

Thread Thread
 
manishfoodtechs profile image
manish srivastava

If this is your school assignment then I will suggest you to copy codes from w3schools.com

Thread Thread
 
lolleri200 profile image
lolleri200

Yea I tried that. w3schools.com/css/css_rwd_mediaque...
But it didn't work.

Thread Thread
 
manishfoodtechs profile image
manish srivastava

I don't know what is your assignment. However, I will suggest you to try below code as fresh and change it accordingly. It's pure css 👌

w3schools.com/css/tryit.asp?filena...

Thread Thread
 
lolleri200 profile image
lolleri200 • Edited

So the mobile site needs to look like this when I shrink the page nothing happens.

dev-to-uploads.s3.amazonaws.com/i/...

Thread Thread
 
lolleri200 profile image
lolleri200

And when I shrink it more the 2nd container with the text and image should go under the 1st container.