Html+css Website sizing not working properly

Hey im quite new to all of this, im a student and im working on a project currently, i have made some of my website with html and css but i relised when i crtl+scrollwheel zoom on Chrome all my Stuff goes overeachoter/breaks and my background image just fully doesnt zoom at all, if someone may help me with this please itwould be much apretiated

<!DOCTYPE html>
<html>
        <head>
                <title>About Robots</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0" user-scalable=no>
                <link rel="stylesheet" href="AboutRobots.css">
        </head>
    <body>
        <section>
                  <nav>
                 <p>Robotics</p>
                 <h1> What about robots?</h1>
                      <ul>
                     <li><a href="..//HTML WEBSITE/HomePage.html">Home</a></li>
                      <li><a href="#">More Tabs </a>
                         <ul>
                                <li><a href="..//HTML WEBSITE/AboutRobots.html">Types of Robots.</a></li>
                             <li><a href="#">Use of robots.</a></li>
                                <li><a href="../HTML WEBSITE/Pricing.html">Pricing</a></li>
                            </ul>
                     </li>
                        <li><a href="#">Contact</a></li>
                     <li><p>all information is found on the internet .</p></li>
                    </ul>
                 </nav>  
        </section>
         <section class="difftitle" >
             <p> 
               <b>
                   Here is 10 diffrent types of robots that helps us.
               </b>
             </p>
         </section>
    </body>  
</html>
*{
    margin: 0%;
    padding: 0%;

}
body{
    display: block;
    background-color: cyan;
    background-size: cover;
    background-repeat: no-repeat;

    
}
nav{
   
        width: 100%;
        height: 55px;
        background-color: rgb(255, 255, 255);
    }

nav h1{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    font-variant: small-caps;
    color: rgb(0, 0, 0);
    float: right;
    font-size: 14px;
    line-height: 55px;
    padding: 0px 15px;
    
}

nav h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    font-variant: small-caps;
    color: rgb(0, 0, 0);
    
    font-size: 14px;
    line-height: 55px;
    padding: 0px 20px;
}
nav h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    font-variant: small-caps;
    color: rgb(0, 0, 0);
    float: right;
    font-size: 14px;
    line-height: 55px;
    padding: 0px 20px;
}



section nav p{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    color: rgb(0, 0, 0);
    font-size: 24px;
    line-height: 55px;
    float: left;
    padding: 0px 20px;
}

section nav ul {
    float: left;
    padding right: 50px;
    
}
section nav ul li{
    float: left;
    list-style: none;
    position: relative;
}


section nav ul li p {
    font-size: 15px;
    font-style: italic; 
    font-weight: bolder;
}

section nav ul li a{
    display: block;
    font-family: Arial;
    color: #222;
    font-size: 14px;
    padding: 22px 14px;
    text-decoration: none;
}

section nav ul li ul{
    display: none;
   position: absolute;
   background-color: rgb(255, 255, 255);
   padding: 10px;
   border-radius: 0px 0px 10px 10px;
   
}

section nav ul li:hover ul {
    display: block;
  
   
}

section nav ul li ul li {
    width: 180px;
    border-radius: 4px;
}
section nav ul li ul li a {
    padding: 8px 14px;
}

section nav ul li ul li a:hover {
  background-color: cyan;
  padding: 11px;
  
}
section nav ul li a:hover {
    background-color: cyan;
    padding: 22px;
}
section nav ul li ul li ul li a:hover {
display: block;
padding: 15px;
}


body{
    display: block;
    background-image: url("./images/DiffrentRobots2.jpg");
    background-size: cover;
    position: relative;
    background-repeat: no-repeat;
}

.difftitle p{
    font-family: sans-serif;
    font-style: italic;
    font-size: 30px;
    float: left;
    position: relative;
    left: 8%;
    top: 12%;
    
}

Your background image isn’t going to zoom because it’s a background image - it scales to fit the space allotted. Since the space allotted doesn’t change, the image won’t change all all. Zoom only works on content, not structure, which includes backgrounds.

As for the rest, I’m not sure what you’re seeing. Can you provide some screenshots to show what’s bothering you and we can try to provide guidance.

ill send what its supposd to look like even while its zoombed but itsnot

The issue you run into is when you zoom in is the scale gets all messed up, and once there isn’t enough real estate, things are going to start to drop/wrap. Because you’re using floats on the objects to the left and the right, the only thing left to drop is the bit in the middle.

How would YOU want that to look if you increase the zoom factor, with the caveat that all on one line is NOT an option unless you set a minimum width on the container, which could introduce scrollbars in weird places instead, which would be worse.

i dont mind the things moving as i know its not really going to NOT move at all but i just want like my navigation bar ect to atleast stay in place and my stuff not to scramble all overeachother when its zoomed to much, its a starting project so not being able to zoom is not a problem i was just curuios for the future :slight_smile: thank you!

Zooming is a bit off, but using flex instead of floats would help immensely.

I reworked this a bit real quick, and it “fails” a little more gracefully. I’m sure @PaulOB would be able to show you a much better way.

Ah okay i seeee, if Paul shows better then much apretiated but if not thanks anywayss made me able to understand the prblem atleast!! !

Sorry I missed this :slight_smile:

I’ll take a look tomorrow but I’m not sure the issue you should be looking at yet is the browser zoom but instead the responsive layout needs a lot of work and should be the first area to address.

Browser are always going to break at exorbitant zoom levels and it also depends whether you are zooming text only or a full browser zoom.

1 Like

I’d tweak it a bit like this for starters.

There would still be the issue of what to do for small screen for the hover menu as that will be awkward on touch.

2 Likes

Oh wow thats so much better!!! thats like all i wanted
let me see if i can finish the rest with what information i got now1 Thank you!

1 Like

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