How to make text font size reduce responsively

Discussion in 'General Muse' started by Joe Segal, May 10, 2016.

  1. Joe Segal

    Joe Segal Member

    22
    0
    I've watched the tutorials but am obviously missing something.
    Take this Header Text I have seen here "Better World Advocates".


    [​IMG]
    I have it set to Non Responsive and Fluid Pinned Center.
    When I move the scrubber making the screen smaller the text does not flow into a second line of text and that's good because I do not wish it to.

    But you can see the text is cut off.

    What I want is to have the text stay positioned centered and where it is on the header but the font size reduce so its always all visible no matter what screen/browser size. Understand?

    Is there a way to have the font size reduce as the screen size is reduced other than creating tons of new break points and replacing the text with a new instance of it with a smaller font?

    The issue again is the font size as the site is seen between the breakpoints.

    Thanks
     
  2. Jeremei

    Jeremei Well-Known Member

    729
    95
    Joe!
    At the moment you can achieve this kind of function (Header Text) if you are using a photo instead of text.
    I made in Photoshop a photo (1200x100) with your header text and saved the photo as .jpg.
    I imported the photo to Muse and it makes the feature what you are looking for. It makes it because in the current Muse photos are responsive with width and height, text not.
    Look at the pictures.

    1200px width
    Home.png

    960px width
    Home 2.png

    768px width
    Home 3.png

    480px width
    Home 4.png

    320px width
    Home 5.png
     
  3. Joe Segal

    Joe Segal Member

    22
    0
    Jeremie!
    Thanks. :)
    I find it odd that MUSE doesnt have responsive text in the way I described it.
    I can set the font style per breakpoint but again that doesnt do anything "between" breakpoints and I dont want to create a ton of break points.

    Thanks for making the images. To me the smaller sizes look pixelated.
    I think the work-around I have to do is make a new logo image for each break point.
     
  4. Joe Segal

    Joe Segal Member

    22
    0
    MUSE is a very frustrating program for me to use. I'm near the point of giving up on it.
    Things dont stay where I put them they shift around on the page even when I pin them.
     
  5. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    2,862
    215
    Joe, I understand your frustration, Muse isn't a simple drag and drop application. It takes patience and it does have a learning curve. There are a ton of good tutorials out there, and on our site, I suggest you play with a few of them and see how things are constructed.
    As for your question, Muse doesn't have fluid Text yet. From what I see in your screen shot, it appears you have your text box sizing set to 'none'.
    What you can do to minimize your breakpoints, (remember, you only add a break point when your design breaks, not where you think someones device size is) you can try making your text box full screen (or almost) instead of none or responsive width. Then adjust your text positioning to maybe 'center aligned'. You text box being larger will shrink as the browser size shrinks but your text will stay centered.
    This does not change the font size, that's a Muse constraint. Using this method may not be the optimum but it works.
    Always, unless absolutely necessary, stay away from making your text an image. Text is designed to act similarly to an SVG in clarity and scale-ability, not to mention SEO.
    You logo can be made to scale as you describe with the various ways to place an image.
    DJ
     
  6. bjadams

    bjadams Member

    9
    1
    is it possible to use different font sizes in different breakpoints for the same text box?
    i can resize the text box ok between different breakpoint, but if i change font size then MUSE applies the font size to all breakpoints
     
  7. bjadams

    bjadams Member

    9
    1
    During my research I came across the CONTENT system. I can link the same text to different text boxes and stylise each one at each breakpoint, with different fonts & colors. However it's impossible to stylise individual words with colors, bold, etc.... So it's a bit impractical

    any more ideas?
     
  8. Jeremei

    Jeremei Well-Known Member

    729
    95
    You can hide (right click mouse) text boxes in each breakpoint and after that add new text boxes with different styling. As you mentioned so this kind of method is not practical because you must edit each breakpoint separately when you want to edit text contnet. o_O
     
  9. bjadams

    bjadams Member

    9
    1
    @Jeremei Yes that would be a "last resort" option

    I finally found what I was looking for though... the last button on the left pane lets you switch between responsive text and formatting across breakpoints.

    CTRL + SHIFT + T

    Seems like it's working as I wanted :)
     
    Last edited: Dec 2, 2016
    James007 likes this.
  10. James007

    James007 Active Member

    25
    1
    Just posting to say THANK YOU! This was driving me nuts for around a week! Whenever I would change the size of fonts in one responsive breakpoint, it would then go ahead and change it it ALL the other breakpoints. Thanks to you I was able to see that when I had my text selected, down the bottom of the toolbar (or leftpane as you called it) there was an option to change from editing all of the breakpoints at once - to only this specific breakpoint I'm working on now:
    [​IMG]

    You are a LEGEND!
     

Share This Page