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.
82 Replies
From looking at this it seems like the h1 element is wider than its parent and overflow is being hidden
how can i see it ?
there is no 'overflow: hidden'
for any element
I could be entirely wrong. What happens if it's aligned right? โ is the second word cut off? ๐ถโ๐ซ๏ธ
no. when it is aligned right it's the same you can see in the picture that you modified
have you tried to justify the text?
in your case, you could use an svg with the text element
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
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
it would really help if you could share your code.
as you can see i want that J and C to align
i don't have words to describe it
but lemme show sample
sample
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.
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
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:
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.
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
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:
ok that's something i can work with
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
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)
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
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 propertycan you show me this in codepen, so i know what exactly what you mean.
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
you can also put it inside the h1, and it is valid
why can't
.line accepting flex-grow: 0.8; ?
i had to give width manuallyThis 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.
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
perfection is impossible
haha yes it is ๐ญ
alright i'm done with bottom design let's manage hero section.
i'm too confused now what to do
the Jon and CEO title are not the way it is suppose to be and i didn't understand how can i implement svg properly or is there any way that we can accomplish same result in text ?
let me share the design
mobile
desktop
can you define the way it is supposed to be?
I assume the title should stretch across the same width as the name does in both cases, single-line and multi-line.
I feel like exporting both the name+title into a single scalable vector graphic instead of having to micro-manage two seperate text-entities would get you closer to what you are trying (opinions?).
To prevent the title becoming unreadable (small) maybe even have two file versions, one with the name+line-break-title and one without to switch between the two according to the parents container-size.
Solving this with text elements will probably lead you to unpleasant results considering the many factors that play into rendering.
... maybe it's possible, there are always some crazy CSSers out there
In any case "pixel perfect" is not to be expected.
well the JON MON is working good as svg chris suggested but i want to give it letter spacing but looks like it's close to impossible
doing the same treatment for the bottom text will just make it vanish
there arent enough pixels to represent a line so thin
and if, somehow, it doesnt vanish, you will wish it would since it will be missing pixels
looks so good! ๐คฎ
there's a issue with svg it doesn't stop growing at all like it will grow exponentially
Are you telling it that there should be a
max-width?ah shit
lemme try
how do i forget this kinds of things
You can use
letter-spacing on the SVG text.@peterpumkineaterr have you designed your mobile to desktop layouts โ because that can help you figure out your designs limitations
how whenever i do it text goes invisible half of it
yes i did
plus if i did max-width: 70% then it won't center
You will need to adjust the sag viewBox to allow for the extra space required (assuming you are increasing the letter spacing)
let me try
nope not working
i had to give like 100rem of width
why it has this box two times and space at the end ? bro why is this hard ?
it's definatly gonna make me cry
I am not sure what you are doing there.
You just need to add the letter-spacing in your CSS as normal, then adjust the viewBox width to ensure that it all fits in
In the SVG I have only adjusted the viewBox width so that it fits exactly the width of the text (for this specific text).
In the text element, the small negative x value is to compensate for the space taken up by the letter "J" which doesn't quite start at the beggining.
forget it i deleted it all the css code for h1 and h2
i've been trying from hours but this shit isn't working at all
is h1 works then h2 doesn't
such a headache
What is the HTML and CSS for those 2 elements? (h1 and h2)
I assume that the h1 is the SVG with "Jon Mon" and the h2 is the subtext "CEO & Product Designer".
Assuming that you now have the h1 working correctly with the SVG, how do you want the h2 to be displayed (small and large screens)?
i did this
let me share the codepen and full website
@Chris Bolson i made the codepen how can i use svg as img in codepen ? svg data is so big
https://codepen.io/kev00690/pen/BaXgqrd
.mobile
.desktop
needs svg
If you have an extermal SVG you can include it just as you would include a jpg or png, ie within an image tag. However you will not be able to manipulate an external SVG with CSS in the same way that you can with an inline SVG.
If you are referring to the the SVG for the "Jon Mon", the version that I created for you is not big, quite the opposite it is a minimal amount of code that achieves what you were asking for. Far better than including an external asset.
Your codepend bears little resemnblance to what you have been discussing so it is impossible to know what you want to do.
syntax
oh my freaking god
you're a savior
HAHA
man how did that happened
https://codepen.io/kev00690/pen/BaXgqrd
alright @Chris Bolson check this out
oh i shouldn't have pinged you
i won't do it again.
OK, I see it now.
that's why i was wondering why the hell .mobile wasn't hiding
But I don't understand why you have opted to create the SVG for the logo like that rather than using the much simpler method that I showed you ๐ ๐ค
I have included both texts into a single SVG
it has spacing included and letter spacing was taking too much time
and i have to finish this website end of the day tomorrow
cause i have exams from 30 so i will also have to study
damn
well i'm not the big fan of my current portfolio design
i have one design in mind
But I gave the code to you on a plate! you didn't need to do anything to it other than adjusting a couple of values to suit your design if required.
What you have done is far more complicated and more dificult to fine-tune.
i will be working on that after my exam
i did this
this is the first time i was doin it and viewBox i didn't understand it properly it will take some practice to me
but yes i liked your way and definitely i will use it
for my next design
as i have someting awesome in my mind for next design and i will be using most thing as svg
now there's only one thing remain
The problem with this solution is that you are still including both images (svgs) so it will take longer to download that is really necessary. Probably not an issue as the SVGs are quite simple but bear in mind that there are better ways to define different images for different screen sizes which allow the browser to only download the image according to the viewport size.
When you have a chance take a look at this MDN article regarding how to use srcset in images.
You basically define multiple images within the same img tag and define the viewport sizes for each of them. The browser then decides which one to download accordingly:
(code copied from that article)
MDN Web Docs
Responsive images - Learn web development | MDN
That's a wrap for responsive images โ we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:
damnn that's easy as heaven how the hek i did not knew bout this ?
๐ you can't know about everything - there is too much out there!
sizes="(max-width: 600px) 480px,
800px"
can you explain me this 600px max width ?
that is saying that, for viewports up to 600px uses the first image, assigning it a slot of 480px, otherwise it will use the second image. You can define as many images (and their corresponding sizes) as you require.
From the mdn article:
1. A media condition ((max-width:600px)) โ you'll learn more about these in the CSS topic, but for now let's just say that a media condition describes a possible state that the screen can be in. In this case, we are saying "when the viewport width is 600 pixels or less". 2. A space 3. The width of the slot the image will fill when the media condition is true (480px)As I say, I suggest that you read the article when you have time as mdn does a far better job than me of explaining things
okay i will read this article
it's a lot easier
can we also use this for text ?
cause that max and calc(100vw / 20) is quite confusing and this 20 doesn't work above 30 ???? like what the hek
For text (and other things) you can use clamp()
yeah understanding clamp is also quite confusing
i tried that too
chris do you remember that hover effect
and that div was showing the image on hover
what if we open a that div into that page (just like we open "preview.app" by pressing space button in macos, just like that) so the url of those won't open in new tab instead it will open like preview on that same tab ?
is it possible ?
like this
๐ค
ok ok i will make a new post