Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Text Smooshing Together on Minimization

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #172115
    toddsqui
    Participant

    So I am presently coding my resume (here) and realize that when I minimize the browser window, the text overlaps against other text.

    I’m trying to make my site fluid and dynamic, adjustable to any browser window, and recall a TreeHouse lesson somewhere that talked about this.

    I have two questions: (1) How do I do this?; and (2) Is the way that I have positioned the text (i.e. top margin this way, bottom margin that way) going to make this fluidity impossible to achieve?

    It has been awhile since I have coded in HTML/CSS, and back in the days of Netscape, many coders preferred HTML tables over CSS-positioning strategies because the ladder wasn’t universally supported. Aside from showing my age, I guess I’m worried about this same exact problem… even if it is the 21st century now.

    Anyway, any assistance will be much appreciated, and I will totally pay it forward once I know what I’m doing!

    Thanks so much,

    Todd

    #172116
    Paulie_D
    Member

    It looks like you are floating some of the paragraphs in the work experience section.

    I wouldn’t be wrong to use a table for some the layout of that that section.

    #172130
    toddsqui
    Participant

    Hi Paulie,

    Yeah, I kind of figured I would have to do something like that. Thanks for the feedback.
    It just seems like tables are more secure, even if they do take a little while longer to load on the page.

    Right now, I’m floating ALL of the paragraphs and positioning them with various margin-top-left configurations. I can’t imagine all browsers tolerating this.

    Anyway, thanks again!

    -T

    #172131
    Atelierbram
    Participant

    @toddsqui There’s always more ways to do things, the demo under wraps the dates and header text on two lines when the viewport gets smaller.

    http://codepen.io/atelierbram/pen/bCgjs

    BTW: I will depersonify the text included in a moment, no worries.

    #172132
    toddsqui
    Participant

    @Aterlierbram Whoa, this is great!

    What exactly was the trigger to make the header and dates wrap? Was it the inline command or the margin-auto command?

    Thanks for the feedback and assistance!

    -T

    #172139
    Atelierbram
    Participant

    Indeed, setting the dates in the <p> tag to inline, and the header-text (here in <h4> tag) to display: inline-block make them sit next to each other. Note though that they wrap when the header text wraps (gets to long to fit on this one line) ; hence depending on amount of glyphs/words, the different headers wrap on different moments in the viewport-width change. This may not be what you want …

    #172142
    toddsqui
    Participant

    Atelierbram, thank you so much. This is exactly what I was looking to do.

    I’m thinking that maybe my mistake was in inlining different areas of the code. That you pointed out the h4 tag really clarified things for me!

    I will definitely keep this valuable lesson in my head as I move forward with coding my website.

    Many many thanks!

    sincerely,

    Todd

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.