How to override text scaling on mobile for 7.1

Site URL: https://www.lesliefang.com/pawalong

Hiiii,

The new font scaling is not working well for me in mobile view. If I leave it on regular view it's oversized and if I scale it to fit, it throws the alignment all off. Is there a way to to make them all match the same font size? 

When not the font is not scale the font (as attached below) looks so awkward.

If I scaled the font its look to0 small and out of sync with the rest of the title blocks i have. 

For now my workaround is making the text into a image so it doesn't auto scale.

Hi @lfang2, I generally wouldn't recommend converting your text to an image, it's not great for readability or for SEO. The "scale to fit" feature for text is great for making small pieces of text fit an area, but doesn't tend to be a great solution for longer strings of text since it gets scaled rather small on mobile. What look were you trying to achieve that a standard H4 font didn't achieve?

Hi @Ziggy, I'm not to worry about the SEO as most the images I use in text are not seo friendly and mostly only titles. 

The main reason, I want the text to the same size so it looks the same all across my portfolio. 

1 hour ago, lfang2 said:

The main reason, I want the text to the same size so it looks the same all across my portfolio. 

This should be achievable with the headings. If it isn't can you show me the problem in detail so that I can help you come to a solution that you're happy with?

@Ziggy Yes please that would be so awesome if you can. The new fluid design has me confused and having to rearrange a whole bunch of things as i edit my porfolio. I'm not sure what you mean with heading? The text I use which is oswald is under the heading when I click on it to edit? If I'm understaind you correctly?

For this example: Leave it as a Heading 4 and edit the mobile view, it looks like all you need to do is move the image down one row and they won't overlap.

Editing the mobile version won't have an impact on the desktop version.

I've used text scaling for my H1 text at the top of my website (hero), but it doesn't translate well to mobile. I'd prefer the text break to two lines and maintain the H1 without scaling. Appreciate the help!

The text I'm referring to is "Accounting is boring."

Also, would love help on how to maintain button padding on mobile (that's not translating to mobile well either).

Thanks!

If you're using the Fluid Engine grid layout, the desktop view and the mobile view can be individually edited. As for the scaling text.

My suggestion would be to use a code specifically for mobile to prevent the text from scaling. Could trying using something like :

@media only screen and (max-width: 749px){
h1 {
font-size: 48px !important;
	}
}

I am also finding issues with the same problem on my site. But the code hasn't been working. @Wolfsilon do you recommend putting this into custom CSS panel or as code directly into the page?

I've tried adding this code into the custom css panel, but it still doesn't effect the text that's under the spell of the Scale tool.

For those looking for a fix, I found this super helpful. https://qosmic.tech/rocketsurgery/how-to-display#code

I found a fix. I used the custom code found here. If you're also looking for a way around and to have the best of both worlds, it worked well. https://qosmic.tech/rocketsurgery/how-to-display#code

Here's my code:

@media screen and (max-width: 768px) {#blockID {display:none!important}}

@media screen and (min-width: 768px) {#blockID {display:none!important}}