Home Forums Community Forum Cannot set mobile font size in layout content section builder. Is not responsive

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • bookman53
    Participant
    Post count: 8

    I have spent hours today trying to get the Avada Layout Builder (backend) to accept different font sizes for mobile and desktop in the layout post content section. No matter what I’ve tried, I cannot set a separate font size for desktop and mobile. I set the container to mobile, then set the font size. It changes the font size for desktop, mobile, and tablet.

    I have set the responsive typography settings that I understand the content section should obey, but it does not. I have watched every video in the Theme Fusion channel on YouTube and still cannot get the settings to take. For some reason, I am unable save any changes in the live layout builder, so I am forced (for now) to use the backend layout builder.

    I would appreciate someone telling me how I should go about setting the body font in the backend post content section builder for desktop and mobile. What am I doing wrong? Oddly enough, the page title, text boxes, etc.. are responsive, just not the post content body text.

    bookman53
    Participant
    Post count: 8

    I figured out that Avada apparently does not allow one to set a specific font size for mobile. I found another thread where the two typography responsiveness sliders were explained enough that I could get a good balance in sizes.

    It is beyond me why Avada’s creators would include no settings for specific mobile font sizes. I understand relative sizing and automatic resizing. But there are still times when it would be useful to be able to set your own specific font size.

    It would be helpful if Theme Fusion would include some more detailed instruction regarding the two responsive typography sliders, how they work together, how they affect each other, how it’s possible for incorrect settings to cause headings to become smaller than body font on mobile, etc.. So far, I find nothing more than mentions of those features that gloss over them as if no explanation would be useful.

    Metro
    Participant
    Post count: 111

    One way to get around this is…

    – Set the column or container to Visability Small Screen.
    – Edit the Text or Title element, click on the ‘Text’ tab next to ‘Visual’ and use this code <p style=”font-size:18px;”>Sample text…</p>

    Pdoggy
    Participant
    Post count: 4

    There are so many problems with the way the Avada Layout Builder was designed, I’ve almost given up on it.

    Ammar. S
    Keymaster
    Post count: 1741

    Hello @Bookman53

    Regarding the responsive options set for typography, it is actually controlled globally in our theme and to check whether an option is supposed to work independently across different devices you will need to look for this icon on the field => https://share.getcloudapp.com/Wnu0qE5D

    Any option that does not show this icon is not supposed to work independently for specific device and will remain same across all the devices, in such cases you can always use our visibility system as mentioned here => https://theme-fusion.com/documentation/avada/options/the-avada-visibility-system/

    Secondly, regarding the responsive typography sliders, the first one that is “Responsive Typography Sensitivity” is actually just a scale where you decides how much responsive the headers should become on different screen sizes, to test how this works simply setup a header and then check the header on different sensitivity values, 0.1 being the least amount and 1 being the maximum you can get.

    The second slider which is called “Minumum Font Size Factor” is actually used for calculating the minimum size your header font should be depending on the body font.

    The formula to go here is

    Minimum Font Size Factor * Body Font Size = Minimum Heading Size (for any of your header in order to be responsive)

    This means that any header that is set less than this value will not have any responsive effect applied to it, so for example lets say that you want your H1 to be responsive, in order to do so you will need to see what body font size you have set currently, lets say that you have set it to 16px and your min font size factor is set to 1.5

    1.5 * 16 => 24

    24px should be the minimum size of your header in this case for the responsive typography to work on it, now you can change both values here either your font size factor or body font size to suit your requirements.

    More information on this can be read here in our document post => https://theme-fusion.com/documentation/avada/options/responsive-headings/

    @pdgoggy

    There is a learning curve to every new feature but we have very detailed documentation on how the layout builder works in Avada here => https://theme-fusion.com/documentation/avada/layouts/the-layout-builder/

    If you have any issues with the layout builder, please open a support ticket and our team will gladly assist you with this further.

    Thanks

    -Ammar

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.