Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 28, 2017 at 2:34 am #844605
    theplattrust

    Hello!
    Ive been going through the threads for help on changing sizes and features to best suit a mobile display and there are a few items that I’m struggling a bit with.

    Firstly the main header and text in the first section are too large on mobile. But as they are not default text sizes, I’m not sure how to specifically reduce that text to a smaller size, and then change the text for the body text to a different size. I tried using shortcode before but it adjusted all the special heading text to the same size, and all the body/paragraph text to the same size. I would like to keep the same text hierarchy the same, but just scale it down.

    My client also uses an event plugin, and on mobile it extends past the width of the screen, but I am unable to scroll horizontally. It is in a table format, but one created by the plugin so i haven’t been able to adjust it like a normal table, which is what other threads recommended.

    I would also like to change the drop down menu to a horizontal menu that is sticky. Currently on mobile the menu is only in the header so you can only scroll to whichever section, which is inefficient.

    Any help with these items is greatly appreciated.

    August 30, 2017 at 8:22 am #845664
    theplattrust

    Hi there!
    I solved the menu and event plugin issues, but I am still having problems resizing the text for mobile.
    Could i get some help for this please?

    Thanks
    Tim

    August 31, 2017 at 5:03 am #846065
    Rikard

    Hi Tim,

    Sorry for the late reply. If you need to target more than one element then I would suggest that you turn on the custom CSS class function for all builder elements: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    You can then assign a class to the elements you want to target, like my-class for instance. Then you can use CSS like this to target them on mobile only:

    @media only screen and (max-width: 767px) {
.my-class {
  font-size: 16px !important;
} 
}

    Best regards,
    Rikard

    August 31, 2017 at 8:50 am #846135
    theplattrust

    Brilliant, just want I needed,

    Is there a way to do the same thing for images?

    Thanks

    September 1, 2017 at 6:59 am #846624
    Rikard

    Hi,

    Yes, that should be possible for images as well. I’m not sure I understand what you mean specifically though, maybe you could try to explain a bit further?

    Best regards,
    Rikard

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