Currently working on creating a form for adding books to a fictional library website. The form tag is enclosed within a div, but despite the CSS styling applied, it remains fixed to the left side of the screen and I'm struggling to understand why.
.form-container {
padding: 50px;
background: white;
display: inline-block;
border-radius: 25px;
margin: auto;
}
margin: auto doesn't go well with display: inline-block. I suggest using the following CSS code instead:
.form-container {
padding: 50px;
background: white;
border-radius: 25px;
margin: auto;
width: 50%;
max-width: 800px;
}
This will center the form-container and limit its width to 800px. It seems like this is what you were aiming for.
If form-container is a div, there's no need to add display: block because divs have a default display of block.
By utilizing the display: flex property, you can effortlessly position your form at the center of the screen.
.form-container {
padding: 50px;
background: blue; /*to visualize the form*/
border-radius: 25px;
display: flex;
justify-content: center; /* horizontally aligns your form */
align-items: center; /* vertically centers your form */
}
I prefer using the combination of margin-left and a specific width. For example, if the parent width is 100% and the element width is 50%, setting a margin left of 25% will always center the element.
@isherwood mentioned that it's important to have different widths for various devices (such as mobiles, laptops, iPads, etc.). Guidelines on how to customize styles for specific devices can be found at W3Schools
<html>
<head>
<style>
.form-container {
padding: 50px;
background: white;
border-radius: 25px;
border:solid black 3px;
margin-left:25%;
background-color:grey;
width:50%;
}
#mainSection{
background-color:red;
padding:25%;
padding-left:0%;
}
</style>
</head>
<body>
<div id="mainSection">
Here is some content and the form should be centered below
<div class="form-container">
<input type="text" default="Here is the form">
<button>Test button</button>
</div>
</div>
</body>
</html>After experimenting with various meta tags in the <head> section of my static HTML page, I have found that using <meta http-equiv="X-UA-Compatible" content="IE=edge" /> allows me to access newer CSS elements such as table:last-of-type in IE9. ...
Hey there, I have a link that looks like this: I also have similar links and I'm looking to extract the ID from each one. The challenge is that the characters surrounding the ID vary for each link, so simply cutting out characters from the left and r ...
Having an issue with a double popup situation where the second popup contains selectable fields. Below is the code snippet I am using to display the second popup: $("#select1").click(function(e) { e.stopPropagation(); var tmplData = { string:[& ...
I've been struggling to call the id value of one page in another for a while now. I assigned the id value "addedcart" to the form and tried to call it in my PHP code, but no cart value is being displayed. I'm not sure if I am calling the id corre ...
Can a CSS selector be included within the body section of an HTML document? Here's an example of my code (although it is not functioning as expected): <html> <head> </head> <body> <div style= "a[target=_blank] {backgroun ...
Is there a way to handle null values returned by document.getElementById in JavaScript without adding if statements or checks to the code? I'm looking for a solution that allows the execution of subsequent JavaScript calls even after encountering a nu ...
Here is the code snippet I have: .divA { background: red; width: 500px; display: flex; flex-direction: row; overflow-y: scroll; } .epi { width: 50%; background: blue; } <div class="divA"> <div class="epi"> <h1>dsds ...
In the black container, there is an {overflow:hidden;} CSS property applied The yellow blocks are ordered in code according to the numbers and have {float:left;} I am aiming for the 5th element to align with the element above it: However, currently this ...
Are you searching for the correct process to pinpoint specific image locations within an image sprite? If, for example, you aim to create 10 div images in your header using the image provided below, how can you determine the exact location of each one? Is ...
I need to organize my data in a way that includes an additional row for descriptive information, but this particular row should not be sorted. It is crucial for understanding the rest of the data, so hiding or showing it is not an option. Is it possible t ...
Here is my javascript code snippet: function drag(ev){ var x= ev.dataTransfer.setData("Text",ev.target.id); } I am trying to pass a variable within this event so that I can perform a specific action. However, the current implementation is not worki ...
For a very detailed analytics insight, I am sending an ajax request to my controller in order to update the user's interaction (such as which pages they visit or like) and store this information in my MongoDB. All I want is for this script to be dele ...
While working on a Web Viewer project with axios for web scraping practice, I encountered an issue where the CSS wasn't loading properly. Here is the code snippet I used: console.log("Tribble-Webviewer is starting!") const express = requir ...
I have a unique challenge with my static website. It is designed to display a local image from the user's computer without utilizing a traditional backend system. The website itself is hosted on a static file server, and all image processing must be d ...
Currently facing a challenge with my project involving a chat interface created in Angular. I am struggling with the CSS styling as the chat starts at the top and scrolls downward off-screen as the conversation progresses. Although I can scroll along with ...
I am facing an issue with my HTML page that displays correctly on medium and large devices but encounters difficulties on smaller screens. When the screen size decreases, the text inside the grey elements takes up all the space, causing the two right-float ...
I'm having trouble making a canvas element appear as a circle like any other div. Here is my code, please take a look and let me know what I'm doing wrong with the border-radius property: <canvas id="myCanvas" width="200" height="200" style ...
For a while now, the trend has been leaning towards feature detection. I am interested in determining whether a visitor's browser supports the :hover pseudo class. With many mobile devices not supporting hovering, I want to adjust my event listeners a ...
While attempting to create a wave effect on an image, I hit a roadblock. There are two SVGs involved - one with the path I want to use and the other behaving as expected but with the wrong clip path/shape. However, when I try to insert the desired path, ...
I encountered an issue when attempting to use @at-root and Interpolation in my Sass code. Despite using a standard example for testing, I still receive an error: .button { @at-root a#{&} { color: green; } } Error sass/Site.scss (Line 28 of s ...