0

I am new to this website and new to web client development. I encountered a weird problem, why does one of my layout change when I zoom in? Here's a screenshot.

Before zooming in: https: https://i.stack.imgur.com/vs7uZ.png

After zooming in: https://i.stack.imgur.com/vs7uZ.png

Here is my HTML code


<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Revisions Bookstore &amp; Cafe</title>
      <!--
         Revisions Bookstore and Cafe main web page
         Filename: index.html
      
         Author:   
         Date:     
         HTML5 and CSS3 Illustrated Unit D, Visual Workshop
      -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <script src="js/modernizr.custom.62074.js"></script>
      <link rel="stylesheet" href="css/style4.css">
   </head>
   <body
 Here is my CSS code


/* reset styles */
article, body, div, footer, header, h1, h2, p {
 border: 0;
 padding: 0;
 margin: 0;
}
/* body and page container */
body {
   background-color: floralwhite;
}
.container {
    max-width: 640px;
    margin: 0 auto;
    background-color: burlywood;
    border-bottom: 2.4px solid navy;
 border-top: 2.4px solid navy; 
 border-left: 2.4px solid navy;
 border-right: 2.4px solid navy;
 
}

/* headings */
header {
   text-align: center;
   color: navy;
   background-color: lightblue;
   padding: 0.5em;
}
 
/* Upcoming events */
h2 {
  padding: 0.4em;
  margin-left: 0.2em;
  
 
 
}
/* main content */
article {
   width: 70%;
   float: right;
   background-color: white;  
   padding-bottom: 1.0em;  
}
article p { 
 margin-left: 1.8em;
 margin-top: 0.6em;  
}
/* sidebar */
aside {
  width: 30%;
  padding-bottom:4.3em;
  background-color: burlywood;
   
}
aside p {
 margin-left: 1.3em;
 margin-top: 1.0em;    
}
/* footer section */
footer {
   color: navy;
   background-color: lightblue;
   text-align: right; 
   padding-top:0.4em; 
   padding-bottom: 0.4em;
}
footer p {
 margin-right: 0.5em;
 clear:right;
}
XxS0ul678
  • 117
  • 1
  • 15
  • You linked the same image twice in your question - and you're missing all the HTML after your body tag – HorusKol May 01 '17 at 03:12
  • Your html is incomplete too. –  May 01 '17 at 03:13
  • Possible duplicate of [Responsive equal height columns in rows with CSS3/HTML5 Only](http://stackoverflow.com/questions/29587980/responsive-equal-height-columns-in-rows-with-css3-html5-only) – HorusKol May 01 '17 at 03:16
  • Looking at the image and CSS - you're experiencing the pretty standard unequal heights problem. The [duplicate question](http://stackoverflow.com/questions/29587980/responsive-equal-height-columns-in-rows-with-css3-html5-only) has a good solution using CSS flex. – HorusKol May 01 '17 at 03:17

0 Answers0