exclude specific sections on mobile devices - Support | Kriesi.at

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

1 2 →

Author

Posts
December 6, 2015 at 8:07 pm #547675

Borissimo
Participant

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

December 6, 2015 at 8:45 pm #547690
spidercreations
Participant
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.
- This reply was modified 9 years ago by spidercreations.
December 6, 2015 at 8:51 pm #547693

spidercreations
Participant

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

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

December 7, 2015 at 12:42 am #547720

Borissimo
Participant

Hey Spidercreations,

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

Will look into it, thx!

grt Boris

December 7, 2015 at 7:55 am #547820

Rikard
Keymaster

Hi Boris,

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

Best regards,
Rikard

February 20, 2016 at 3:02 am #586372

Borissimo
Participant

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

February 20, 2016 at 3:48 am #586377
spidercreations
Participant
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');
```
- This reply was modified 8 years, 10 months ago by spidercreations.
February 20, 2016 at 11:10 pm #586537

Borissimo
Participant

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 :-(

February 20, 2016 at 11:16 pm #586538

spidercreations
Participant

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.

February 20, 2016 at 11:40 pm #586541

Borissimo
Participant

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…

February 20, 2016 at 11:41 pm #586542

Borissimo
Participant

PS the last bit says this:

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

February 20, 2016 at 11:46 pm #586543

spidercreations
Participant

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.

February 20, 2016 at 11:51 pm #586545

Borissimo
Participant

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

February 20, 2016 at 11:59 pm #586548

Borissimo
Participant

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

February 21, 2016 at 12:25 am #586550

spidercreations
Participant

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.

February 21, 2016 at 12:54 am #586554

Borissimo
Participant

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

February 21, 2016 at 12:58 am #586556

spidercreations
Participant

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.

February 21, 2016 at 1:06 am #586557

Borissimo
Participant

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!?

February 23, 2016 at 5:01 am #587544

Ismael
Moderator

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

February 23, 2016 at 3:53 pm #587756

Borissimo
Participant

Hey Ismael,

Here they are…

February 25, 2016 at 10:53 am #588872

Borissimo
Participant

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

February 27, 2016 at 10:02 am #590214

Ismael
Moderator

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

February 27, 2016 at 3:12 pm #590246

Borissimo
Participant

Hey Ismael,

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

March 1, 2016 at 12:17 pm #591480

Borissimo
Participant

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

March 3, 2016 at 3:46 pm #592658

Borissimo
Participant

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

March 4, 2016 at 5:30 pm #593388

Yigit
Keymaster

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

March 5, 2016 at 2:05 pm #593728

Borissimo
Participant

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

March 8, 2016 at 10:14 am #594914
Ismael
Moderator
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
March 8, 2016 at 11:24 am #594936

Borissimo
Participant

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

March 9, 2016 at 5:51 pm #595704

Borissimo
Participant

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

Posts

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

1 2 →

You must be logged in to reply to this topic.