Create Responsive Text

Show and tell
,
21

Johanna (Wix) can you please explain why you have not put ‘font-face’ into your code so it can be used to change font?

22

Hi there, I am trying to centre my responsive text but unfortunately it doensn’t work.

I have a three column strip and in each column there is a text box.

I used the code of @johannaa but as you can see in the first column the red text isn’t centred anymore.

Does anybody has a solution for this?

1890×509 21.9 KB

23

Hi @johannaa , thanks so much for sharing this! I’m trying to combine your code for responsiveness with another typewriter effect script. I’m not sure however how to combine the two (I’m a bit of a beginner unfortunately). Would you be able to help me out? The typewriter script is as follows:

<h1 style=
"font-family: Roboto;
 font-weight: 500;
 font-size: 6.5em;
 letter-spacing: 0.2em;
 color: ff9025;"> 
 <span class="typed"></span>
</h1>

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
<script>
var typed = new Typed('.typed', {
  strings: ["PLAY", "EXPERIENCE", "LEARN"],
  typeSpeed: 50,
  backSpeed: 40,
  loop: true
});
</script>

I would like to make the text responsive, so it also shows up properly in mobile.

24

@johannaa , thank you for helping make Wix layout more responsive. I’ve tried your code, but my text element simply disappears when made responsive. I’ve also tried including the specific font color (with nulls for the other parameters I’m not setting). Text just doesn’t display.

$w.onReady(function () {
makeResponsive("#tab2midTextTop","p1",4);
});

Assuming I get this working, it should make the site more compatible with tablets as well as different desktop window sizes, correct? Is there an expected arrival date for making this a standard feature of Wix layout?

Thanks again for any suggestions on using your code.

25

Love this. Thanks Johanna. Can’t wait for full responsiveness.

26

Great work, thanks a lot

27

While I have the code working now, which is tantalizing., its limitations have precluded its use in some situations I have now. It does not keep other formatting (like text alignment) as others have noted, and that presents problems. Also, we really need responsive sizing for other elements, i.e., containers, for the text sizing to be really helpful. Thanks for this option, though, and really looking forward to more complete responsive design–so we can use the real estate of large monitors and still have the site work nicely in smaller monitors and windows and in tablets.

28

The new Editor X ( www.wix.com/editorx ) is apparently focused on responsive design. Now fingers crossed it wil work with Corvid. I already designed a new Wix site with nice features by using code, but until responsive design is available I don’t dare to connect it to my domain name because my old wp site/blog had mostly tablet visitors.

29

AWESOME. Thanks!