Crafting the "About Me" section on my website

Checkout my website here: mckelvey.me:1122 . I'm currently facing issues with the layout of my About Me section. The image in this section is not scaling properly, and I want it to be the full height of #about while occupying 40% of the width on the left side. On the right side, I need the title and paragraph to be centered both horizontally and vertically within the remaining space.

The code I'm using is in jade and stylus, but feel free to respond in html and css as they are very similar:

.about
    min-height: 50vh;
    background-color: #1F7D5B;
    color: #f7f7f7;
  h1 {
      font-size: 1.5em;
      font-weight: 600;
      color: #232323;
      text-align: center;
      padding: .5em 0;
      float: right;
      width: 100%;
  }

  p {
      font-size: 1em;
      font-weight: 100;
      max-width: 50em;
      text-align: center;
      line-height: 150%;
  }

  img {
      float: left;
      width: 18em;
      height: 18em;
  }

.wrap {
    float: right;
}

The jade/html code snippet for this section looks like this:

#about
  .about
    img(src="/img/abstract.jpg")
    .wrap
      h1 About Me
      p Hello, I'm a Designer, Front-end Developer, and Tea Enthusiast. My goal is to create simple, elegant, and responsive websites while enjoying a cup of tea.
htmlcsspugstylus

Answer №1

It can be a bit challenging to provide guidance without seeing the code you're working with directly, so I'll do my best to break it down step by step.

If you want to ensure that an image fits nicely within a div, you can adjust your CSS like this:

#about img { width:40%; max-height:100%; }

With this change, any image inside the "about" ID will be set to 40% of its parent's width and have its height adjusted proportionally.

In order to align text properly within your div, you'll need to make two modifications:

Incorporating 

#about h1, p { vertical-align:middle; }
in your CSS will center the text vertically within the div.

To horizontally align the text, add the following:

#about h1, p {padding-left:auto; padding-right:auto;}

This snippet instructs the h1 and p elements to position themselves in the center of the div.

Side note: Be mindful of potential text overflow issues when implementing these changes. You may need to use the text-align property in your CSS to address this. For instance, try using text-align:justify;.

These guidelines should offer some clarity based on the information provided. Hopefully, this explanation proves helpful to you.

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

Table does not have appropriate rowspan and colspan attributes

I've created a table using bootstrap, but it's not displaying as intended. I used row-span and col-span to format the table, and while most rows are correct, some are not appearing on the page. To better illustrate the issue, I have included an ...

htmlcssbootstrap-4

Arranging Checkboxes Vertically in HTML Without Using Inline Styling

My checkboxes are currently displayed in a column format, but I would like them to be in a single row. To better illustrate the issue, here is a photo: https://i.sstatic.net/PxRzB.jpg I am seeking assistance on how to align the checkboxes horizontally in ...

htmlcssalignmentrow

"Share your social media profiles without redirecting users to new tabs

Currently in the process of launching my own website using the free Portra theme. So far, everything has been going smoothly with this widget free template. However, I have encountered an issue with my social links opening in the same window. I would prefe ...

htmlwordpress

Guide on altering the background color of dynamically generated textboxes in R Shiny

textInput(paste0("inp1-", wid),label = NULL,value = record$Current_week) This code was used to dynamically generate text input boxes, where the id for each box is determined by a number called wid. I attempted to change the background color using the fol ...

cssrshiny

Creating a border around a div element using JavaScript

Is there a way to set a border for a div box using JavaScript similar to using border:2px solid #000; in CSS? Can this be done within the following for loop? elements = document.getElementsByClassName("box"); for (var i = 0; i < elements.length; i++) ...

javascripthtmlcss

Tips for resizing images to have uniform dimensions

