I am currently working on a tribute page for a challenge from FCC and I am facing some issues with adding padding to my .life and .work divs in the HTML and CSS code above.
Despite spending a few hours searching for solutions online, I have not been able to resolve the problem of text overflowing outside the div. Can anyone provide me with some guidance?
My goal is to have those grey divs slightly rounded, centered, and ensure that the text stays within the boundaries of the div.
Are you searching for something similar to this?
body {
margin-top: 60px;
}
img {
border-radius: 10%;
max-width: 50%;
display: block;
margin: auto auto 30px auto;
}
.life {
background: darkgrey;
max-width: 80%;
margin: 20px auto;
border-radius: 25%;
padding: 25px 50px;
}
.work {
background: darkgrey;
max-width: 90%;
margin: 20px auto;
padding: 25px 50px;
}
.wiki {
margin-top: 50px;
}<div class="container">
<div class="jumbotron">
<h1 class="text-center">Zach Braff</h1>
<h2 class="text-center"><em>Actor Director Writer Producer</em></h2>
<img src="https://pbs.twimg.com/profile_images/588958455370625025/xm8yowKs.jpg" alt="Zach Braff">
<div class="life">
<h3 class="text-center">His life (summarised)</h3>
<p>Born in 1975, Zach Braff grew up in New Jersey and began acting at an early age. He got his first acting job on a TV pilot at age 14, with his first film role coming a few years later. After graduating from Northwestern University's film school,
Braff returned to acting, appearing in several small movies. His big break came in 2001 when he landed one of the lead roles on the TV comedy Scrubs. The show was a hit, and Braff became a household name. This success led to others, such as his
writing, directing and starring in Garden State, a critically acclaimed indie film, and landing a role in 2013's big-budget movie Oz the Great and Powerful.</p>
</div>
<div class="work">
<h3>His Work (some of)</h3>
<ul>
<li>Scrubs</li>
<li>Garden State</li>
<li>Oz the Great and Powerful</li>
<li>Wish I Was Here</li>
<li>Going In Style</li>
</ul>
</div>
<p class="text-center wiki"><em>Read more about Zach Braffs life and work <a href = "https://en.wikipedia.org/wiki/Zach_Braff">here</a></em></p>
</div>
</div>
<footer>
<p class="text-center">Personal project for FCC's assignment 'Build a Tribute Page</p>
</footer>Are you interested in a similar design?
Modifications:
.life {
background: darkgrey;
max-width: 80%;
margin: 20px auto;
padding:4em;
border-radius: 25%;
}
.work {
background: darkgrey;
max-width: 90%;
padding:4em;
margin: auto;
}
By simply adding padding to both classes, the desired outcome was achieved!
Recently, I implemented a collapsible feature using React and it's functioning well. However, one issue I encountered is that when the collapsible div closes, it doesn't smoothly collapse with the border bottom moving up as smoothly as it opens. ...
When working with PHP pages, I often need to fetch data from another source and populate an input or textarea field. However, I encounter issues when dealing with HTML tags and apostrophes. In my experience, passing around HTML content using JavaScript ca ...
I attempted to use the :nth-of-type selector, but I am uncertain if it is feasible or if it accomplishes what I desire. My goal is to create an alternating style: two paragraphs aligned on the left, followed by two on the right, and so forth, regardless of ...
My current issue involves using jQuery to execute a .php file. Whenever an error occurs in the backend, I want to display an alert message with the error details. However, when intentionally submitting with an error, no alert pops up and it just proceeds t ...
I am working on a web application and have successfully integrated Facebook login from developers.facebook.com. However, I am facing an issue where after the user logs in with their Facebook credentials, they are not redirected to my application. Additiona ...
I am in the process of creating a database for video spots, where users can view and modify a list of spots. I am currently working on implementing a cart system that automatically stores checked spot IDs as cookies, allowing users to browse multiple pages ...
Within a ul element, each li contains multiple elements in the following structure: <ul> <li> <div> <p>some text </p> <button>delete</button> <div> </li> <li> ...
Hello, I am currently attempting to customize the appearance of the p-calendar, but I am struggling with changing the color of the displayed dates. Can anyone provide assistance? Thank you in advance. Below is my template: <div class="p-field p-co ...
.chart div { font: 10px sans-serif; background-color: steelblue; text-align: right; padding: 3px; margin: 1px; color: white; } </style> <div class="chart"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5 ...
My goal is to create a form where the label of the input field moves up when the user starts typing, and stays up if they enter any text. However, if the user leaves the input area blank, the label should revert back to its original position. I have tried ...
I am trying to attach an on click event to an li element using jQuery. I have written a simple jQuery code within the document ready function, but for some reason it is not functioning as expected. I have checked in both Chrome and Firefox, and there are n ...
Seeking guidance as I embark on a new project! Check out this link to see my skills in action: collegewebsite.zip Now for the query at hand. I am working on a project named Coffee Cafe for my tuition assignment. It involves utilizing CSS and HTML with J ...
This question is unique from the one found at How to trigger jQuery change event in code. The focus here is on the interaction of jQuery with native event listeners, rather than jQuery event listeners. I am using addEventListener to bind a change event fo ...
Issue: Encountering a problem with web pages containing sms: and mailto: links not functioning on iOS mobile Safari browser. Clicking on the link redirects to: Safari cannot open the page because it cannot redirect to locations starting with "sms:& ...
Currently, I have two SVG images displayed side by side on a webpage. One SVG needs to maintain a fixed size while the other should scale as needed, and I have achieved this functionality. However, I am facing an issue where I want the two SVGs to align v ...
There has been a question on how to easily add tables to blog posts without having to use HTML. While some are comfortable inserting the code directly into the blog, others like my friend prefer alternatives that don't involve coding. Is there a simpl ...
I am experiencing an issue where the video in the main div of my home page does not fully fill the div right away - I have to refresh the page for this to happen. As a result, there is black space on the left and right sides. Interestingly enough, this pr ...
Recently I started learning Typescript and HTML as I work on building an Angular2 application. At the moment, I have a TypeScript file that resembles the following structure: import {Http, Headers} from 'angular2/http'; import {Component} from & ...
I have a collection of buttons in my Library, each with different text that I want to copy when clicked function copyTextToClipboard(id) { var textElement = document.getElementById(id); textElement.select(); navigator.clipboard.writeText(textElement. ...
Is there a way to create an HTML text box that can only fit 3 characters exactly? I came across this code online: <input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/> This code creates a text box with a width of 10px ...