Kevin Powell - Community•3d ago

how to remove gap of text align end.

i'm trying to align text center and when i do with full width of that heading i see that text has some padding or margin to the end but all the elements that are related to h1 in hero section has margin and padding 0 but it has some gap and when i align text to start it doesn't have gap and when i align text to end or center it has a gap how can i solve it ? i'm working on this project after 5 to 6 days i think so i'm kind of lost already like where is what from html to css so i apologize for that.

34 Replies

peterpumkineaterrOP•3d ago

peterpumkineaterrOP•3d ago

Simon•3d ago

From looking at this it seems like the h1 element is wider than its parent and overflow is being hidden

peterpumkineaterrOP•3d ago

how can i see it ? there is no 'overflow: hidden' for any element

Simon•3d ago

I could be entirely wrong. What happens if it's aligned right? – is the second word cut off? 😶‍🌫️

peterpumkineaterrOP•3d ago

no. when it is aligned right it's the same you can see in the picture that you modified

ἔρως•3d ago

have you tried to justify the text? in your case, you could use an svg with the text element

MarkBoots•3d ago

Are you using letter-spacing? That will add the space behind the last letter as well. you could counter it by adding a margin-left of the same amount on the first letter

MarkBoots•3d ago

peterpumkineaterrOP•3d ago

that's not my problem my problem is i want that end of the letter to not have letter spacing so it can touch width if this make sense

Chris Bolson•3d ago

it would really help if you could share your code.

peterpumkineaterrOP•3d ago

as you can see i want that J and C to align

peterpumkineaterrOP•3d ago

i don't have words to describe it but lemme show sample

peterpumkineaterrOP•3d ago

sample

peterpumkineaterrOP•3d ago

wait i will add codepen https://codepen.io/kev00690/pen/zYgpNVV here

Chris Bolson•3d ago

That doesn't really reflect the images that you have added here as the "CEO & PRODUCT DESIGNER" text is in no way aligned with the "JON MOON" text so it is not clear what you want to align with what. As a side note, I realize that this may just be due to you creating a quick codepen but bear in mind that you should only have one <h1> tag on each page.

peterpumkineaterrOP•3d ago

it's a mobile first css yes should i change it ? i want that jon text to be responsive and it should get big as width get's bigger i mean screen size

Chris Bolson•3d ago

Unless I have missed something, until now you haven't mentioned anything about it being "responsive" or "getting bigger" (not sure if you are referring to the text size, the spacing or the width??) Firstly you said that it should be centered (and that wasn't working as can be seen in your screen captures), then you said that you wanted the J and C to align... I'm afraid that I am struggling to understand what it is that you wish to achieve and what issues you are having 😕 . You also have some strange CSS going on, eg:

.hero-one {
        padding-top: 6em;

        .logo-big {
            margin: 0;
            padding: 0;
            outline: 1px dashed red;
        
            h1 {
                margin: 0;
                padding: 0;
            }
        }
    }

.hero-one {
        padding-top: 6em;

        .logo-big {
            margin: 0;
            padding: 0;
            outline: 1px dashed red;
        
            h1 {
                margin: 0;
                padding: 0;
            }
        }
    }

It looks like you are attempting to nest an h1 within .logo-big but in the HTML, the h1 is the element with the class "logo-big".... so this nested element in the CSS does not exist.

peterpumkineaterrOP•3d ago

i'm not gonna lie i'm lost with words this time kinda confused how should i put it in words. i want it to increase by size so i don't have to put size manually on every media query. also it should align to margin i mean if i'm giving margin of 2em then text should start and end to that margin. the images i showed they're for mobile cause i'm working from mobile to desktop. actually design and developing was done but i didn't like the home page design so i changed it. ahh i'm using scss kinda got habit of that from the first day

Chris Bolson•3d ago

also it should align to margin i mean if i'm giving margin of 2em then text should start and end to that margin.

So, as I understand it you want the text "JON MON" to extent all the way from left to right of it's parent container (hero-one) and get larger (presumably you are referring to the font size) as the viewport increase in size. Is that correct? if so, as Epic has already suggested, your best bet is probably going to be an SVG. Something like this:

<svg class="logo-name" viewBox="0 0 62 13" fill="currentColor">
  <text x="-2" y="12">JON MON</text>
</svg>

<svg class="logo-name" viewBox="0 0 62 13" fill="currentColor">
  <text x="-2" y="12">JON MON</text>