I am trying to create an image gallery where all the images are uniform in size. Currently, I am referencing this tutorial for guidance on my CSS. div.gallery { border: 1px solid #ccc; } div.gallery:hover { border: 1px solid #777; } div.gallery img ...

cssasp.net

What is the best method for inserting space between two divs?

I need to create more space between the last two cards and the image at the bottom, but this spacing should increase as I resize the browser window. Can anyone help me with this? https://i.stack.imgur.com/rq9t2.png https://i.stack.imgur.com/tOikx.png Th ...

htmlcssimageresponsive-design

Parent div is positioned absolutely with overflow set to hidden

I am facing a unique requirement where the parent div has an absolute position and the child div also has an absolute position. Inside the parent div, I have set overflow: hidden to hide the extra width of the child div. However, this setup is not working ...

htmlcss

Measuring the quantity of 'table' elements with jQuery

This HTML code below defines a table structure. Now tables can be dynamically added to this structure. <div class="tableStyle myWebsiteTable"> <table cellspacing="0" cellpadding="0" id="site0" class="site active"> <thead> ...

javascriptjqueryhtmlcssjquery-plugins

Transmitting a chunk of HTML to a distant server following the completion of the initial form submission

// Modified // The main concern here is the most effective way to transmit a potentially large block of dynamically generated HTML to a remote server after form processing. // End Modification A client has a registration form that is shared across multi ...

phphtmlpostcurl

The new data is not being fetched before *ngFor is updating

In the process of developing a "Meeting List" feature that allows users to create new meetings and join existing ones. My technology stack includes: FrontEnd: Angular API: Firebase Cloud Functions DB: Firebase realtime DB To display the list of meeting ...

javascripthtmlangulartypescriptasynchronous

Instructions for arranging dropdown options alphabetically with html, vue, and js

When working with JavaScript, is there a method to populate an options list from a database and then sort it alphabetically? ...

javascripthtmlvue.jsvue-component

Styling columns alternately with CSS - an even-odd approach

I'm having an issue with my html code structure. Here's how it looks: <article></article> <article></article> <article></article> <article></article> <article></article> <article> ...

htmlcsscss-selectors

How can you master the art of PHP templating like a pro?

Years ago, I started a small PHP website that has since grown into quite a mess. Despite having a separate template for the final HTML output, I still find myself handling a lot of HTML within the 'business logic' part of the code. My main issue ...

phphtmltemplate-enginetemplating

How come the dropdown menu consistently disrupts my CSS design?

Whenever I add a dropdown menu, my CSS layout gets all messed up. Can someone please explain why this happens and how to fix it? Below is the code snippet: <asp:Label ID="projnamelbl" runat="server" CssClass="editlabels" Text="Project Name"></as ...

c#asp.netcss

What are the possible reasons for the incorrect appearance of jqxMenu?

I am currently developing a custom module for an angular project. My goal is to create a menu using jqxMenu, however, when I use ng serve to run the project, the menu does not display as expected. Below is how I have imported jqxmenucomponent into my compo ...

htmlnode.jsangulartypescriptjqwidget

Styling two divs with borders

Hello everyone, I could really use some assistance with merging the borders of two <div>s. Here's what I'm trying to achieve compared to where I currently stand: view image here and this is my desired outcome view image here Would anyone b ...

htmlcss

Explore a webpage for links, navigate through them, and retrieve pages that do not contain any links using R programming

In the process of updating my rNOMADS package to include all models from the NOMADS website, I found myself faced with the challenge of not knowing the depth or breadth of the html directory tree beforehand. To solve this issue, I decided to create a simpl ...

htmlrhyperlinkweb-crawler

Resizing popups upon button activation

Hey there! I have a popup with a button that reveals random text containing between 0 to 32 words when clicked. The issue is, the popup keeps resizing based on the length of the text, causing the button to move around. Is there a way I can keep the button ...

javascripthtmlcssgoogle-chrome-extension

Using an Angular 1 controller scope method as a callback for a captcha library

I have a customer in China who needs a specific captcha that functions there. You can find the captcha I need to use at this link: Essentially, there are 4 steps to make it work: Add this line to the label of your html: <script src="https://ssl.ca ...

javascripthtmlangularjs