When you zoom in and out, the Div elements are shifting positions

Here is the code snippet I have: JsFidle

However, when I zoom in and out, the div elements seem to shift by 1 or 2 pixels on the screen. I was expecting them to remain fixed in their positions.

For instance, the left div (.hora) displaying 12:07 extends beyond the orange border, and the center div with letters also seems to move vertically...

<div class="interiorPantalla">
  <div class="interiorSuperior">   
    <div class="hora line-left">
      <span>12:07</span>
    </div>
    <div class="proxSortidaCCA">
      <span class="superiorPantallaCatala">Pròximes sortides</span><br>
      <span class="superiorPantallaCastella">Próximas salidas</span>
      <span class="superiorPantallaAngles notbold">Next departures</span>
    </div>
    <div class="logoPantalla1" >
      <img src="images/123.png" class="logoPantalla" >
    </div>
  </div>
</div>

I'm wondering what mistake I might be making?

Answer №1

After conducting various experiments, it became evident to me that the span nested within the .time class is expanding beyond its boundaries because of its large font size and inline display.

By changing it to a block element using display:block, the span fits back inside its container, eliminating the need for any positioning modifications.

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

Creating a stylish button using a combination of CSS and Javascript classes within a webpage layout

Is it feasible to include a button in the layout that has HTML, CSS styles, and JavaScript functionality? For instance: This button is designed with both CSS styling and JavaScript classes. How can one incorporate CSS and JavaScript along with HTML conte ...

Using TypeScript, apply an event to every element within an array of elements through iteration

I have written the code snippet below, however I am encountering an issue where every element alerts the index of the last iteration. For instance, if there are 24 items in the elements array, each element will alert "Changed row 23" on change. I underst ...

Stylish Navigation Menu Logo/Site Name

Currently in the process of upgrading my website and I have my website name included as part of my menu, as opposed to a logo. This has been an easy solution that has worked well for me. For mobile screens, the template I purchased includes a slicknav men ...

Troubleshooting a hover problem in CSS navigation bar

Having some trouble with the CSS menu on my website click here. I've tried adjusting the code, but can't seem to get all the menu levels to line up properly. As a beginner in CSS, I'm sure I'm overlooking something simple. When hovering ...

What are some ways I can receive a response promptly from a service in AngularJS?

After calling the service method from the controller, there is a delay in receiving the data that I need to populate a dropdown. My expectation is that when I call this method from the controller, it should return a response immediately, and then other log ...

Naming small cells in HTML table columns/rows

I'm currently developing an application that accepts an image as input and displays it within an HTML table, with each cell representing a pixel. To provide visual reference, I am numbering every other column and row on the table. However, I've ...

Tips for generating an input element using JavaScript without the need for it to have the ":valid" attribute for styling with CSS

My simple input in HTML/CSS works perfectly, but when I tried to automate the process by writing a JavaScript function to create multiple inputs, I encountered an issue. The input created with JavaScript is already considered valid (from a CSS ":valid" sta ...

CSS: Implementing opacity on background images within an unordered list menu items

My menu is made up of ul/li items with background images, but I'm having trouble adjusting the opacity and alignment of the images. While there are resources online for changing background image opacity, such as this article: https://scotch.io/tutoria ...

Ways to handle <select> change events effectively in materialize css

My attempt at using a basic jquery change listener on a materialize css select dropdown has been unsuccessful. $("#somedropdown").change(function() { alert("Element Changed"); }); 1) Can anyone provide guidance on how to add a listener to ...

AngularJS - directive template is not being compiled correctly

I am facing an issue with AngularJS. .directive('field', ['$routeParams', function($routeParams){ return { restrict: 'E', compile: function(tElement, tAttributes) { var template ...

The Django form isn't displaying properly after being imported into the HTML file

Can anyone help me figure out why my Django form isn't appearing in my HTML template? I've tried everything on this site and nothing seems to work. Any suggestions? views.py def handleForm(request): context = {} if request.method == &apo ...

Discrepancy in Syntax Highlighting in HAML Code

Hopefully this is an easy fix, as I am struggling with highlighting some HAML code using the prism library. %pre %code.language-haml &#37;header.post-header &#37;h1= data.title &#37;time{ datetime: data.date }= pretty_date(data.d ...

Creating a Dynamic Navigation Bar with CSS and JavaScript

I have encountered an issue with my responsive menubar where the dropdown button does not have any style when clicked. function myFunction(){ var x = document.getElementById("myMenubar"); if (x.className === "menubar"){ x.className += "responsiv ...

Tips for saving JavaScript results to a form

Hey there! I'm looking to figure out how to save a JavaScript calculation within a form instead of just displaying an alert or outputting it on another page. Below is the JavaScript code I have for calculating prices. <script type="text/javascript ...

Installing Fontawesome 4.3

I recently downloaded the Fontawesome pack, which includes css, Less, and other supporting files. I have successfully copied these files to my website. My website is running on the Gantry framework, which requires me to edit the Head Section in order to a ...

Utilizing CSS and HTML exclusively, display content on hover

Is there a way to display a child div when hovering over an anchor tag? I'm looking to reveal a div with the class of botm when the cursor hovers over the anchor tag. Here's the specific layout I have in mind, so please maintain the order of tags ...

Retrieving HTML content using CURL

Could really use some help with my curl issue: I'm using CURL to connect to a page, then redirecting myself to another page that's only accessible when logged in. How can I retrieve the HTML code from this page? I can see the page displayed, but ...

Making a full-width browser bar by utilizing negative margins

I've been following a tutorial and need help with my header element. I want it to have a max-width of 800px and be centered in the middle of the page. Inside the header, there will be a #filtersBar div that spans the entire width of the page. Here&apo ...

Refresh the click event on a newly added element in the backbone framework

As a newcomer to backbone.js and using CodeIgniter as my PHP Framework, I encountered a challenge while developing an existing system that uses a backbone.js library. The problem is straightforward if approached with jQuery, but due to the use of backbone ...

Clickable link that directs to a particular tab on a webpage (cbpFWTabs)

I have been utilizing tabs from the codrops Tab Styles Inspiration and I am looking for a way to open specific tabs using URLs. For instance, if I wanted to open tab3, I could link it as www.google.com/index#tab3. Below is the code I am currently using: ...