Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • June 4, 2020 at 2:45 am #1219272
    CharlieTh

    Is there auto-magical css that will make a subtext go to multiple lines instead of getting chopped off when the screen gets narrower?

    Example page: unJunking.com

    The loooong tagline of “The process of….” shows on desktop and many landscape screens, but gets chopped on portrait.

    Any ideas, please?

    June 5, 2020 at 8:57 pm #1219937
    Victoria

    Hey CharlieTh,

    https://share.getcloudapp.com/6qu270ml The settings in the child theme set the nowrap rule and so the text stays in one line on all screen sizes. You need to adjust it for other screen sizes with media queries.

    Best regards,
    Victoria

    June 6, 2020 at 12:06 am #1219968
    CharlieTh

    Thank you.
    I have removed the nowrap from the css statement, AS YOU NOTED.

    The subtext now has immense vertical spacing when it “breaks” into multiple lines.

    You will see this in responsive testing for Ipad versus Desktop.
    Ipad subtext will be in orange, Desktop in green.

    How can I remove the huge vertical spacing?

    What might I try?

    June 6, 2020 at 12:07 am #1219969
    CharlieTh

    Sorry…no emphasis intended…got stuck in caps lock!

    June 7, 2020 at 7:23 pm #1220242
    Victoria

    Hi CharlieTh,

    No worries :)

    The thing is the subtext field is not built to have so much text in it. NO matter how hard you try it’s difficult to make it look good on all screen sizes.

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top .logo-subtitle {
    top: 90px !important;
    height: 30px !important;
    line-height: 20px !important;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 8, 2020 at 9:10 pm #1220647
    CharlieTh

    Victoria, thanks. I don’t really see much improvement.
    Would I be better off adding a widget to header insteead of echoing a tagline? Would that make any difference?
    Would going into the header.php and putting in the tagline be better?

    Please give me your counsel on this.

    I would like to know how to do this properly for the current website — and for future websites.
    Imagine others will have longer than average tagline.

    Thanks for your response!

    The entire tagline disappears when I try to alter its width.
    (I have removed whtie-space: nowrap.)

    June 12, 2020 at 5:52 pm #1222135
    Victoria

    Hi CharlieTh,

    There is no better option but to hide the text on the screens where there is no space for the text. You can try adding the widget but even with the widget, there will be no space for the text on the small screen.

    You need to rethink the design of the header.

    Best regards,
    Victoria

    June 13, 2020 at 4:19 pm #1222378
    CharlieTh

    Okay, but my quandry is…yes, I can rethink design…but how does a text block automatically make text less wide and longer when the screen gets narrower.
    I there some css from that that I might use?

    Just trying to understand the why…

    Thanks for your time and counsel on this!

    June 15, 2020 at 4:08 pm #1222706
    Victoria

    Hi CharlieTh,

    Yes, of course, you can use media queries to limit the container width and make the font-size smaller but we tried these with your setup and it did not give the desired result.

    Best regards,
    Victoria

    • This reply was modified 4 years, 5 months ago by Victoria.
    June 15, 2020 at 9:53 pm #1222825
    CharlieTh

    Thanks again fr your patience. Closing this now.

    June 15, 2020 at 10:29 pm #1222831
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Subtext under logo — how make adjust horizontally when page changes’ is closed to new replies.