-
Posts
-
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
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-mobileTo show an element when the screen width is smaller than 671px, add the following to the field:
show-mobileNote that you do not include the period at the beginning of the class.
Adjust the pixel width for your needs.
And of course, I could not find this before. From the Enfold documentation…
http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/
Hey Spidercreations,
Thx man, not really simple, but possible nontheless! :-)
Will look into it, thx!
grt Boris
Hi Boris,
Great, let us know if you should need any more help on the topic. Thanks for helping out @spidercreations :-)
Best regards,
RikardHey 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!? :-Sgrt Boris
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');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 :-(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.
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…
PS the last bit says this:
/*
* add option to edit elements via css class
*/
// add_theme_support(‘avia_template_builder_custom_css’);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.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
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.
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
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.
I understand, so I paid attention to that ;-)
And I tried with and without the period, just to check :-PDo the Enfold moderators have any idea maybe? I guess they don’t work in the weekends!?
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,
IsmaelHey!
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,
IsmaelHey Ismael,
Nope, it certainly looks like it in the screenshot ;-)
I changed the min and max, didn’t help. Below are the login…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,
YigitHey 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
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,
IsmaelHey 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
@Kriesi, are you able to help with this problem!??
- You must be logged in to reply to this topic.