Modifying the position of text in HTML and CSS is not possible

Greetings, I am a student hailing from the picturesque country of Belgium. Currently, I am in the process of developing my very own portfolio website. However, an infuriating error has reared its ugly head and unfortunately, despite my best efforts, it remains unresolved. In light of this vexing dilemma, my esteemed teacher strongly recommended seeking assistance by posting a query on this platform.

It has come to my attention that the bold text within my design seems to be misbehaving. Ideally, I would like it to mirror the behavior of the succeeding text segment. Does anyone have any insights or suggestions on rectifying this issue?

https://i.sstatic.net/moxiF.jpg

HTML

<div id="content">
<div class = "intro" id="introtext">
<h2 id="h2intro">My name is not Joren and I am a <span class="cyan">designer</span>      from Belgium. </h2>
<h3 class="h3intro">I am passionate about making very <span class="cyan">simple and clean</span> designs that are easy on the eye and very simple to use.</h3>
</div><!--end intro-->

CSS

.cyan
{
    color:#00d1e0;
}

#h2intro
{
    font-weight: bold;

}

.h3intro
{
    color: #463E3F;
}

Your expertise and advice would be greatly appreciated as I navigate this conundrum with hopes of a swift resolution!

Sincerely, Joren

htmlcsstext

Answer №1

