Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • July 9, 2020 at 8:58 pm #1229237
    Morticka

    Hello all,

    On my iphone the two buttons do want to align. I selected on aligned left, the other aligned right. Does not matter how big they are, even if they only have an icon in the button without any text, I can’t get them to align. Ive tried everything.

    Please help?

    Sincerely,
    Morticka

    ps: Images and other information in private content

    July 11, 2020 at 4:26 am #1229515
    Rikard

    Hey Morticka,

    Screencast.com seems to be down at the moment, so I couldn’t load your screenshots. Could you post them to imgur.com or Dropbox instead please?

    Best regards,
    Rikard

    July 11, 2020 at 10:38 am #1229577
    Morticka

    Hi Rikard,

    I just checked, screencast.com is working?

    Sincerely,
    Morticka

    July 12, 2020 at 4:08 pm #1229777
    Morticka

    Hello? Screencast is working? I also send you a link in the private area where you can see the problem live on mobile after you login?

    Can you help please?

    Sincerely,
    Morticka

    July 13, 2020 at 5:44 pm #1230004
    Victoria

    Hi Morticka,

    Credentials did not work for me. Could you please update the credentials?

    Best regards,
    Victoria

    July 13, 2020 at 5:46 pm #1230007
    Morticka

    Hi Victoria,

    Which credentials do you mean? The login information? That information is correct, did you check the boxes? :)

    Sincerely,
    Morticka

    July 13, 2020 at 8:13 pm #1230095
    Victoria

    Hi Morticka,

    Best regards,
    Victoria

    July 13, 2020 at 9:44 pm #1230116
    Morticka

    Hi Victoria,

    Yes, I see it, tested it also. I created a new account, since I can’t find the problem why the login information does not work. Information in the private content :)

    Sincerely,
    Morticka

    July 14, 2020 at 7:26 pm #1230392
    Victoria

    Hi Morticka,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #av_section_4 .flex_column {
    width: 47%;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    July 15, 2020 at 11:39 am #1230563
    Morticka

    Hi Victoria,

    Thx for looking at it :)

    Unfortunately, all the columns on my entire websit get smushed together in portrait mode on mobile (iphone, see images in private)

    Is there a solution to only target the buttons in the lessons on mobile? There’s got to be a way to make them responsive, right?

    Sincerely,
    Morticka

    July 19, 2020 at 7:22 pm #1231573
    Mike

    Hi,
    Sorry for the late reply and thanks for the login, I didn’t find the page in your screenshots but I see that the page you linked to contains two buttons at the bottom of the page that are not side-by-side. This is because each is in a 1/3 column which is full-width for mobile.
    So to adjust this I wrote this css, for the smallest screens of 320px to 345px I had to adjust the button padding a little.
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) {
  #top.page-id-285 #av_section_4 .flex_column.avia-builder-el-14,
  #top.page-id-285 #av_section_4 .flex_column.avia-builder-el-17 {
    width: 47% !important;
  }
}

@media only screen and (max-width: 767px) {
  #top.page-id-285 #av_section_4 .flex_column.avia-builder-el-16 {
  	display: none !important;
  }
  #top.page-id-285 #av_section_4 .flex_column.avia-builder-el-14 .avia-button.avia-size-large,
  #top.page-id-285 #av_section_4 .flex_column.avia-builder-el-17 .avia-button.avia-size-large {
    padding: 15px 5px 15px !important;
    min-width: 120px !important;
  }
}
@media only screen and (max-width: 345px) {
  #top.page-id-285 #av_section_4 .flex_column.avia-builder-el-17 {
  	    float: right !important;
  }
}

    After applying the css, please clear your browser cache and check.

    This css is specific to that page and the bottom two buttons because you don’t want this to be active for every page as it could have adverse effects.
    If you do want this to work on every similar layout then please add a custom class to the buttons such as “vorige-les” & “volgende-les” and a different custom class to each of the three 1/3 columns they are in and we will adjust the css.

    Best regards,
    Mike

    July 20, 2020 at 12:14 pm #1231692
    Morticka
    This reply has been marked as private.
    July 20, 2020 at 2:18 pm #1231718
    Mike

    Hi,
    Thank you for the feedback, glad to hear you found a solution, I was going to suggest centering them but figured you didn’t like it.
    I recommend centering them because you can have larger buttons for mobile users to use than when they are side-by-side.
    Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

    July 20, 2020 at 3:06 pm #1231739
    Morticka

    Hi Mike,

    You’re very welcome.

    Yes, you can close this ticket :D

    Sincerely,
    Morticka

    July 20, 2020 at 4:14 pm #1231781
    Victoria

    Hi Morticka,

    Great :)

    We are closing the thread.

    If you need further assistance please let us know in a new one.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Two seperate buttons on mobile iphone not aligned’ is closed to new replies.