Jump to content

Fixing a text box that has one line of text but a box height of two lines

Recommended Posts

Hello,

I designed my first page with 7.1 and it looks right on Desktop. When I go to view it in Mobile (on my actual phone), I get overlapping text. My assumption is that this has to do with the fact that my header (in this case, H3) has one line of text in a box that looks like it could fit 2 lines. I can't resize the box to make it one line. I also don't want to drop the paragraph box down because then there's too much space on the desktop view (and on Mobile using landscape view).

First question: Am I right that the Header and Paragraph boxes overlapping (even though there appears to be just empty space in the header box where it overlaps the paragraph box) (See Photos - Note: The photos show two different parts of the page. I goofed when taking the pics.)

Second question: Assuming that's correct, do I need to change the Line Height to get the header text small enough to resize the header box to one line?

Third question: Is there a way of doing that so that I don't make the site ugly? I tried to stick with the Font Family's default settings because I do NOT have a good visual eye and don't want to make the proportions wonky (I'm a UX Researcher building a portfolio site).

Let me know if you need any additional information. Thanks in advance!

20230503_124526.jpg

Screenshot_20230504_155543_Chrome.jpg

Link to comment
  • Replies 1
  • Views 547
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Hello,

I designed my first page with 7.1 and it looks right on Desktop. When I go to view it in Mobile (on my actual phone), I get overlapping text. My assumption is that this has to do with the fact that my header (in this case, H3) has one line of text in a box that looks like it could fit 2 lines. I can't resize the box to make it one line. I also don't want to drop the paragraph box down because then there's too much space on the desktop view (and on Mobile using landscape view).

First question: Am I right that the Header and Paragraph boxes overlapping (even though there appears to be just empty space in the header box where it overlaps the paragraph box) (See Photos - Note: The photos show two different parts of the page. I goofed when taking the pics.)

Second question: Assuming that's correct, do I need to change the Line Height to get the header text small enough to resize the header box to one line?

Third question: Is there a way of doing that so that I don't make the site ugly? I tried to stick with the Font Family's default settings because I do NOT have a good visual eye and don't want to make the proportions wonky (I'm a UX Researcher building a portfolio site).

Let me know if you need any additional information. Thanks in advance!

20230503_124526.jpg

Screenshot_20230504_155543_Chrome.jpg

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.