Content and form off-center when window width is limited

I am currently working on a responsive HTML page, but I am facing an issue that I cannot replicate on fiddle. To troubleshoot, I have published the page on "www.000webhost". You can access it using this link : . Kindly view it on Firefox and let me know if the link is not functioning.

The problem I am encountering is with the alignment of the text "Find your home" on the first image when the innerWidth reaches around 695px. The text no longer appears centered under this width limit and instead maintains a consistent left margin.

A similar issue occurs with the form displayed below the second image at approximately the same width limit.

To aid in troubleshooting, I have included the clientWidth and innerWidth values at the top of the page. Please disregard other elements on the page as I am specifically focusing on resolving this particular issue.

Below is the relevant section of HTML code pertaining to this alignment issue:

  <div class="homePageImage1" style="background-size:cover;">
    <div class="position2 horizontal-center textAlignCenter lineHeight117 pinyonscriptregular120dieseFFFFFF">
      Find Your Home
    </div>
  </div>
  <div class="homePageImage2">
    <div class="position3 horizontal-center"  [formGroup]="searchFormGroup">
      <div class="position4 border2 textAlignCenter backgroundwhite poppinsextrabold14diese372300">
        Search
      </div>
      <span class="position5 width100percent" >
        <input class="floatLeft dimension1 border3 poppinsregular16diese372300" type="text" placeholder="Dans quelle ville ? Quartier ?" formControlName="ville">
        <input class="floatLeft dimension2 border4 poppinsregular16diese372300" type="text" placeholder="Votre budget max" formControlName="prixMax">
        <div class="floatLeft dimension3 textAlignCenter lineHeight48 backgroundPrimary poppinsbold12diese372300">SEARCH</div>
      </span>      
    </div>
    <div  class="position6">
      <a href="javascript:" class="poppinsregular14dieseFFFFFF textdecorationunderline">Advanced search</a>
    </div>
  </div>
htmlcss

Answer №1

To ensure that the text "Find Your Home" is always centered, start by removing the "position: relative" property from the ".homePageImage1" class.

Next, include an @media rule to apply the property only when the window width exceeds a specific value (I determined it to be 1006px on my end).

Your updated code will appear as follows:

@media (min-width:1006px) {
    .homePageImage1 {
         position: relative;
    }
}

This adjustment will center the text based on window sizes below 1006px.

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

Challenges Arising from Creating an EPL Trivia Game with HTML and Javascript

Having some issues with this game functioning properly. Trying to create a dropdown menu that lists 20 EPL teams, and upon selecting a team, display that team's information in a form. Unfortunately, I'm encountering difficulties with the code. An ...

javascripthtml

Design unique bar graphs to display on your website

I'm working on developing a webpage that will display dynamic data in a visually appealing bar graph. The design and aesthetics of the graph are crucial in this project. You can view the desired design of the bar graph by clicking on this link to the ...

htmlcssasp-classicbar-chart

The process of redirecting a web page using htaccess and incorporating URL parameters

I have a directory where I store HTML pages. Using the PHP include function, I am adding these pages to my index.php file by referencing them with a URL parameter value. The URL parameter "xpage" corresponds to the page names stored in another folder, whil ...

phphtml.htaccess

execute action once element has finished loading - angular

I am looking for a way to trigger an angular function after a specific element has been displayed on the page. The challenge arises because this element is part of a Single Page Application (SPA) where its display is controlled by a series of events. Tradi ...

javascripthtmlangularjs

What type of JavaScript scope is accessible by an anchor tag's href attribute?

My current query involves using an <a> tag to invoke a JavaScript function: <a href="javascript:doSomething();">link</a> In which scope does this JS function need to be defined in order to be reachable? Is declaring it globally necessar ...

javascripthtmlscopeanchor

An unconventional way to display an image using the :before pseudo-element and a data attribute in CSS

My goal is to use the :before pseudo-element to set an image background, as I plan to overlay content on top of it. In the past, I have dynamically set a data attribute with :before for other purposes. Question: Is there a way to change the number using ...

