How To Use CSS Clamp For Fluid Typography In Divi With The Divi Responsive Helper Plugin

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ธ.ค. 2024

ความคิดเห็น • 31

  • @darndarn99
    @darndarn99 6 หลายเดือนก่อน +2

    Wow !!! I didn’t know your plugin could do this 😱😱😱😱 I have been manually doing it on site after site etc… been a real pain !!! Getting your plugin right now !!!!

    • @PeeAyeCreative
      @PeeAyeCreative  5 หลายเดือนก่อน +1

      Awesome! Our Divi Assistant will also be able to do the same thing.

    • @darndarn99
      @darndarn99 5 หลายเดือนก่อน

      @@PeeAyeCreativeI purchased the other week and to be fair this is my favourite plugin, really lightweight 👌👏👏👏

  • @ElleEKay-dc1nc
    @ElleEKay-dc1nc 3 หลายเดือนก่อน +1

    Thank you! This is what I needed. :)

  • @JanineMKartist
    @JanineMKartist ปีที่แล้ว

    I'm about to order the plug in.

    • @PeeAyeCreative
      @PeeAyeCreative  ปีที่แล้ว

      This also works in Divi Assistant FYI

  • @imraan_alam
    @imraan_alam ปีที่แล้ว +1

    i wish divi had this feature inbuilt

    • @PeeAyeCreative
      @PeeAyeCreative  ปีที่แล้ว

      Thankfully it's easy to add with our plugin or even code.

  • @tjveach
    @tjveach 2 ปีที่แล้ว +1

    Nice job !

  • @mauricelee7299
    @mauricelee7299 2 ปีที่แล้ว

    another great video as usual. When is that CSS course going to be released? I hope I haven't missed an email concerning its release.

  • @blaircox1589
    @blaircox1589 2 ปีที่แล้ว +1

    Great vid, thanks! I've been using this for a long time now in order to get text to be responsive in some of the designs on mobile. This method greatly improves on how I've been doing it!
    Topic Idea - Have you covered WCAG 2.0 AA compliance within Divi?

    • @PeeAyeCreative
      @PeeAyeCreative  2 ปีที่แล้ว +1

      That's great that you have been using clamp, it really is amazing. As for your topic idea, I really am not one to speak on that, accessibility is just not in my area of expertise.

  • @armantn.6352
    @armantn.6352 2 ปีที่แล้ว

    Gonna use the plugin!
    What to do with longer headings, which will not fit on one line? Sometimes it seems that it places the word on the next line, but sometimes it breaks the word?!

    • @PeeAyeCreative
      @PeeAyeCreative  2 ปีที่แล้ว

      In Divi it only breaks the word if the font size is too big for it to physically fit. It wouldn't break a word of there was space for it. A smaller font size/shorter word is the only solution in that case, and clamp can help for sure.

  • @davidrecabarren620
    @davidrecabarren620 2 ปีที่แล้ว

    thanks nelson for the tutorial, I need to ask you something, with this plugin if you want an h1 to have different sizes on a desktop computer screen, for example 1024/1366/1920, it would only be enough for me to use the "H1 Heading Text Size" field - Desktop" the following values: clamp(15px, 20px, 30px)?

    • @PeeAyeCreative
      @PeeAyeCreative  2 ปีที่แล้ว

      Sure, if I understand correctly you only want to affect desktop, so yes you would only add it to he Desktop fields for H1 and not Tablet and Phone fields.

  • @treffermedia9202
    @treffermedia9202 8 หลายเดือนก่อน

    if I have a H1 - and already made some changes, then installed your Plugin, activated typography and added clamp(1.5rem,5vw,4rem) for Desktop for example. The H1 is not using your setting. How can I reset it, so it uses your settings?

    • @PeeAyeCreative
      @PeeAyeCreative  8 หลายเดือนก่อน +1

      The plugin is designed for you to easily override it as needed, so you would need to remove any value from the modules. If you have a preset, be sure to edit the preset and reset the font size

    • @treffermedia9202
      @treffermedia9202 5 หลายเดือนก่อน

      @@PeeAyeCreative thank you! I reseted the whole heading part, but I am not sure if it works now. turning your font helper off and on is not helping?
      and btw, how can I change REM parameter, its always 16px? Somewhere else I read its 10px. Is the browser providing the REM value? If not, is there a place in divi to change it? Or is it just a CSS line?
      BTW: can you zoom in your page using clamp?
      thanks for your great work

    • @treffermedia9202
      @treffermedia9202 5 หลายเดือนก่อน

      @@PeeAyeCreative I got it to work, for H4, but H1 is not working. I set the maximum to 50rem and dragged the site to 4k, but its not getting bigger, so thats a clear sign that its not active right?
      I just created a new text module, not touching the font size, but also here its not working.
      in my CSS I only have a few mediaqueries but they only affect the menu.....

  • @dHuvelle
    @dHuvelle 2 ปีที่แล้ว

    when using it, it seems that divi prioritize his default value (20px). I need to add "!important" into the typography tab of divi responsive helper ... Is there something that I'm doing wrong ?

    • @PeeAyeCreative
      @PeeAyeCreative  2 ปีที่แล้ว

      There is no default value of 20px in Divi, so if you are seeing that then it is already modified. Any modifications take priority over our settings, we do this on purpose.

  • @erling5148
    @erling5148 2 ปีที่แล้ว

    why would you give 3 times the same value for a h1, h2 etc. when using clamp that extra css for no reason

    • @PeeAyeCreative
      @PeeAyeCreative  2 ปีที่แล้ว

      You must not be familiar with the video and plugin. If you check again you will see that we have fields for each device 😉

    • @erling5148
      @erling5148 2 ปีที่แล้ว

      @@PeeAyeCreative That's not how you use clamp.
      You use Clamp to setup content without media queries

    • @treffermedia9202
      @treffermedia9202 5 หลายเดือนก่อน

      @@erling5148 can you explain this with a little more detail? What speaks against using clamp with media queries?

    • @erling5148
      @erling5148 5 หลายเดือนก่อน

      @@treffermedia9202 It simply defeats its own purpose.
      that is why you set a with related min and max size

  • @kathryncainmadsen5850
    @kathryncainmadsen5850 2 ปีที่แล้ว

    Not getting it…

    • @PeeAyeCreative
      @PeeAyeCreative  2 ปีที่แล้ว

      Using clamp with our plugin, which is what the tutorial is about z is very simple. I assume you mean you are struggling to understand CSS clamp.