Website not right on phone - Support | Kriesi.at

Viewing 20 posts - 1 through 20 (of 20 total)

Author

Posts
October 17, 2016 at 12:06 pm #699899

DickZirkzee
Participant

Hi there,
I chose Enfold also for responsiveness. . But now I created a site where the appearance in my Samsung Galaxy S5 Neo is not right, especialy buttons I created on the fulwidth easy slider. It seems they are not made smaller just like the foto is, so they fall of the picture.
website: http://www.debeweging.info. It happens on the start page and on the page “Over Dck Zirkzee”
What can I do about it?
tnx
Dick

October 18, 2016 at 3:45 pm #700699
Yigit
Keymaster
Hey DickZirkzee,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
```
@media only screen and (max-width: 767px) {
.responsive #top .slideshow_caption h2 + br {
    display: none;
}
.responsive #top .slideshow_caption h2 {
    margin-bottom: 0;
}
#top .avia-slideshow-button {
    margin-top: 0;
}}
```
Best regards,
Yigit
October 18, 2016 at 6:16 pm #700799

DickZirkzee
Participant

Hi,
it helped a bit,
I can now see the first button and an upperpart of the second. It would help if the buttons were smaller since the first button completly covers the foto and leaves no place for the second. Please have a look yourself. http://www.debeweging.info
tnx
Dick

October 19, 2016 at 2:09 pm #701317

Yigit
Keymaster

Hi,

Texts on buttons are a little bit too long to display them side by side on mobile. Would you consider displaying different elements on mobile and on desktop? If you would, please refer to this post – http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

Best regards,
Yigit

October 19, 2016 at 3:35 pm #701372

DickZirkzee
Participant

Thanks,
I want to go for different elements for different devices. I added the same two buttons to the home page. The buttons on the foto I would like only to show on desktop and tablet and the buttons below I would like to show only on mobile. The buttons are made with the enfold Button element. Can you give me codes for that? thanks in advance.
Dick

October 19, 2016 at 3:41 pm #701375
Yigit
Keymaster
Hey!

Please edit your button elements and give them “only-smartphone” custom class and add following code to Quick CSS
```
@media only screen and (min-width: 480px) {
.only-smartphone { display: none !important; }}
```
Regards,
Yigit
October 20, 2016 at 11:06 am #701791

DickZirkzee
Participant

Hi thanks for your help, but you are going a bit to fast for me. How do I give “only-smartphone” custom class to my button elements ( I am using the Avia Lay out builder) .

so to be clear:
I have two sets of the same buttond now. The ones in the Full with easy slider should be visible on desktop and tablet, the buttons below that, made in “media elements”should be visible only on mobile.
Can you pleas

October 22, 2016 at 11:33 am #702792

Nikko
Inactive Moderator

Hi,

You just need to edit the button element and scroll down on its options at the bottom of it you should see Custom Css Classes, there’s a field beside it, type: only-smartphone then Save and Update the page.

Best regards,
Nikko

October 22, 2016 at 11:42 am #702795

DickZirkzee
Participant

THanks, but How do I prevent the buttons being showed on smartphone which are now in the easy slider?

October 22, 2016 at 6:04 pm #702844

DickZirkzee
Participant

And to come back to reply #702792, Maybe I am a bit stupid and am I doing something wrong, but when I edit the button I dont see any field voor a CSS class. The last field that I see when I scroll down is “Button Icon” and above that there is no field for CSS class..
I am very greatfull for the help of you guys, but in this case could you perhaps read the whole chat/thread, because I keep getting half answers or answers that are not clear to me.
thanks in advance ( really)
Dick

October 23, 2016 at 10:08 pm #703077
Nikko
Inactive Moderator
Hi Dick,

Please post us your login credentials (in the “private data” field), so we can take a look at your backend. Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
Nikko
October 23, 2016 at 10:17 pm #703079

DickZirkzee
Participant

Thanks Nikko: see below for requested info.
To be sure I repeat the situation:
I created 2 sets of the SAME buttons:
one set in the Easy slider to be used on desktop and tablet.
one set below the easy slider in a separate button element to be used on smartphone.
thanks in advance

October 25, 2016 at 4:57 am #703535

Nikko
Inactive Moderator

Hi Dick,

Thanks for providing the login. I think deactivating plugins is unecessary after checking the backend, however I could not access the theme editor and edit functions.php to enable custom classes. Can you edit functions.php and find this code:
// add_theme_support('avia_template_builder_custom_css');

and replace it with:
add_theme_support('avia_template_builder_custom_css');

Let us know if this is done and we will be checking this again.

Regards,
Nikko

October 25, 2016 at 12:54 pm #703740

DickZirkzee
Participant

Hi

The option is now activated ( slashes removed)
dick

October 25, 2016 at 9:28 pm #703976
Nikko
Inactive Moderator
Hi,

Thanks Dick, I have added this class on the slider buttons-hide-mobile and hide-desktop the 2 buttons. Then added these codes in Quick CSS (located in Enfold > General Styling):
```
.hide-desktop {
    display: none;
}

@media only screen and (max-width: 767px) {
  .hide-desktop {
    display: block;
  }

  .buttons-hide-mobile .avia-button {
    display: none !important;
  }

  .home #after_full_slider_1 .av-content-full {
    padding-top: 10px;
  }

  .avia-button-wrap.hide-desktop a.avia-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 18px;
    margin-bottom: 12px;
  }
}
```
Let us know if this is good on your end also :)

Best regards,
Nikko
October 25, 2016 at 10:02 pm #704008

DickZirkzee
Participant

Hi Nikko,
this is all very good on my side too. Thanks a lot.
I’m very happy that I chose Enfold for getting such good support. You guys are doing great work
Dick

October 26, 2016 at 5:05 am #704104

Nikko
Inactive Moderator

Hi Dick,

Thanks for your kind words and choosing Enfold as your theme. :)

Cheers!
Nikko

October 30, 2016 at 10:29 am #705778

DickZirkzee
Participant

Hi Nikko, ( or someone else)
I use this thred to adress some other things that go wrong on different media.

1.On smartphone the tagline is so big it covers the photo. Its ok on desktop and tablet. Shall we do the same here? Create a text element that shows only shows on smartphone and leave the surrent situation on desktop and tablet? Can you provide code and tell me where to put it, or do it yourself like above?

2. On the page “Over Dick Zirkzee”, the tagline and button are also covering the photo on smartphone. Same solution? Can you provide code and tell me where to put it, or do it yourself like above?

3. In this case, the page “Over Dick Zirkzee” The tablet gives another strange effect , the button and tagline are shifted to the right . On desktop it is right.

thanks in advance

November 1, 2016 at 6:00 pm #706814

Andy
Inactive Moderator

Hi,

please use a different ticket. Open one ticket for one question. Otherwise it gets too confusing here in our forum. Thanks for your understanding.

Please always provide us precise links showing the elements you’re talking about. Screenshots would help as well.

Best regards,
Andy

November 1, 2016 at 6:04 pm #706817

Andy
Inactive Moderator

Hi,

probably it would be best to open a new ticket where you explain clearly what’s going on for you. It’s really quite confusing here. Check out this: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

Hopefully it’s what you want.

Best regards,
Andy
Author

Posts

Viewing 20 posts - 1 through 20 (of 20 total)

The topic ‘Website not right on phone’ is closed to new replies.