javascriptjquerycss

The border at the top of the table's header will be removed and the

I am trying to achieve a clean look with a solid blue line under my table header. However, the current styling on each th is causing little white separations in between each column. thead th { border-bottom: 4px solid #D3E6F5; padding-bottom: 20px ...

htmlcsscss-tables

Using Web SQL always seems to throw me for a loop

I attempted to populate a web SQL database with some data, but encountered an issue. Here is my code: database(); for(var i=0; i<m.length; i++){ showid = m[i].id; showtitle = m[i].title; insert(); } function database(){ //open the database ...

javascripthtml

Is it normal for e.target.result to only work after two or three tries?

Attempting to resize an image on the client side before sending it to the server has been challenging for me. Sometimes, the image does not align correctly with the canvas used for resizing. I have noticed that I need to send the resized image at least tw ...

javascripthtml

Fetching data from MySQL using Ajax technology

I need assistance with my form that is supposed to input a name and phone number, fetch data from a MySQL database based on the input values, and display the results. However, when I execute the query using an onclick function, instead of retrieving data f ...

htmlmysqlajax

Expanding and collapsing DIV elements using JavaScript upon clicking navigation menu items

At present, the current code unfolds the DIVs whenever a user clicks on a menu item. This results in the DIV folding and unfolding the same number of times if clicked repeatedly on the same link, without staying closed. My desired functionality is to have ...

javascriptjqueryhtmlcss

The Node.contains() function in JavaScript does not verify the presence of inner child elements

I have developed a custom DatePicker component for my React app and I am facing an issue with hiding it on outside click, similar to how I handled other components like Select Dropdown. To address this problem, I created a custom hook: export default (ref, ...

javascripthtmlreactjs

Issue: The path does not correspond to the actual path on the disk

Encountering an error in the browser and terminal stating that a module is not found. Error message: E:\example\src\css\Login.css does not match the corresponding path on disk login.css. Is there a mistake in importing the CSS file or ...

jqueryhtmlreactjsbootstrap-4

How come the text is not centered when I use text-align:center; on my class "text5"?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Homepage</title> ...

htmlcsscenter

When using PHP submit, the text input from dynamically generated JS fields is not being posted

My HTML form includes a table of text inputs that I intend to use for generating an SQL INSERT query. The issue I am facing is that my manually inputted table has 5 text inputs, with the option for users to add more. The additional input fields are being c ...

javascriptphphtmlforms

Retrieving the chosen option in Vue.js when the @change event occurs

I have a dropdown menu and I want to perform different actions depending on the selected option. I am using a separate vue.html and TypeScript file. Here is my code snippet: <select name="LeaveType" @change="onChange()" class="f ...

javascripthtmlvue.js

The automated test locator in Angular using Protractor is failing to function

I am facing a challenge with my angular web application as there are some elements that are difficult to interact with. One specific element is a checkbox that needs to be checked during testing: ` <div class="row form-group approval_label"> < ...

javascripthtmlcssangularjsangular

Unique mechanism for tracking clicks in ASP and C#

Is there a preferred method for showing a click counter on an HTML page when working with a .aspx file that connects to a .cs file pulling data from a SQL server, without relying on an external text file for tracking purposes? I'm trying to avoid usin ...

c#asp.nethtmlhitcounter

Adding JSON data to an array in Angular JS using the push method

I am encountering difficulties with adding data to an existing array. Currently, I have set up a table to display the data, but I want to also include the data in the table when a user enters an 8-digit barcode. Factory angular.module('app.pickU ...

javascripthtmljsonangularjs

What could be causing the slider to have a choppy transition between images?

The Issue: Looking at this GIF, you can see that the image transitions are not seamless. The slider is built on Bootstrap. I am also trying to ensure that the slider's body does not always adjust to the new image but maintains a minimum size. I have ...

htmlcssbootstrap-5