Why the webpage splits up peculiarly like this?

user_11412996 0
Viewed 56

I am fairly new to Javascript. I have tried to make a photography website, taking inspiration from a codepen project.

The webpage looks like this while viewing in Google Chrome [Version 86.0.4240.111] on my computer ...

Webpage in PC

But as soon as I open the same webpage in my iPad or my Android phone, it has split up into this peculiar looking website...

Ipad

I have tried my best to understand and fix the problem by looking into the source code, but I can't find any. Can anyone please suggest me what's wrong with this source code and how can I fix this to get a responsive webpage like the desktop one?

Website : Live view of the Photography-Inspiration website

Source code: Source code of the Website

Thank you.

frontend responsive css html javascript
2 Answers

CSS media queries for both tablets. 768px will capture everything under that, value inclusive and 500px will capture respectively.

Now all you need to do is specify in CSS which containers you want to target.

/* Tablets and under */

@media (max-width: 768px) {

}

/* Mobile */

@media(max-width: 500px) {

}
user_143871430

when I saw the site I immediately understood your mistake,

quiet is normal when someone starts. when you have to make any site even for portable devices you must always use the following html tag in the head section

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
</html>

I also advise you to study how it works I am attaching the eveloper.mozilla documentation

Documentation

user_81083520
Related