How can I make my <p> not extend out so far?

Hey there, I've added a <p> with some pretty long text inside of it how can I correctly make the width of it smaller?
No description
26 Replies
RMON
RMON5mo ago
As you see in the img the text stretchs out could I just add a width on it to fix it? or is there a better way
Coder_Carl
Coder_Carl5mo ago
There are a number of ways that people will tackle this. one of my preferred ways is just to set a max-width: 60ch; on all of your text elements i.e.
h1,
h2,
h3,
h4,
p,
caption,
dd,
blockquote{
max-width: 60ch;
}
h1,
h2,
h3,
h4,
p,
caption,
dd,
blockquote{
max-width: 60ch;
}
this ensures that users dont have mental overload trying to piece lines together when they are super long
RMON
RMON5mo ago
Thank you! Just a question, What does the "ch" stand for?
Coder_Carl
Coder_Carl5mo ago
All G. its a heavy handed approach but this way I never need to think about it. I tend to just use a css reset on all of my projects to ensure I am working with a clean slate with base accessibility considerations. its definitely not needed everywhere but 🤷 so far I've found them used in any project Ive worked on professionally this is my personal one
*,
*::after,
*::before {
margin: 0;
padding: 0;
}

/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}

/* Limit line sizes */
h1,
h2,
h3,
h4,
p,
caption,
dd,
blockquote{
max-width: 60ch;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
font-weight: 400;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}

/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}

/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
max-width: 100%;
height: auto;
vertical-align: middle;
font-style: italic;
background-repeat: no-repeat;
background-size: cover;
shape-margin: 0.75rem;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}

*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
}

/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}

/* Limit line sizes */
h1,
h2,
h3,
h4,
p,
caption,
dd,
blockquote{
max-width: 60ch;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
font-weight: 400;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}

/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}

/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
max-width: 100%;
height: auto;
vertical-align: middle;
font-style: italic;
background-repeat: no-repeat;
background-size: cover;
shape-margin: 0.75rem;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}

*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
Coder_Carl
Coder_Carl5mo ago
MDN Web Docs
CSS values and units - Learn web development | MDN
This has been a quick run-through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units reference page — you will encounter many of these in use as you work through these lessons.
RMON
RMON5mo ago
I assumed it stood for character I've been usin ChatGPT to just answer some smaller questions here and there and well it's AI so it's not perfect it told me I was wrong Im still new to HTML/CSS and I've been trying to get the hang of it but I screw up pretty often then I'll ask the question and get help and realize it was easy but I just did it wrong
Coder_Carl
Coder_Carl5mo ago
yer chatGPT has some good answers and some really stupid ones like it suggested to me to use a css var inside of a keyframe animation when I told it to never suggest that again, it proceeded to do it again
RMON
RMON5mo ago
😂
Coder_Carl
Coder_Carl5mo ago
naw, there is just a berth of knowledge that you absorb over time through mistakes. you never do css wrong, just different. you will also find a sweet spot in relation to your code length and verbosity to ensure its maintainable and readable keep it up
RMON
RMON5mo ago
appreciate it! Hey If you can help me with another thing
RMON
RMON5mo ago
No description
RMON
RMON5mo ago
This section of the page, I wanted to move the text a little more to the right and then have a section next to it that says "skills" with the "HTML" and CSS" under it Here's a crappy illustration
RMON
RMON5mo ago
No description
Coder_Carl
Coder_Carl5mo ago
different questions should be posted in a new post. but this one time 👍
RMON
RMON5mo ago
oh you're right my bad lol
Coder_Carl
Coder_Carl5mo ago
all G. have you learnt about grid and flexbox yet?
RMON
RMON5mo ago
Not fully I have a small idea of it but I definetly could work on it more Honestly, The reason Im evening creating a Portfolio is because in around two months I have the oppertunity to visit the Snapchat HQ for a fieldtrip my highschool coding class is allowing us to go to So If I can present myself and tell them what I would like to do and possibly get an internship it'll be amazing Plus the college near me has the traditional route of making you a software engineer so if I cant have some sort of job/internship by college I would change to become a software engineer it'll make life easier as they support it more and offer interships and I would enjoy it anyway
Coder_Carl
Coder_Carl5mo ago
this is a super basic example https://codepen.io/CA-Carl/pen/VwRKoyR flex requires you to deal with each child, while grid sets up the spaces and decides what goes where they can both do what you need easily enough.
RMON
RMON5mo ago
Cant wait till I reach the level of yours and a few others
Coder_Carl
Coder_Carl5mo ago
have added a suggestion in the code pen for your <main> content and how to keep it within a reasonable size
RMON
RMON5mo ago
also, in case you'd like to see the current codepen I have for the portfolio
Coder_Carl
Coder_Carl5mo ago
I have suggestions, can move into a chat if you wanted to hear
RMON
RMON5mo ago
If you have any suggestions you can give me sure
Coder_Carl
Coder_Carl5mo ago
voice-chat or pm?
RMON
RMON5mo ago
Would Pm be fine?