Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • October 13, 2017 at 10:05 pm #864164
    Zinizilla

    Hello,
    I have a problem with the promobox. It works fine on desktop and smartphone. But there is a problem on tablets in the vertical position (horizontal its ok). In vertical position the call-to-action-button is still on the right side and overlays the text. It looks awful. On the smartphone the button is then under the text – thats great. Can you give me a code to move the button under the text in the vertical position on tablets? On desktop and horizontal position on tablet its great the way it is. I just want to change the position of the button on tablets in vertical position.
    Thank you!

    Best regards,
    Andrea

    October 15, 2017 at 7:48 am #864440
    Rikard

    Hey Andrea,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    October 15, 2017 at 10:18 am #864462
    Zinizilla

    Hi Rikard,
    the site is in maintenance mode. How can I give you access?
    Best regards,
    Andrea

    October 16, 2017 at 6:06 am #864647
    Rikard

    Hi,

    You could give us login details to the site maybe? If you can then please post them in private.

    Best regards,
    Rikard

    October 16, 2017 at 2:14 pm #864814
    Zinizilla

    Hi,
    I postet it in private, but now I can’t see the post. Is this normal? Did you receive the message?

    October 17, 2017 at 5:25 am #865102
    Rikard

    Hi,

    No that is not normal and I can’t see any login details, could you try again please?

    Best regards,
    Rikard

    October 17, 2017 at 10:37 am #865219
    Zinizilla
    This reply has been marked as private.
    October 18, 2017 at 6:42 am #865548
    Rikard

    Hi Andrea,

    Thanks for that, I can see you site now. Please try this in Quick CSS:

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
.av_promobox .avia-button {
    right: initial !important;
    top: initial !important;
    position: initial !important;
}

.avia-promocontent {
    margin-right: 0 !important;
}
}

    Best regards,
    Rikard

    October 18, 2017 at 8:25 am #865572
    Zinizilla

    Hi Rikard,
    thanks for your answer! I added the code and its a bit better now, but not really good. The button is now under the text, but there ist absolutely no space between the button and the text. And the button should be centered (at the moment its on the right side), because the text is centered, too.
    Is this possible?
    Thank you so much for your help!

    Best regards,
    Andrea

    October 18, 2017 at 12:35 pm #865684
    Victoria

    Hi Andrea,

    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 (min-width: 768px) and (max-width: 1024px){

  .av_promobox.avia-button-yes.avia-builder-el-22 {
    text-align: center;
  }
  .av_promobox.avia-button-yes.avia-builder-el-22 .avia-button-right {
     display: inline-block;
      float: none; 
  }

  .av_promobox.avia-button-yes.avia-builder-el-22 .avia-button.avia-size-large {
    margin-top: 0;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    October 18, 2017 at 4:49 pm #865809
    Zinizilla

    Hi Victoria,
    thank you for your help! Unfortunately the code doesn’t work (neither in quick css nor in custom css). It looks exactly the same with the code as before (without any code). Or should I insert BOTH codes (from Rikard and yours)?
    What can I do now? Do you need more rights to look at my site?

    @ your note with the empty element: thank you!! I have no idea, what this is or where it comes from. I’m an absolute WordPress beginner – how can I delete this?

    October 19, 2017 at 6:35 pm #866396
    Victoria

    Hi Andrea,

    This is the code to use:

    

@media only screen and (min-width: 768px) and (max-width: 1024px) {
.av_promobox .avia-button {
    right: initial !important;
    top: initial !important;
    position: initial !important;
}

.avia-promocontent {
    margin-right: 0 !important;
}
  .av_promobox.avia-button-yes.avia-builder-el-22 {
    text-align: center;
  }
  .av_promobox.avia-button-yes.avia-builder-el-22 .avia-button-right {
     display: inline-block;
      float: none; 
  }

  .av_promobox.avia-button-yes.avia-builder-el-22 .avia-button.avia-size-large {
    margin-top: 0;
  }
}

    Can you give that user admin rights, so that we can have a look at the Advanced Layout Builder elements on it?
    Best regards,
    Victoria

    October 19, 2017 at 10:57 pm #866505
    Zinizilla
    This reply has been marked as private.
    October 23, 2017 at 2:55 am #867410
    Ismael

    Hi,

    The promobox element looks fine on tablet portrait view. Is this fixed? If not, please provide a screenshot on imgur or dropbox.

    Best regards,
    Ismael

    October 23, 2017 at 8:51 am #867496
    Zinizilla
    This reply has been marked as private.
    October 23, 2017 at 11:23 am #867560
    Victoria

    Hi Andrea,

    Please remove previous code and put this one.
    Here is the complete 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 (min-width: 768px) and (max-width: 1024px) {
  .av_promobox .avia-button {
    right: initial !important;
    top: initial !important;
    position: initial !important;
  }
  .avia-promocontent {
      margin-right: 0 !important;
  }
/****** Planet Self ******/
  .av_promobox.avia-button-yes.avia-builder-el-22 {
    text-align: center;
  }
  .av_promobox.avia-button-yes.avia-builder-el-22 .avia-button-right {
     display: inline-block;
      float: none; 
  }

  .av_promobox.avia-button-yes.avia-builder-el-22 .avia-button.avia-size-large {
    margin-top: 0;
  }


/****** selbstcoaching page ********/
  .av_promobox.avia-button-yes.avia-builder-el-29 {
    text-align: center;
  }
  .av_promobox.avia-button-yes.avia-builder-el-29 .avia-button-right {
     display: inline-block;
      float: none; 
  }

  .av_promobox.avia-button-yes.avia-builder-el-29 .avia-button.avia-size-large {
    margin-top: 0;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    October 23, 2017 at 6:51 pm #867790
    Zinizilla

    Hi Victoria,
    this code works perfect! Thank you so much!!
    One last question: You said, you would remove the empy code (your screenshot below). How (and where) can I do this? Or can you fix it for me with the admin rights? That would be great!

    Best regard,
    Andrea

    October 24, 2017 at 6:37 am #867986
    Ismael

    Hi,

    I’ll ask @Victoria to check the thread. Please wait for her response.

    Best regards,
    Ismael

    October 24, 2017 at 9:02 am #868020
    Victoria

    Hey!

    Those are the empty columns that you use to build the layout of your pages. We cannot delete them since they serve a purpose but on smaller screens, you should hide them.
    And it is very easy to do, just set the hide on mobile option.
    Image 2017-10-24 at 10.01.30.png

    If you need further assistance please let us know.
    Best regards,
    Victoria

    October 24, 2017 at 9:22 pm #868404
    Zinizilla

    Ohhh, great! Now I understand it! That was a really helpful advice! Thank you!!

    All my questions are solved – you can close the thread!:)

    October 25, 2017 at 4:19 pm #868787
    Victoria

    Hi Zinizilla,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • You must be logged in to reply to this topic.