I am currently designing the homepage for my website. I want all the text to be aligned on the same line, but whenever I increase the font size of one element, it creates space around it, shifting it slightly to the right and pushing the text below down.
Is there a way to fix this issue?
My solution involves removing the body {} selector and adjusting the properties of the h2 selector to determine its position on the page. This ensures that the h2 maintains its position when the page is resized. I have assigned similar properties to the h2 as other classes.
@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');
@font-face {
font-family: Roboto-Black;
src: url(/fonts/Roboto-Black.ttf);
}
:root {
--black: Roboto-Black
}
/* INDEX PAGE */
html {
height: 100%;
margin: 0;
padding: 0;
}
.index-bg {
background-image: url(/images/joshua-sortino-71vAb1FXB6g-unsplash.jpg);
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 100%;
z-index: 1;
}
.main-fcs{
position: absolute;
top: 30%;
left: 10%;
transform: translate(-10%, -30%);
font-size: 30px;
}
h2 {
position: absolute;
top: 50%;
left: 10%;
transform: translate(-10%, -30%);
}
.main-fcs h1 {
font-family: var(--black);
}<!DOCTYPE html>
<html lang="en" style="max-width: 100%; overflow-x: hidden;">
<head>
<title>website</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta data-hid="description" name="description" content="website">
</head>
<body>
<div class="index-bg"></div>
<div class="main-fcs">
<h1>Custom Websites</h1>
<p>Your fully custom website awaits...</p>
</div>
<div class="main-fcs-btn">
<div class="fcs-btn-bck">
<h2>Get Started</h2>
</div>
</div>
</body>
</html>In my code, I have an interval set to run every seven seconds. Within this interval, there are two gifs that each last for seven seconds. My goal is to display one of the gifs in a div (referred to as "face") based on certain conditions - for example, if t ...
I have retrieved data from an API with the following response: { "name": "family: woman, woman, girl, girl", "unicode": "1F469 200D 1F469 200D 1F467 200D 1F467", "html": "€ ...
Hey there! I've been diving into a Django book lately and came across a pagination template with a mysterious question mark in the URL. I've looked everywhere but can't seem to find an explanation for it. Check out the template below: < ...
My goal is to ensure my website is responsive by utilizing HTML5, CSS3, JavaScript, and jQuery. I am facing an issue with the responsiveness of my menu in the CSS code. PRÉSENTATION OFFRES PRODUITS RÉFÉRENCE CONTACT Menu nav { ...
Here is the code snippet that I am working with: <%for (int index = 1; index < 7; ++index) {%> <tr> <td> <div class="indicacao_gdp"> ...
Encountering an issue while using NgTableParams to display a table in IE. The table displays correctly in Chrome, but the alignment of rows is off in IE. Check out the demo here When you open the above link in IE and launch the preview window in a separat ...
I am facing an issue while trying to integrate two CSS files into my website. The second CSS file seems to be ignored, even though both files are properly loaded when inspecting with the Development Tool in Chrome. Here is a snippet from my Header: <l ...
As I work on enhancing my registration page with Bootstrap Modal, I need to allow users to upload their image along with other information. HTML <form method="POST"> <center> <img name="user_image" id="proPic" src="ima ...
Looking to create a function that randomly selects an image defined in HTML code. I've opted to create an array to store all used images and have the function pick from there. Is there a simpler way to define the array or should I skip using it altog ...
Below is the PHP code snippet I am utilizing: <?php $to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa909b999598ba99959e9f9c9b889789d48f89">[email protected]</a>, <a href="/cdn-cgi/l/email-protectio ...
Imagine I have this code snippet: <span class="labels" style="background-color: #FFFFFF;border: 1px solid #000000;font-family: Verdana;font-size: 11px; ">74.58 ft.</span> I am looking for a way to compress the span element so that only the te ...
After using Chrome and Firefox for a while, I decided to test out my website on IE8. To my surprise, the results were disastrous. The navigation was impossible, rotations were not rendering correctly, and everything looked like a complete mess. Do any of ...
I have successfully implemented functionality that allows the value of an input to be changed by clicking a checkbox. This works without any issues. Now, I am facing the challenge of automatically checking the checkbox when the page loads, but only if the ...
Error Message: Unable to resolve the signature of a class decorator when called as an expression. The argument type 'ClassDecoratorContext' is not compatible with the parameter type 'string | symbol | undefined'. After creating a book ...
I am facing a challenge with my dashtable which contains over 5000 records and is paginated to load faster. However, I have noticed that when I set the page size to 5000, the loading speed decreases significantly. I have implemented a function that retriev ...
Looking to implement an HTML color picker with the help of JQuery. Wondering if there is a simpler method to do this without relying on external JQuery libraries? Experimented with <input type="color"> but encountered issues that prevented it from ...
I am having trouble changing the border color and text color when an input is disabled. I have tried multiple variations, as seen below: const textFieldStyle = { '& label': { color: darkMode?'#1976d2':'', } ...
Issue Description Currently, I am encountering an error when attempting to retrieve input from an <input> tag and showcase it as chips in the graphical user interface (GUI). The console displays the following error message: "TypeError: this._chipLis ...
I'm struggling with a function in Javascript that will only check checkboxes on visible rows of an HTML table. The table has a checkbox on each row and is filtered based on a textbox above the table. The checkboxes in the table are named chkbuild, an ...
I have come across many solutions for this issue, but none of them seem to work for me. On my main page, when I scroll to the bottom, the footer appears to have extra space beneath it, which actually seems to be the background of the page. This problem onl ...