Troubleshooting problems with CSS when zooming in and out

My CSS is designed for screen sizes larger than 1100 pixels. However, when I zoom in using ctrl and the plus sign, the center container on the page fails to wrap properly and suddenly breaks.

HTML:

<div id="outer_footer_bottom">
    <div class="center">
        blabla balaa blabalblabla
    </div>
</div>

CSS:

<style>
    #outer_footer_bottom{
        width: 100%;
        float: left;
        background: #8ac53f;
        height: 26px;
        padding: 16px 0 0 0;
        text-align: center;
        color: #fff;
        overflow-x: auto;
    }

    .center {
        width: 1000px;
        margin: 0 auto;
    }
</style>
htmlcss

Answer №2

There seems to be an issue with the code you're using.

The "outer_footer_bottom" div has a width of 100% (not fixed)
while the "center" div has a fixed width of 1000px

Let's say your zoom level is at 100% and your window size is around 1200px, this would make the "outer_footer_bottom" div's width 1200px and the "center" div's width 1000px.

If you increase the zoom level, the window size decreases causing the "outer_footer_bottom" div's width to become less than 1000px. However, the "center" div's width remains unchanged at 1000px.

This is likely why you are encountering this problem.

SOLUTION 1: Try changing the "outer_footer_bottom" div's width to a fixed value (e.g. 1000px or 1200px)

SOLUTION 2: Alternatively, change the "center" div's width to unfixed (e.g. 100% or 90%)

Answer №3

.middle {
        margin: 0 auto;
    }

Get rid of the width:1000px declaration in the styling of the middle class.

Answer №4

Your code is functioning perfectly. The #outer_footer_bottom has a width of 100% when zoomed in or out, and displays a scroll bar if the zoom level is less than 1000px as specified in .center.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The publicPath configuration in Webpack is not functioning as expected

Check out my demo setup: Take a look at my webpack configuration below: module.exports = { entry: './app.js', output: { filename: 'bundle.js', path: './build', publicPath: 'http://localhost:3000/&apos ...

javascripthtmlwebpack

Position the caret beneath the anchor text

<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-decoration: none"> <span class="criteria">any</span> <span class="caret" style="margin-top:6px;"></span> </a> The code snippet above ...

htmlcss

I am attempting to retrieve the value of a 'td' element using jQuery, but it consistently returns 'null'

My task involves extracting the value of a specific cell within a table to filter out unwanted rows. However, every time I attempt to retrieve the value of that cell, it consistently returns null or nothing at all. Despite referencing various sources and s ...

jqueryhtmlasp.net-mvc

Enhance the collapsible feature in Vue.js by integrating Bootstrap and anim

In the process of creating a side bar menu with collapse show/hide functionality, I am encountering some issues. The current CSS implementation is making the collapse action appear abrupt and unnatural. I am looking to achieve a smooth sliding transition ...

cssvue.jsvuejs2bootstrap-4

Show me how to customize the default confirmation box using just CSS!

Is it possible to style the standard window.confirm using only CSS without any additional JavaScript code? If so, how can this be achieved? ...

cssconfirm

Set the DIV element to match the height of its container

I'm currently using this HTML code, and it's functioning correctly. However, I would like the height of the div to adjust dynamically based on the tab's content, rather than specifying a fixed height of 200px. Using a percentage value for th ...

cssvue.js

How can you execute PHP code within another PHP script without triggering a redirect?

I'm faced with a situation where I have two php files, namely abc.php and def.php. My goal is to only display abc.php in the browser URL bar when it executes. Additionally, upon clicking the submit button on my HTML page, abc.php should be triggered t ...

javascriptphphtmlajaxpost

What is the best way to incorporate a splatter image within an MDX blog post?

I am working on an MDX blog where I render a blog post. pages/index.tsx <main className="flex min-h-screen dark:bg-black"> <div className="wrapper mb-24 gap-8 px-8 lg:grid lg:grid-cols-[1fr,70px,min(70ch,calc(100%-64 ...

cssreactjsnext.jscss-positionmdxjs

Creating a mockup for a website design project in my class, utilizing HTML and CSS. Encountering issues with the CSS not displaying correctly, unsure of the root cause of the problem

Check out this wireframe design I created: https://i.stack.imgur.com/Ro3dl.png I'm working on translating this into HTML and CSS so that I can further develop it. The HTML Code: <!doctype html> <html> <head> <title> Trinit ...

htmlcsslayoutwireframe

Removing a session when the client has left

I wanted to simplify what I'm trying to achieve. Imagine two people have PHP sessions on a webpage. One person leaves the page while the other remains. After 60 seconds, the session of the person who left should be terminated automatically (like a ti ...

phpjavascripthtmlajax

Tips for shifting an image upwards and extending it beyond one section while keeping the other section unaffected

Struggling all day while designing a CSS site, trying to hide one part of an image when it overflows and keep another part visible, in addition to moving the image up and down. Here's the HTML code snippet: <section class="next-gen"&g ...

htmlcssbootstrap-5

Arrange the footer content into multiple columns

Hello! I'm currently working on creating a footer for my website. I've written this code and everything seems to be functioning correctly, except for the fact that the second row is positioned under the first row and taking up half of the bottom ...

htmlcss

Utilize the power of Vuejs' v-for directive to populate not only the table rows, but also its header with

Can a single object be used to populate both table headers and rows? I attempted to do so with the code below: <table v-for="(table, index) in tables" :key="index"> <thead> <tr> <th> {{ table. ...

htmlvue.jsloopshtml-tablev-for

Converting a webpage into UTF-8 format

Can you explain the concept of encoding a webpage to me? When someone mentions that a page is encoded in UTF-8 or another format like EUC-KR, what does that signify? Does it pertain to encoding done on the server-side or client-side? Is it related to th ...

javahtmlencodingutf-8character-encoding

Acquiring administrative authorization upon user login with PHP

I have developed a registration form and a login form using PHP. However, whenever I run this code, it displays the message "invalid username" when the username is invalid, or it says "your account isn't approved by admin yet." Can anyone please guide ...

phphtmlmysqlcssdatabase

Transferring information from user input to a table using AngularJS

I need assistance with AngularJS to transfer data from 2 input fields (name and last name) into a table row. <input type="text" ng-model="name"> <input type="text" ng-model="lastname"> Here is the structure of my table: <tabl ...

angularjshtml

hide content on both desktop and mobile devices

I can't seem to figure out what's wrong here and my mind is blank. I have 2 tables - one for desktop users and one for mobile users. I attempted to hide one using the display none property in my code. .mobile{display: none;} This CSS was mean ...

htmlcssmobile

Having Trouble Changing CSS with Rails Link_to CSS ID

While following the ruby on rails guide, I came across a specific way to write link_to's with a css id: <%= link_to "About", about_path, id: "third" %> I also attempted: <%= link_to ("About", :id => "third"), about_path %> Although ...

ruby-on-railscss

Tips for effectively downsizing an HTML Canvas to achieve high-quality images

Introduction I am currently facing issues with blurry visuals in my canvas animation, especially on devices with high pixel densities like mobile and retina screens. In order to address this problem, I have researched canvas down-scaling techniques and f ...

javascripthtmlcsscanvashtml5-canvas

Troubleshooting: Unable to preview Facebook Page plugin

When I visit the Facebook developer site to get the code for a Facebook page plugin, I use this link. The preview feature works perfectly with pages like "facebook.com/Nike", but when I try it with my own page, "facebook.com/BargainHideout", it doesn&apos ...

javascripthtmlcssfacebook