</svg>

svg.logo-name{
  font-family: "Ailerons", sans-serif;
  width: 100%;
  fill: white;
}

svg.logo-name{
  font-family: "Ailerons", sans-serif;
  width: 100%;
  fill: white;
}

peterpumkineaterrOP•2d ago

ok that's something i can work with

  h1 {
        text-align: center;
        color: #fff;
        font-size: max(3.8rem, calc(100vw / 10.5));
        font-family: 'Ailerons Regular', sans-serif;
        font-weight: 400;
        margin: 0;
        padding: 0;
        letter-spacing: max(1.4rem, calc(100vw / 20));

        span {
            letter-spacing: 0;
        }
    }

  h1 {
        text-align: center;
        color: #fff;
        font-size: max(3.8rem, calc(100vw / 10.5));
        font-family: 'Ailerons Regular', sans-serif;
        font-weight: 400;
        margin: 0;
        padding: 0;
        letter-spacing: max(1.4rem, calc(100vw / 20));

        span {
            letter-spacing: 0;
        }
    }

what bout this ? check my codepen @Chris i put last N in span and removed it's letter spacing and the ceo and product designer should be align start at mobile and when width increases it should goto center. check the current situation and let me know if i should switch to svg let me share desktop design

peterpumkineaterrOP•2d ago

Chris Bolson•2d ago

You should really go with what works for your situation and needs. Very rarely is there only one solution to the same problem. And each solution may have its pros and its cons. Your solution seems to work well on most viewport sizes and may only need some tweaking (or not if that is how you want it) on smaller viewport widths where it breaks down onto 2 lines (this is happening at 428px on both Firefox and Chrome on my computer)

peterpumkineaterrOP•2d ago

yes i'm also facing that issue. i'm using that SVG solution and it looks good but i have to understand that viewbox and x and y what is that for and how can i properly use it. let me do a google search and if it didn't work i'll ping you @Chris check this out

peterpumkineaterrOP•2d ago

ἔρως•2d ago

you can use the text element to set a max width, and the text will shrink in width to fit it it wont change in height, but it's something however, you can tell the svg to keep a specific proportion with aspect-ratio or using the preserveAspectRatio property

peterpumkineaterrOP•2d ago

can you show me this in codepen, so i know what exactly what you mean.

Chris Bolson•2d ago

You would just add that to the SVG code that I showed you before. Here is my codepen version that I used to create the screen-capture that I showed you: https://codepen.io/cbolson/pen/VwoOVjr

Chris Bolson

CodePen

https://discord.com/channels/436251713830125568/1308364724962066443

...

ἔρως•2d ago

you can also put it inside the h1, and it is valid

peterpumkineaterrOP•2d ago

.progress-container {
    display: flex;
    flex-direction: row;
    margin: 0;
    margin-top: 1.2em;
    align-items: baseline;
    width: 100%; 
   
      .line {
          background-color: #d91111;
          height: 0.031rem;
          flex-grow: 0.8;
          margin: 0 1em 0 1em;
          width: 49%;
      }
  
      .year {
          font-size: 1rem;
          font-family: 'Satoshi-Regular';
          font-weight: 400;
          color: #9a9a9a;
          flex-grow: 0;
      }
}

.progress-container {
    display: flex;
    flex-direction: row;
    margin: 0;
    margin-top: 1.2em;
    align-items: baseline;
    width: 100%; 
   
      .line {
          background-color: #d91111;
          height: 0.031rem;
          flex-grow: 0.8;
          margin: 0 1em 0 1em;
          width: 49%;
      }
  
      .year {
          font-size: 1rem;
          font-family: 'Satoshi-Regular';
          font-weight: 400;
          color: #9a9a9a;
          flex-grow: 0;
      }
}

why can't .line accepting flex-grow: 0.8; ? i had to give width manually

Chris Bolson•2d ago

This question doesn't look like it is related to the topic of the original post. If you have a new question you should open a separate post.

peterpumkineaterrOP•2d ago

i thought opening a new post will be too much so i didn't open it and i thought bout svg and all but i want to do it perfectly so let me do other stuff of the website then i will see what to do with that logo in the end

ἔρως•2d ago

perfection is impossible

peterpumkineaterrOP•2d ago

haha yes it is 😭 alright i'm done with bottom design let's manage hero section. i'm too confused now what to do

Gaming

Programming

how to remove gap of text align end.