Struggling with creating a unique business card design with CSS

Currently, I am working on designing a business card that features the name and title at the center, with the email and phone number positioned on the extreme left and right sides of the card.

Below is the code snippet I have been using:

.business-card {
   position: relative;
   border: 1px solid black;
   width: 200px;
}
.business-card section {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.email {
  position: absolute;
  right: 0;
}
<div class="business-card">
  <section>
      <span>
          Name: ABC
    </span>
    <span>
        Title: XYZ
    </span>
  </section>
 <footer>
   <span class="phone">
       123-123-123
   </span>
     <span class="email">
       <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5848786a5848786cb868a88">[email protected]</a>
   </span>
  </footer>
</div>
I am facing an issue where the name/title text is extending beyond the boundaries of the div element.

.business-card {
   position: relative;
   border: 1px solid black;
   width: 200px;
}
.business-card section {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.email {
  position: absolute;
  right: 0;
}
<div class="business-card">
  <section>
      <span>
          Name: John Doe
    </span>
    <span>
        Title: Manager
    </span>
  </section>
 <footer>
   <span class="phone">
       123-456-789
   </span>
     <span class="email">
       <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4e4d4c6f4e4d4c014c4042">[email protected]</a>
   </span>
  </footer>
</div>

If anyone can offer assistance in resolving this issue, it would be greatly appreciated. Please find attached a sample screenshot of the desired business card design: https://i.sstatic.net/a1TRO.jpg

htmlcssresponsive-designflexbox

Answer №1

.card {
  border: 1px solid lightgray;
}
.title {
  display: flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
  text-align: center;
  word-break: break-all;
}
.title > div {
  width: 50%;
}
.info {
  display: flex;
  padding: 2em;
}
.info > div {
  flex: 1;
}
.info > div:nth-child(2) {
  text-align: right;
}
<div class="card">
  <div class="title">
    <div>Name: eDesignary</div>
    <div>Title: Source code platform!</div>
  </div>
  <div class="info">
    <div>Hyderabad</div>
    <div><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c5c4c5d3c9c7cec1d2d9e0c7cdc1c9cc8ec3cfcd">[email protected]</a></div>
  </div>
</div>

Kindly inform me if your issue has been resolved.

Answer №2

To begin, register for a codepen.io account > look up "business card" and proceed to design something akin to another individual's creation. By doing so, you can acquire knowledge on alternative techniques that may have previously eluded you.

In my case, I would likely create a DIV with dimensions around 500px.

The image should occupy half of the div's height Subsequently, structure your text in a suitable manner

Answer №3

Typing names with spaces between first, middle, and last names is common practice. To fix your code, simply replace 'align-items' with 'text-align'.

HTML: 

 <div class="business-card">
  <section>
    <span>
          name: John Doe
    </span>
    <span>
        title: Manager
    </span>
  </section>
  <footer>
    <span class="phone">
       123-456-7890
   </span>
    <span class="email">
       <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89121b1c1211125f121e1c">[email protected]</a>
   </span>
  </footer>
</div>

CSS: 

 .business-card {
  position: relative;
  border: 1px solid black;
  width: 200px;
}

.business-card section {
  display: flex;
  flex-flow: column;
  text-align: center;
}

.email {
  position: absolute;
  right: 0;
}

If this solution resolves your issue, please inform me.

Answer №4

Take a look at the snippet below and let me know what you think:

.business-card{
   position:relative;
   border:1px solid black;
  width:800px;
  height: 400px;
}
.business-card section {
  display:flex; 
  flex-flow:column;
  align-items:center;
}
.email{
  position:absolute;
  right:0;
}

#textbox p{
  display: inline-block;
  width:31%!important;
  vertical-align:top;
  text-align:left;
  padding:0px 5px;
}
<div class="business-card">
  
  <section>
      <span>
          <img style="height: 200px; width: 400px; align-items:center;" src="http://www.underconsideration.com/brandnew/archives/google_2015_logo_detail.png"/>
    </span>
  </section>
  
  <div id="textbox">
  
  <p>Text on the left.Text on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the leftText on the left</p>
    <p>Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.Text on the middle.</p>
  <p>Text on the right.</p>
  </div>
  <br>
  <br>
  
  <div style="clear: both;"></div><!-- Fixes float issues -->
  
</div>

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

I attempted to convert my CSS to SCSS, but encountered an error during the compilation process

{ "status": 1, "file": "E:/Natours/sass/main.scss", "line": 31, "column": 5, "message": "argument `$alpha` of `rgba($color, $alpha)` must be a number", "formatted": ...

cssnode.jsnpmsass

Why do CSS Variables have different syntax for setting and getting values?

When we use CSS Variables, also known as CSS Custom Properties, the syntax for setting and getting values is different. To set a value for --my-custom-width, we use: :root { --my-custom-width: 120px; } Similarly, to get the value of --my-custom-width, ...

csscss-variables

Trouble with applying CSS class to checkboxlist

I am trying to display a border around each checkbox item in a checkboxlist. I believe that it can be achieved by setting the td cssclass as the checkboxlist saves items in td. However, the code I tried below is not working. Here is the ASPX code: < ...

c#cssasp.netcheckboxlist

Centralizing the Accordion header and expansion icon in React with Material-UI

I'm currently incorporating the Accordion feature from Material-UI library into my React project: My goal is to ensure that the accordion summary (header with "Accordion 1", "Accordion 2") is centered, and the expand icon (arrow) is also centered rig ...

cssreactjsmaterial-ui

You can interact with our dropdown menu using the tab key, even when it is

We are looking to make our dropdown tabbable when expanded and non-tabbable when collapsed. We attempted using tabindex="-1" on the content inside the expandable div, but this resulted in it being non-tabbable even when expanded. Any suggestions on how t ...

javascripthtmlcssfrontend

Adaptive Container with Images that are not stretched to full width

Is there a way to achieve the same effect as seen in images 2 and 3 here: Although these images already have their own "padding," I'm curious if it can be replicated using just jQuery and CSS? I would appreciate any help or insights on this. Thank y ...

javascriptjquerycssresponsive-design

Creating validation rules for a form that includes a From Date and a To Date

Looking to implement validation for the from date and to date fields within a template-driven form. Is there a way to ensure that the "from date" is always greater than the "to date," and vice versa? Additionally, I would like to find a way to reuse this ...

javascripthtmlangular

Creating uniform image heights using Flexbox

My webpage features a library of books, with each book displayed in rows within a flexbox container. Each book is represented as a separate block consisting of a heading (the book's name) and an image of the book cover directly below it. I'm curr ...

htmlcssflexbox

css - the art of centering span text within a rounded button

CodeSandbox: https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/main.js https://i.sstatic.net/HDtft.png I'm trying to center the dash text within a button, but I'm struggling to find a solution. html <button class="round-butto ...

cssvue.jsbootstrap-4

Highlight particular terms (key phrases) within text contained in a <td> tag

I am currently working on a project and facing a challenge that I am unfamiliar with. My task is to highlight specific keywords within text located inside a <td> element. I cannot manually highlight the keywords as the texts are dynamic, originating ...

javascriptjqueryhtmljsp

HTML Error: The result is unspecified

I have written a function that is supposed to return 105; 6.5 and 110; 4.5, but instead it returns undefined: undefinedundefined: undefined. Can someone please advise me on what changes I need to make to get the correct results? I have heard about asynchro ...

javascripthtmlmongodbmeteorundefined

Discovering the Javascript Code Executing on a <span> element with the Help of Chrome Inspector or Firebug

I have encountered a situation where a website is dynamically generating information into <span></span> tags using jQuery. The span has a class of "Price" and an id corresponding to a Product Code, with the data being pulled from a JSON data sh ...

javascripthtmlfirebuginspect

tips for generating a random number for direct display

Can anyone help me figure out how to automatically display the total of numbers from this script on my blog post without having to click anything? Additionally, I need it to update if the browser is refreshed. ` http://jsfiddle.net/BenedictLewis/xmPgR/ ...

javascripthtmlcssbloggerblogspot

How to link external css files in a Node.js project

Can I add an external CSS file in node.js using EJS? I attempted to do so, but encountered difficulties: app.use('/static', express.static('/view')) I included the CSS in EJS like this: <link rel="stylesheet" type="text/css" href ...

cssnode.jsexpresssassejs

What is the best way to invoke the datepicker function on all rows of table data that share the 'datepicker' class?

Hey there! I'm working with a table that features a JavaScript function for a datepicker, as well as the ability to add and delete rows. The challenge I'm facing is that each new row created has the same ID as the previous one. How can I ensure t ...

javascriptjqueryhtml

Using namespaces in Rails to encapsulate CSS styles

Is there a way to add namespaces to CSS within a Rails project? I have two pre-defined CSS files and two application layouts. I want the first layout to use one CSS file, and the second layout to use the other. However, both CSS files have styles for the ...

cssruby-on-rails

"Exploring the dynamic manipulation of CSS display property through the use of an active class

When attempting to implement a small pop-up window for user confirmation before navigating away from the page, I encountered an issue. Upon clicking the RUN button with the id "openBtn," the pop-up window briefly appears and then disappears. I'm unsur ...

javascripthtmlcss

Change custom text into html format

I'm looking for a code that can convert colored and aligned text to HTML. Where can I find something like this, or what keywords should I use when searching? ...

phphtml

Display a preview window once the image has been chosen

I have created an image preview div to show the selected image's thumbnail. Everything was working fine so far. But now, I want this div to be hidden when the page initially loads and only become visible when a user selects an image to upload. Here is ...

javascriptjqueryhtmlcss

Displaying a Facebook tab exclusively within the Facebook platform

Hello Everyone I have been utilizing woobox to generate Facebook tabs for my pages and I have a query: I have created an HTML page on my personal server, which I am using as a Facebook tab (created with the help of woobox). Now, is there a method whe ...

phphtmlcssfacebook