The Responsive Text CSS in Adobe Muse Affair
(I don't know why I have phrased like the title of a Tintin book).
Hey There,
I hope you are well?
I am trying to figure out if I can use responsive text size within Adobe Muse.
I am not sure what the class would be - in Muse there are Graphic Styles which are the CSS class. But there is also Paragraph Styles (like InDesign) which I am not sure would correspond to any CSS class.
As a twist, I DL'd a Mucow file (Muse's developer files which can be dragged and dropped) which can do the responsive text - but with lots of drawbacks in terms of formatting. It is a fallback but limits the animation effect I use
Having watched Kevin's 'min(), max(), and clamp() are CSS magic!' https://www.youtube.com/watch?v=U9VF-4euyRo&t=837s video I have tried to use that with a startling lack of success.
CSS:
.headingFadeLeft_01 {
font-size: clamp(2rem, 5vw, 5rem) !important;
}
I am not sure if the class is correct - that is the paragraph style. I have 2 instances of the headline so I can implement a staggered animation effect (with a plugin).
Currently working on this page of the site: https://roryjmurphy.com/its-not-custard.html
The text does not scale at all... Any suggestions?
Thanks in advance!
R
Kevin Powell
YouTube
min(), max(), and clamp() are CSS magic!
CSS has come a long way, but min(), max(), and clamp() make a lot of things a lot easier than they used to be, and really open up the world of responsive typography like we never had before! Clamp() is the ingredient that we've needed for a long time to really be able to make type fully responsive in our CSS, and to be able to do it on one line ...
IT"S NOT CUSTARD | roryjmurphy.com
Digitally painted key-art work for short film It' Not Custard. Along with a digitally illustrated poster with a typographic treatment poster for the production.
16 Replies
Use https://utopia.fyi/type/calculator
You’re missing the growth rate in the preferred value clamp(2rem, 2vw+1rem, 5rem) and make sure to apply that on your font-size (since that what your post is about. Can also be used on widths and margins etc. the great thing about clamp is that margin and padding can then be set with EMs and it will stay relative as the font grows and shrinks. You will need a different clamp for your headings which is why I like utopia,it gives you a whole list of steps that you can use as custom properties and apply the correct one for your body size, another for h1 etc.
May I ask why you are using Adobe Muse these days? There are so many website builds options even if you don’t code. That source code you showed me when trying to select the button was wild spaghetti. Btw did display block do the trick ?
Hey @clevermissfox again! So... I have just managed to get it working... to a point. I'm not sure what I did wrong but I just placed the, what clearly is the CSS class, of the paragraph style..
.headingFadeLeft_01 {
font-size: clamp(2rem, 5vw, 7rem) !important;
}
So it works... but I'm going to have to figure out the right values - with the help of your link you kindly provided!
I'm not sure if I'll scale the body copy - I really just wanted the header of my project pages to scale - as I have an insane amount of breakpoints to accommodate the headers. So I really hope this will let me get rid of a lot of them and make the pages *a lot *more manageable..
Thanks again... again!
... And try to figure out how to stop it scaling on the first breakpoint.. Will fire up Kevin's video again and watch it 8 million times.
Clamp is minimum size, preferred size/growth rate:and max size. So if at small screens you want it to be 1.5rem but no smaller and at larger screens you want it to be 3rem but no bigger you can apply it just to your heading
h1{
clamp(1.5rem, 1rem + 2.222vw, 3rem)
}
This article breaks down a bit about how the function works
https://chrisburnell.com/clamp-calculator/
Chris Burnell
clamp() Calculator
Handy little tool for calculating viewport-based clamped values for use in CSS.
You always want to make sure that middle value has at least “1rem” added to any viewport Caltrain to bake sure yea accessible as font sizes in viewport units don’t zoom
I THINK this is the video I’m wanting to refer you to about font size and viewport units
https://youtu.be/veEqYQlfNx8?si=7h5xYuo6jsG4UweC
Kevin Powell
YouTube
The problems with viewport units
Conquering Responsive Layouts (free course): https://courses.kevinpowell.co/conquering-responsive-layouts
Join the Discord: https://kevinpowell.co/discord
Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizon...
Hey @clevermissfox Cool thanks, I found a clculator which has worked pretty well. THe issue I am now trying to figure out (by copy and pasting different snippets of cde I find online) is the rest of the elements are not moving up as the text moves up.
I imagine this is because the text is shrinking but Muse's text frame is not - the text frames don't have a responsive height.
I have just found a huge issue with my sticky close button - which breaks the whole page..!
Muse sounds to be creating more issues than it solves. There are lots of drag- and-drop , no-code website builders out there. They have their own issues like bloated code but are definitely more modern. You're having issues that I haven't heard of in a decade. The text is in a bouncing box/frame that isn't listening to the size of the text inside it? I'm not entirely sure the point of that.
What made you choose to use Muse ?
And what is the huge issue with your sticky button ?
Hey @clevermissfox
It's now working.... to a point. I'm trying to figure out why it breaks. Same page, I got the header responding, I got the leading to be responsive too and also got the rest of the page to move upwards as the header shrinks - except when it reaches 960px where the page stops moving up as the header shrinks..
Honestly I'm not a developer so Muse lets me put the site together without having to code. I have chucked in CSS as I have figured out - but I'm not trained in using it but am slowly understanding it more!
The button isn't sticking - I'm not sure it will work as I want it to as the parenting becomes an issue. But at least you have taught me about parenting so I know what the issue is now!
Thanks,
R
@clevermissfox ...... OK.. Found the issue I think - I copied and pasted the CSS for one (Ihave 2 instances of the text for the staggered animation) snippet of code but didn't change the class - so it went a bit buggy. I have fixed that and... it looks like it works now!
Good job! My first thought was a breakpoint.
I was mostly wondering Why Muse and not a different drag and drop website builder? Just habit ? It sounds worse qnd mote time consuming than taking 10 hours and learning to code the html and css of the site yourself. Or using a different site builder. The code alone is just so crude and bloated. No offense to you, I've just never seen or heard of Muse and I feel badly you're dealing with all of this!
@clevermissfox Cheers! I think these things are panning out - I have finished redoing all the headers on the pages - reducing the amount of breakpoints and, I think, made the whole thing a lot more lightweight. It seems to load faster too which is a huge bonus as it was loading very sluggishly before.. Which generally means users leave.
How many pages is your site?
Hey ... Just seen this! It is... 8 Main pages and my Home/portfolio is.. 24 The Apparel stuff is... (I'm looking it up) 8 and the Artim stuff is... 30..
Are you using templates? I have a vague memory of the code it was outputting , the stuff of nightmares 🤣 are you still using the same program?
I ask because you said you were redoing header(s) on all the pages. There should be one header template that is inserted into all the pages.I’m assuming that you do but just double checking
Yeah, its OK.. the code Muse outputs ha always been hurendous..! Yeah I could set up the class (styles in Muse) and got it working across all the headers with minimal effort.
I'm trying to get a 100width hing working at the moment which I close to turning to KP Discord to try to figure out where I have gone wrong
My friend , there’s a reason that muse was deprecated 6+years ago. It cannot keep up with responsiveness and modern development or deliver the tools you need or compete with the myriad of tools out there.
Styles aside anytime your content changes you have to change over 20 headers? And that’s just the header. You could rebuild this site in two days with pretty much any other tool. Sounds like even Wix would be better than what you’re dealing with.
The code bloat and the speed is the biggest problem as well as the time you’re spending maintaining this site page by page when you don’t need to. I would really urge you to play around with some of the other tools that are out there. Any one you come across will be better. There are plenty of drag and drop /no code solutions that will literally save you days.
That aside I’m not sure what you mean by a 100 width thing not working ? Can you expound ?
Yeah I know..!
I've tried a couple but as with most things these days: it's yet another subscription... On top of that is the risk the application gets shelved.
But anyway it's fine I have gotten to do what I want now!
Thanks again!
Heres the page: https://roryjmurphy.com/about-rory.html
I was having trouble with the grey panels.. But they work now.
Thanks for your intervention..! You are entirely right of course, but like I said, its more money and the market for the applications is so shaky. Plus I am not sure if I will be staying in the creative industry anyway.