Buttons on mobile should be displayed one below the other - Support

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

Author

Posts
May 9, 2018 at 9:27 am #953771

Jacky
Participant

I’ve placed several buttons with shortcode next to each other:
[av_button label='Orientierungstour' link='manually,https://the-relocation-company.ch/relocation-services/#orientierung' link_target='' size='large' position='left' icon_select='yes' icon='ue841' font='entypo-fontello' color='custom' custom_bg='#cccccc' custom_font='#ffffff' admin_preview_bg=''] [av_button label='Wohnungsuche' link='manually,https://the-relocation-company.ch/relocation-services/#wohnung' link_target='' size='large' position='left' icon_select='yes' icon='ue821' font='entypo-fontello' color='custom' custom_bg='#cccccc' custom_font='#ffffff' admin_preview_bg=''] [av_button label='Einleben' link='manually,https://the-relocation-company.ch/relocation-services/#leben' link_target='' size='large' position='left' icon_select='yes' icon='ue81e' font='entypo-fontello' color='custom' custom_bg='#cccccc' custom_font='#ffffff' admin_preview_bg=''] [av_button label='Wegzug' link='manually,https://the-relocation-company.ch/relocation-services/#abschied' link_target='' size='large' position='left' icon_select='yes' icon='ue8bc' font='entypo-fontello' color='custom' custom_bg='#cccccc' custom_font='#ffffff' admin_preview_bg=''] [av_button label='Individuelle Pauschalangebote' link='manually,https://the-relocation-company.ch/relocation-services/#pauschal' link_target='' size='large' position='left' icon_select='yes' icon='uf123' font='flaticon' color='custom' custom_bg='#cccccc' custom_font='#ffffff' admin_preview_bg='']

The problem is that the buttons in the smartphone are not regularly arranged among each other.
I have already tried it with some simple CSS (that I know) but unfortunately it does not work properly on all devices.

/* Button immer linksbündig auch im IPhone*/
.avia-button.avia-size-large {
margin-left: 10px;
}
You can see the result on the Printscreens:
https://the-relocation-company.ch/wp-content/uploads/2018/05/Buttons.png
https://the-relocation-company.ch/wp-content/uploads/2018/05/Buttons2.png

Kann you help me with some CSS?

May 10, 2018 at 6:11 am #954332
Mike
Moderator
Hey J.,
This is because the buttons are set to display: inline-block;
Try this code in the General Styling > Quick CSS field:
```
@media only screen and (max-width: 767px) { 
.avia-button-wrap {
    display: table-row !important; 
}
}
```
This will make them line up for mobile screens:

But this code is too general, it could affect other buttons on your site, please add a custom class or ID for this element and add it to the code. Let us know if you want some help with doing that.

Best regards,
Mike
May 14, 2018 at 1:44 pm #956442

Jacky
Participant

Thank you very much. Now it works fine :)

May 14, 2018 at 11:08 pm #956737

Basilis
Inactive Moderator

Hi,

Glad we could help!
Please take a moment to review our theme and show your support https://themeforest.net/downloads
To know more about enfold features please check – http://kriesi.at/documentation/enfold/
Thank you for using Enfold :)

Best regards,
Basilis
Author

Posts

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

You must be logged in to reply to this topic.