Viewing 30 posts - 1 through 30 (of 46 total)
  • Author
    Posts
  • #547675

    Hello again :-)

    I was wondering if there is a way to exclude certain sections of a page for mobile devices!? To make the page shorter on a mobile compared to a regular desktop page…
    If not, that would be a great option to build in ;-)

    grt Boris

    #547690

    You sure can. First, my strong suggestion is to use the Enfold Child theme so you can make the following addition to the functions.php file for the Child theme.

    
    add_theme_support('avia_template_builder_custom_css');
    

    You can add it to the regular parent functions.php file, but it will be overwritten upon update.

    After adding that line of code, you’ll see a Custom CSS Class field for almost all of the Avia Layout content elements. But first…

    You’ll need to go to the Enfold settings > General Settings section and scroll down to the Quick CSS section and add something similar to the following:

    @media only screen and (max-width: 670px) {
    .hide-mobile { display: none; }}
    
    @media only screen and (min-width: 671px) {
    .show-mobile { display: none; }}

    That bit of CSS ensures a specified element will be hidden if the screen is smaller than 670px, and I added the second one to ensure an element is shown if it is smaller than 671px. In other words, one element will hide and the other element will be shown if you are looking for that extra feature.

    Then go to the element itself on the page and go to that Custom CSS Class field. To hide the element below 670px wide, add the following to the field:

    
    hide-mobile
    

    To show an element when the screen width is smaller than 671px, add the following to the field:

    
    show-mobile
    

    Note that you do not include the period at the beginning of the class.

    Adjust the pixel width for your needs.

    #547693

    And of course, I could not find this before. From the Enfold documentation…

    http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

    #547720

    Hey Spidercreations,

    Thx man, not really simple, but possible nontheless! :-)

    Will look into it, thx!

    grt Boris

    #547820

    Hi Boris,

    Great, let us know if you should need any more help on the topic. Thanks for helping out @spidercreations :-)

    Best regards,
    Rikard

    #586372

    Hey Rikard and team,

    I tried to fix it, but it didn’t work :-S
    The line: add_theme_support(‘avia_template_builder_custom_css’); is now in the functions.php
    but the Custom CSS Class field don’t show up anywhere!? I can add a shortcode neither!? :-S

    grt Boris

    #586377

    Please take a look at the instructions I provided again. Everything is there. Sorry, not much more I can add. The new Custom Css Class is showing up for my installations. As an example, go to a page with a Special Heading element, open that element (edit it) and scroll down to the bottom and you’ll see the field.

    Also, make sure you are updating the correct functions.php file, in the root folder of the theme you have active.

    If you are running the Child theme, you need to have the functions.php file look like this…

    <?php
    
    /*
    * Add your own functions here. You can also copy some of the theme functions into this file. 
    * WordPress will use those functions instead of the original functions then.
    */
     /*
     * this function will turn ON the Custom CSS Class setting for all ALB elments [sjm 20160209]
     * The Quick CSS (Enfold Child > General Styling > Quick CSS) has two classes available - .hide-mobile and .show-mobile
     * IMPORTANT: You DO NOT add the period before the class, if you do, it will not work. (This is when you are editing the element.)
     */ 
    add_theme_support('avia_template_builder_custom_css');
    #586537

    Is that the section ‘for developers: section ID’?
    And should I just put ‘hide-mobile’ there and then it works?
    Because if that’s the case, it didn’t work :-(

    #586538

    Nope, not that section. You’re specifically looking for Custom CSS Class. If you do not see that, there is something up with your functions.php file.

    #586541

    Ah ok. Thx for even replying at this hour and in the weekend! ;-)

    Is there a specific place in the Functions.php I should put it? Right now it all the way at the end…

    #586542

    PS the last bit says this:

    /*
    * add option to edit elements via css class
    */
    // add_theme_support(‘avia_template_builder_custom_css’);

    #586543

    Take a very close look at the code I provided. That line should be…
    add_theme_support('avia_template_builder_custom_css');
    Note that what you’ve provided has two slashes before the code, so my guess is it is being ignored.

    #586545

    Ah ok, well I know some html, but css and php are totally out of my league ;-S
    Thx, will try…

    #586548

    You made my day partially! :-) The CSS field is here now, but if I put in the ‘hide-mobile’, it’s still showing on my mobile :-(

    I even tried the css on this page:
    http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

    And put in only-desktop instead, but both don’t work :-S

    #586550

    Please review the instructions again above, and take a look at the CSS. You either have the CSS in the theme’s style.css file, or in the Quick CSS sections as shown above. In my example above, the change happens at about 670 pixels.

    #586554

    Hey again,

    I reviewed them again and I did everything like you instructions said. Not working :-S Appreciate your help though.
    I’ve put in the Quick CSS field. Maybe there is something else in my Quick that is interfering with it!??

    grt B

    #586556

    Sorry. No idea. The classes need to match, that’s all I can think of. Plus don’t put the period in front of the class when entering the class into the Custom CSS Class.

    #586557

    I understand, so I paid attention to that ;-)
    And I tried with and without the period, just to check :-P

    Do the Enfold moderators have any idea maybe? I guess they don’t work in the weekends!?

    #587544

    Hey!

    Thank you the assistance @spidercreations.

    @borissimo: Please provide a link to the page where you added the custom css class attribute. A screenshot will help (imgur or dropbox).

    Best regards,
    Ismael

    #587756

    Hey Ismael,

    Here they are…

    #588872

    Any thoughts on this one guys!? :-S Not used to such slow response! haha ;-)

    #590214

    Hey!

    Is that a comma on top of the css media queries? If yes, please remove that. You should use standard media queries. The max-width value should be 767px while min-width is 768px. Please post the login details here. We will check the actual page.

    P.S: Sorry for the delay.

    Regards,
    Ismael

    #590246

    Hey Ismael,

    Nope, it certainly looks like it in the screenshot ;-)
    I changed the min and max, didn’t help. Below are the login…

    #591480

    Is this an exceptional hard topic for you guys? Not used to this slow respons ;-P haha

    #592658

    Guys, pleeeeaaasse give me a respons!????

    #593388

    Hi!

    Sorry for the late reply!
    I have edited your custom CSS and added !important rules. Can you please point out your page as well?
    Also, custom CSS field does show up on my end, i guess that is resolved for now just custom CSS code is not being applied, is that correct?

    Best regards,
    Yigit

    #593728

    Hey Yigit,

    No indeed, the custom css section was already there, I fixed that already….

    It’s about the fact that things still appear on my mobile… For instance on the page below I put in the content field ‘Time left 4 take off’ the field ‘hide-mobile’, but it’s still showing on mobile :-S

    #594914

    Hi!

    The section is not showing on mobile or at least on 768px screens or below. If you want to hide it on tablet screens, adjust the max-width value:

    @media only screen and (max-width: 1024px) {
    .hide-mobile { display: none !important; }}

    Regards,
    Ismael

    #594936

    Hey Ismael,

    Well I don’t know about YOUR mobile, but MINE it’s still showing! :-S (and i’m not accepting cookies, so that can’t be the problem…

    grt B

    #595704

    @kriesi, are you able to help with this problem!??

Viewing 30 posts - 1 through 30 (of 46 total)

You must be logged in to reply to this topic.