In the “About Me” section of this portfolio website, the text stays inside the white section. I am doing something similar but my text is going onto the next section. Probably a dumb question but does anyone know how to fix this in CSS?
Its hard to tell without an example of the code in question. You could try wrapping the element in another div, setting a text-container class on it and then applying css to adjust the width and height of the new div using the class like this:
.text-container {
width: 100%;
height: auto;
}
I hope this helps some. If not, please share an example of the code so I can be more helpful
<section class="About">
<div class="wave">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
<h3>
<span>ABOUT ME</span>
</h3>
<p>alkmm</p>
<div class="personal-details">
<div class="col-md-6">
<ul class="personal-info-one">
<li>
<h4>Name</h4>
<p>First Last</p>
</li>
<li>
<h4>Email</h4>
<p>email@gmail.com</p>
</li>
</ul>
<div class="personal-details">
<div class="col-md-6">
<ul class="personal-info-two">
<li>
<h4>Education</h4>
<p>BA in [Major]
<br>University of [school]
</p>
</li>
<li>
<h4>Employment</h4>
<p>Open</p>
</li>
</ul>
</div>
</div>
</section>
The CSS for this section(put background colors just to see what I was working with):
.About{
background-color: #FFE4E1;
margin: 0;
padding: 8rem 2rem;
text-align: center;
}
.personal-info-one li{
background-color:#FFD700;
width: 50%;
float: left;
}
.personal-info-two li{
background-color: aqua;
width: 50%;
float: right;
}
It’s currently in the correct format similar to the website that I previously linked. But instead of staying the the about section like that website, my text is overflowing into the section beneath it.
is it live on “repl or codepen” as well?
You do not need to use float for this, use flexbox or grid to do layout. Use float for its intended purpose, not the hacky layout stuff from yesteryear.
Anyway, you have to clear the container with the float elements inside it. Add display: flow-root to the .About selector.
Also, you didn’t close the first .personal-details and .col-md-6 divs correctly.
Thank you! It’s looking better now but the text is not lined up evenly now. Do you know how I can fix this? And I fixed the html, they are closed correctly now.
.About{
background-color: #FFE4E1;
margin: 0;
padding: 8rem 25rem;
text-align: center;
display: flow-root;
}
.personal-info-one li{
display: inline-block;
margin: 0px 50px;
text-align: center;
justify-content: center;
}
.personal-info-two li{
display: inline-block;
margin: 0px 50px;
text-align: center;
justify-content: center;
}
I will try to share what I am working so it is easier to follow what I am saying.
How can I send you the live screen I am looking at on vscode so you can see what my portfolio website currently looks like?
Use Codepen to share your code instead. It is much easier for everyone.
If you are using Bootstrap you should use the classes it provides. Seeing as you have two col-md-6 Bootstrap classes I assume you are making a two-column layout.
Bootstrap grids consist of a container, a row, and columns.
<div class="container">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
Add a container element and a row element around the personal-details elements and then move the col-md-6 classes to the divs with the personal-details classes.
You can remove the default padding, margin, and list-style using the list-unstyled class and center the text using the text-center class.
Then you can pretty much remove all the CSS.
Example
<section class="About text-center">
<div class="wave">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
<h3>
<span>ABOUT ME</span>
</h3>
<p>alkmm</p>
<div class="container">
<div class="row">
<div class="personal-details col-md-6">
<ul class="personal-info-one list-unstyled">
<li>
<h4>Name</h4>
<p>First Last</p>
</li>
<li>
<h4>Email</h4>
<p>email@gmail.com</p>
</li>
</ul>
</div>
<div class="personal-details col-md-6">
<ul class="personal-info-two list-unstyled">
<li>
<h4>Education</h4>
<p>BA in [Major]
<br>University of [school]
</p>
</li>
<li>
<h4>Employment</h4>
<p>Open</p>
</li>
</ul>
</div>
</div>
</div>
</section>
.About {
background-color: #ffe4e1;
}
That may not be the exact layout you are going for but when using Bootstrap you are kind of locked into the layout they provide.
You can obviously ditch the Bootstrap layout and do your own either using the Bootstrap flexbox classes or completely custom code.
Two column layout example using grid
<section class="About">
<div class="wave">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
<h3>
<span>ABOUT ME</span>
</h3>
<p>alkmm</p>
<div class="grid">
<div>
<ul>
<li>
<h4>Name</h4>
<p>First Last</p>
</li>
<li>
<h4>Email</h4>
<p>email@gmail.com</p>
</li>
</ul>
</div>
<div>
<ul>
<li>
<h4>Education</h4>
<p>BA in [Major]
<br>University of [school]
</p>
</li>
<li>
<h4>Employment</h4>
<p>Open</p>
</li>
</ul>
</div>
</div>
</section>
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.About {
background-color: #ffe4e1;
text-align: center;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
justify-content: center;
width: min(1100px, 85vw);
margin-inline: auto;
}
1 Like
I don’t think it actually is lower but I agree it looks like it. If you add an outline or use a ruler tool you can see they line up. I think it is just an optical illusion, the font might also be partly to blame.
How do you use a ruler tool in html css?
you can download power toys which is free and has a screen ruler.
Is power toys only for microsoft? I just looked it up and it seems like its only for microsoft users but I could be wrong. Is there a ruler tool I could download for my mac?
There are also browser extensions, just search for ruler.
Another option is the built-in one in Chrome.
Cmd + Option + J > Cmd + Option + P type “ruler” and select “Show rulers on hover”
Now when you inspect the element it will show a ruler. You can turn if off again the same way you turned it on.
Cmd + Option + P type “ruler” and select “Show rulers on hover”. I tried doing this and when I type ruler nothing shows up.
I’m trying to look up ways to get a ruler on my live screen but there only seems to be videos on how to get a ruler in the html
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.