To ensure consistency, consider adjusting the default font-size for both h2 and h3 to be the same. Here is a suggestion:

 h2, h3 {
      font-size:14px; 
}

 #h2intro {
     font-weight: bold;

 }

 .h3intro {
     color: #463E3F; }

It seems like default styles have been applied to H2 and H3 which could be causing discrepancies in padding and size. To target specific h2 and h3 elements without affecting others, you can set the size in #h2intro and .h3intro.

To address a comment, include the following styles at the end of the stylesheet. 

#introtext h2.h2intro  
{ 
    font-size: 14px; 
    font-weight: bold;
    margin: 0px;
    padding: 0px; 
 } 

#introtext h3.h3intro 
{  
   font-size: 14px; 
   margin: 0px;
   padding: 0px;
   color: #463E3F; 
}

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 HTML page abruptly cuts off halfway without allowing the user to scroll further

As a newcomer to the world of html and css, I am attempting to construct a reporting page that will showcase various script outputs. However, I am running into an issue where only half of my page is displayed with a scroll bar, whereas I would like the o ...

htmlcssscrollheightoverflow

Display or conceal div elements using JavaScript

Is there a way to hide certain divs when clicking on a specific div box? Clicking on the box will trigger the hiding of some application divs. See the first image below: When the boxes are hidden, the other divs will readjust in place of the current divs ...

javascripthtmlcsstwitter-bootstrap

Tips for incorporating a MySQL Command on every webpage

I am encountering issues with running a specific code on every page. Despite my efforts, the code does not appear to be functioning properly. <?php include 'db.php'; $servername = "localhost"; $username = "root"; $password = ""; $dbname = "Us ...

phphtmlmysql

Child component being used within a parent component in VueJS

Currently, I am in the process of transforming an existing theme into reusable components. One of the components I have created is a button component structured as follows: <template> <a :href="link" class="button" :class="styling"><sl ...

javascripthtmlvue.jsvuejs2

JScript Button functions properly in Chrome but encounters issues in Firefox

One challenge I encountered involves a script that appends attributes when a button is clicked. Here is the script: <script type="text/javascript"> window.generateRow = function() { var d = document.getElementById("add"); var p = document.cr ...

javascripthtmlgoogle-chromefirefox

Utilize a specific component to enclose particular words within a contenteditable div in an Angular project

I have a task at hand where I need to manipulate text input from a contenteditable division, use regex to identify specific words, and then wrap those words within an angular component. Although I have managed to successfully replace the text with the com ...

javascripthtmlangularstringdom

The function WebSecurity.ChangePassword is returning a value of FALSE

I'm struggling to understand why my WebSecurity.ChangePassword function is not functioning properly. Below is the code snippet I am currently working on. if (WebSecurity.ChangePassword(USER, oldpass, password)) { Response.Red ...

asp.nethtmlwebmatrix

Learn the steps for accessing and utilizing aria-label text in Google Chrome

Struggling with the aria-label attribute for blind users in Chrome. Can't seem to hear the aria-label text. Any insights on how aria-label behaves in Chrome or if I'm using the wrong approach? If I'm heading in the wrong direction or using ...

htmlcssgoogle-chromeaccessibilitymantine

Combining an HTML file, a D3.js script file, and manually inputting data in the HTML file

I am relatively new to d3.js and currently working on building a simple application. However, I have encountered a roadblock in my progress. I have a separate JavaScript file named jack.js which generates a pie chart when linked with an HTML page. The Iss ...

javascripthtmld3.js

Receive a pair of distinct arrays through a text field submission

I have a form on my website with a single textarea input. Visitors can enter text in the textarea in the following format: 5x Blue Flower 2 Red Flower 3* Yellow Flower Purple Flower I need to extract two arrays from this input - one for the quantity an ...

phphtmlarraysformstextfield

What is the best method to modify the background color based on the current value selected?

I am using asp-core net 2.2 mvc and I want to dynamically change the background color of a div based on the value selected in a dropdown list. In my view, I have the following select element: <div id="bgcolor" class="form-group"> <label asp-fo ...

jqueryhtmlasp.net-corebootstrap-4

Issue with JQuery addClass functionality in Firefox

I've come across numerous posts on this topic, but none of them have provided a solution. I recently added drag and drop functionality to my website. When I drag an item over a valid container, I add a specific class to it. Here is the HTML for the ...

javascriptjqueryhtmlcss

Exporting a JasperReports Server report to an HTML file via a URL: A simple guide

I am trying to export a report to a plain HTML file from Jasper Reports without it displaying within the viewport. When using &output=pdf in the URL, I successfully get a PDF file; with &output=xls, an XLS file is generated. However, when using &am ...

javahtmljasper-reportsjasperserver

Explain the usage of Razor syntax when defining the name attribute in HTML

Currently, I am utilizing MVC 5 and Razor 3 to dynamically generate an attribute name in HTML using Razor syntax. Specifically, I am focused on creating a data-* attribute. This pertains to determining the name of the attribute rather than its value. Her ...

c#htmlasp.net-mvcrazor

Display the contents of a <div> tag from one HTML file onto another HTML file

Recently I embarked on learning HTML and came across a peculiar doubt. My goal is to create a section div on the first page that changes dynamically based on the menu item clicked, rather than redirecting to another HTML page. I've experimented with s ...

javascriptjqueryhtmlcss

Is there a way to prevent the text in my text boxes from staying there when I refresh the page?

Currently working on an HTML5 project with Javascript, here is a snippet of my code: Your inquiry <textarea type="text" name="phrase" id="phrase" cols="50" rows="5" placeholder="Write your text here. . ."></textarea> I am looking for a way ...

javascripthtmltextarea

Python for Asynchronous HTTP Requests

I am currently working on a Python script to extract the value of the href attribute from an anchor element on a web page. The challenge is that the div element containing the anchor element's content is loaded through AJAX jQuery calls when the web p ...

javascriptjquerypythonhtmlajax

What is the best way to achieve vertical text box scrolling in CSS and HTML overflow?

I'm having an issue with a text box I created and I couldn't find a solution elsewhere. Here is the CSS script for the text box: css: .cln{ top:220px; width:680px; height:350px; text-align:left; overflow:scroll; white-space: nowrap; overflow: ...

htmlcss

Troubleshooting a Misbehaving List with HTML and CSS

I am seeking assistance with resolving an issue in a 2-column list layout. The problem arises when the content in the right column spills over into the left column if it exceeds a single line. Additionally, when the content in the left column spans multi ...

htmlcsshtml-lists

Different ways to customize buttons using CSS

Looking for help with css button styles as a beginner in html. https://i.sstatic.net/LZOlO.png I can comprehend the .button code, but struggling to round the border in red color. Any experts in html and css who can provide assistance? Any guidance would ...

htmlcsshover