Hi all~
do any of you have any experience or tips you recommend when scaling down from desktop sizing? I'm coming into a bit of an issue with the scale that I want to fix before export. I am looking to properly resize my added fonts, paragraphs, etc. all of my pictures appear to scale properly, but when I've added in paragraph information, it keeps the same font size between breakpoints? i've tried changing it but for some reason it still shows up however I move it from mobile to desktop.
Would a good solution be to keep the font one size that fits all breakpoints?
Many thanks~
Responsive Sizing - Post ID 303069
Zoe
Guest
79 posts
Eric Rohloff
Senior Advisor
20,196 posts
Zoe,
Can you share a link to a page that has the issue?
Can you share a link to a page that has the issue?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Wayan Jaya
Registered User
4,845 posts
Online Now
There are a number of ways to do this
if we were doing this in HTML (ourside of Site Designer,) using the CSS property "Clamp" which allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size.
so you could do that by placing that property in the text <head> section, but then you would't be able to see this working until external preview, (which could be confusing for most begginners or the inexperienced)
There is a workaround for Site Designer which can almost do the same hovever it maybe a bit fiddly for you (or others) who are trying to do this because it best to do this at the very start of a project.
1/ disable ALL BREAKPOINTS (if any)
2/ the text needs to be a child of a container
3 at the lowest point of your layout (left of the lowest breakpoint )you set the size of the text to VW (adjust the amount until the desired text looks how you want it.
4/you then give the 'PARENT CONTAINER' a maximum width in pixels, which you can then adjust accordingly at any additional breakpoints (if any) (Unless of course you are using frameworkless where there are no breakpoints (at the beginning of the project))
As I said earlier, this is fairly straightforward if done at the beginning of the project.
A step by step video is available showing how to achieve this (n all 4 frameworks) is available upon request.
if we were doing this in HTML (ourside of Site Designer,) using the CSS property "Clamp" which allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size.
so you could do that by placing that property in the text <head> section, but then you would't be able to see this working until external preview, (which could be confusing for most begginners or the inexperienced)
There is a workaround for Site Designer which can almost do the same hovever it maybe a bit fiddly for you (or others) who are trying to do this because it best to do this at the very start of a project.
1/ disable ALL BREAKPOINTS (if any)
2/ the text needs to be a child of a container
3 at the lowest point of your layout (left of the lowest breakpoint )you set the size of the text to VW (adjust the amount until the desired text looks how you want it.
4/you then give the 'PARENT CONTAINER' a maximum width in pixels, which you can then adjust accordingly at any additional breakpoints (if any) (Unless of course you are using frameworkless where there are no breakpoints (at the beginning of the project))
As I said earlier, this is fairly straightforward if done at the beginning of the project.
A step by step video is available showing how to achieve this (n all 4 frameworks) is available upon request.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
Wayan Jaya
Registered User
4,845 posts
Online Now
Wayan Jaya wrote:
There are a number of ways to do this
if we were doing this in HTML (ourside of Site Designer,) using the CSS property "Clamp" which allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size.
so you could do that by placing that property in the text <head> section, but then you would't be able to see this working until external preview, (which could be confusing for most begginners or the inexperienced)
There is a workaround for Site Designer which can almost do the same hovever it maybe a bit fiddly for you (or others) who are trying to do this because it best to do this at the very start of a project.
1/ disable ALL BREAKPOINTS (if any)
2/ the text needs to be a child of a container
3 at the lowest point of your layout (left of the lowest breakpoint )you set the size of the text to VW (adjust the amount until the desired text looks how you want it.
4/you then give the 'PARENT CONTAINER' a maximum width in pixels, which you can then adjust accordingly at any additional breakpoints (if any) (Unless of course you are using frameworkless where there are no breakpoints (at the beginning of the project))
As I said earlier, this is fairly straightforward if done at the beginning of the project.
A step by step video is available showing how to achieve this (n all 4 frameworks) is available upon request.
There are a number of ways to do this
if we were doing this in HTML (ourside of Site Designer,) using the CSS property "Clamp" which allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size.
so you could do that by placing that property in the text <head> section, but then you would't be able to see this working until external preview, (which could be confusing for most begginners or the inexperienced)
There is a workaround for Site Designer which can almost do the same hovever it maybe a bit fiddly for you (or others) who are trying to do this because it best to do this at the very start of a project.
1/ disable ALL BREAKPOINTS (if any)
2/ the text needs to be a child of a container
3 at the lowest point of your layout (left of the lowest breakpoint )you set the size of the text to VW (adjust the amount until the desired text looks how you want it.
4/you then give the 'PARENT CONTAINER' a maximum width in pixels, which you can then adjust accordingly at any additional breakpoints (if any) (Unless of course you are using frameworkless where there are no breakpoints (at the beginning of the project))
As I said earlier, this is fairly straightforward if done at the beginning of the project.
A step by step video is available showing how to achieve this (n all 4 frameworks) is available upon request.
here is a quick demo (silent movie)
https://rsd-tutorialscom.coffeecup.com/blank.html
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
Zoe
Guest
79 posts
Wayan Jaya wrote:
here is a quick demo (silent movie)
https://rsd-tutorialscom.coffeecup.com/blank.html
Wayan Jaya wrote:
There are a number of ways to do this
if we were doing this in HTML (ourside of Site Designer,) using the CSS property "Clamp" which allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size.
so you could do that by placing that property in the text <head> section, but then you would't be able to see this working until external preview, (which could be confusing for most begginners or the inexperienced)
There is a workaround for Site Designer which can almost do the same hovever it maybe a bit fiddly for you (or others) who are trying to do this because it best to do this at the very start of a project.
1/ disable ALL BREAKPOINTS (if any)
2/ the text needs to be a child of a container
3 at the lowest point of your layout (left of the lowest breakpoint )you set the size of the text to VW (adjust the amount until the desired text looks how you want it.
4/you then give the 'PARENT CONTAINER' a maximum width in pixels, which you can then adjust accordingly at any additional breakpoints (if any) (Unless of course you are using frameworkless where there are no breakpoints (at the beginning of the project))
As I said earlier, this is fairly straightforward if done at the beginning of the project.
A step by step video is available showing how to achieve this (n all 4 frameworks) is available upon request.
There are a number of ways to do this
if we were doing this in HTML (ourside of Site Designer,) using the CSS property "Clamp" which allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size.
so you could do that by placing that property in the text <head> section, but then you would't be able to see this working until external preview, (which could be confusing for most begginners or the inexperienced)
There is a workaround for Site Designer which can almost do the same hovever it maybe a bit fiddly for you (or others) who are trying to do this because it best to do this at the very start of a project.
1/ disable ALL BREAKPOINTS (if any)
2/ the text needs to be a child of a container
3 at the lowest point of your layout (left of the lowest breakpoint )you set the size of the text to VW (adjust the amount until the desired text looks how you want it.
4/you then give the 'PARENT CONTAINER' a maximum width in pixels, which you can then adjust accordingly at any additional breakpoints (if any) (Unless of course you are using frameworkless where there are no breakpoints (at the beginning of the project))
As I said earlier, this is fairly straightforward if done at the beginning of the project.
A step by step video is available showing how to achieve this (n all 4 frameworks) is available upon request.
here is a quick demo (silent movie)
https://rsd-tutorialscom.coffeecup.com/blank.html
Thank you so much!
I am using a frameworkless template
Wayan Jaya
Registered User
4,845 posts
Online Now
It doesn't matter what framework you use same way for all
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
Dottz
Guest
4 posts
Consider using relative units like percentages or ems for font sizes instead of fixed pixel values. This allows your text to adapt more fluidly to different screen sizes.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
