Layout breaks on browser resize - html

Question

Got a weird problem,i.e,Layout of webpage breaks on resize of the browser/when accessed through mobile device/when switched to lower resolution ( 800*600 / 1024*768 )
Temporary link : http://krishnaspirit.hostoi.com/
P.S : Its a full-width website & Works fine on 1366*768.
CSS :
* { padding:0px; margin:0px; }
p,h1,h2,h3,h4,h5,h6,a{ font-family: 'Armata', sans-serif; }
/*header*/
.header { z-index:5000; position:fixed; top:0px; width:100%; min-width:960px; height:100px; background-color:#4E4E56;}
.header #nav li:last-child { margin-right:0px; }
.header #nav li { transition:1s ease all;line-height:40px;
display:inline-block; margin-right:3px; width:116px; height:40px;text-align:center; border-radius:5px;}
.header #nav li a { font-size:15px; color:#DCD0C0; display:block; height:100%; text-decoration:none; }
.header #nav li:hover { background-color: #DA635D; }
.header #nav li a:hover { color:#fff; }
.header #nav { position:absolute; right:10px; top:35px; width:600px; }
.current {background-color: #DA635D; cursor:none;}
.header #nav .current a { color:#fff; }
.header .logo img {width:100px; height:95px; position:absolute; top:5px; left:12px; line-height:100px; font-size:40px; color:#fff;}
.header .logo .name { font-size:40px; color:#ccc;
font-family: 'Armata', sans-serif; position:absolute; left:110px;top:29px; }
/*sub-head*/
.sub-header .top-logo { float:left; }
.sub-header .top-name { float:right; font-size:30px; padding-top:120px; color:#003366; }
.sub-header { width:85%; text-align:center; margin:150px auto; }
/*main-body*/
.content { float:left; }
.news { float:right; margin-right:5px; }
.news { box-shadow:3px 3px 5px #ccc; padding:0px; border-radius:3px; }
.news p { font-weight:bold; font-size:15px; padding-bottom:20px;}
.news { border:1px solid #ccc; width:27%; min-width:27%; padding:5px; height:300px;}
.news .news_body { padding:3px; text-align:center;}
.content { box-shadow:3px 3px 5px 0px #ccc; width:70%; height:300px; border-radius:3px; margin-left:5px; border:1px solid #ccc; font-size:15px; padding:5px;}
.content .sub-main { margin-top:15px; text-align:justify; padding:10px; }
.content #myMenu { width:100%; text-align:center; height:30px; }
.content #myMenu{ list-style-type:none; }
.content #myMenu li { border-bottom:1px solid #ccc; color:#999; display:inline-block; width:30%; line-height:30px;}
.content #myMenu li:hover { font-weight:bold; }
.content #myMenu li a { display:block; width:100%; }
.content #myMenu li a:hover { border-bottom:5px solid #DA635D; color:#DA635D; cursor:pointer;}
.body_wrapper { margin-bottom:500px; margin-top:70px; background-color:#ccc; }
/*footer*/
footer { width:100%; height:50px; line-height:50px; background-color:#4E4E56; }
footer p a{ color:#DA635D; text-decoration:none; font-weight:bold;}

Answer 1

This is not a weird problem. You need to use #media query to fix the problem.
The image on left side is large enough to occupy almost half of total screen width at a resolution 1024x768. You need to define style sheet on different screens using media query.
Example -
#media screen and (max-width: 1024px){
.main .sub-header .top-logo{
width: 250px;
}
.main .sub-header .top-logo img{
width: 100%;
}
}
This snippet will only take action in device screen width less than or equal to 1024px.
As you can see, for this type of device resolution I have reduced the width of .top-logo to make sure it can fit properly in small screen. You need to define .top-name and other elements accordingly to fit them properly for different device width. Hope you get the idea.

Answer 2

Another thing causing this problem is when one #media query has a missing closing brace }.
For example if your CSS has something like:
nav {
position: relative;
width: 95%;
margin: 10px auto 0 auto;
height: auto;
background-color: var(--magnolia);
font-family: Roboto;
}
#media screen and (min-width: 860px) {
nav {
margin: 0 auto;
}
<----------------- /* A closing brace "}" is missing here ! */
.navbar {
display: flex;
list-style-type: none;
flex-flow: row wrap;
justify-content: space-between;
align-content: center;
align-items: center;
margin: 0 auto;
padding: 0;
height: auto;
}
etc.
etc.
This makes all CSS below it revert to default, e.g. width: 100%.
Overflow abounds in such a situation.
Since W3C CSS Validator may not detect this, you have to closely read through all #media queries before the breaking elements looking for missing closing braces. Just one of these can screw up everything below that part of the web page. Fix it and everything is suddenly fine.