Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • June 12, 2018 at 9:26 pm #971863
    nimo1024

    I would like to present the team on our site (https://drzup.de/team/). I represent three people in a row, so I use 1/3 boxes.
    I would like to place an image, a text below and an accordion below. But if the text is not exactly the same length as the other two, the accordion will not be displayed at the same height as the other two.

    If I place the accordion in another box below it I have the problem in the mobile view that the order of the representation (picture, text, accordion) is no longer correct.

    What can I do?

    June 13, 2018 at 9:09 am #972122
    Rikard

    Hey nimo1024,

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

    Best regards,
    Rikard

    June 13, 2018 at 5:01 pm #972373
    nimo1024

    The Link is: https://drzup.de/team/

    June 14, 2018 at 3:51 pm #972846
    Victoria

    Hi nimo1024,

    The accordion has to be in the same container with the image and the text and just try to adjust alignment with css.

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

    June 14, 2018 at 4:56 pm #972906
    nimo1024

    And how can I adjust with css?

    June 15, 2018 at 3:25 pm #973359
    Victoria

    Hi nimo1024,

    Did you move the accordions to the same containers?

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    June 15, 2018 at 3:51 pm #973367
    nimo1024

    I did!

    June 16, 2018 at 9:34 pm #973760
    Victoria

    Hi nimo1024,

    Thank you.

    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) {

  #after_full_slider_1 .avia_textblock  {
    height: 125px;
  }
  #after_full_slider_1  .flex_column.av_one_third.avia-builder-el-18  .avia_textblock,
  #after_full_slider_1  .flex_column.av_one_third.avia-builder-el-22  .avia_textblock ,
   #after_full_slider_1  .flex_column.av_one_third.avia-builder-el-26  .avia_textblock {
    height: 200px;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 18, 2018 at 8:26 am #974088
    nimo1024

    Thank you so much for working so far.

    Now, however, the problem is that between the H2 and the dividing lines is a large distance.

    June 19, 2018 at 5:01 am #974627
    Ismael

    Hi,

    Thanks for the update. What do you mean by “dividing lines”? Mind sending a screenshot? Use imgur or dropbox.

    Best regards,
    Ismael

    June 19, 2018 at 7:53 am #974642
    nimo1024

    https://www.dropbox.com/s/z73ok0vbsa50jwc/1.JPG?dl=0
    https://www.dropbox.com/s/kj2y65dko5u776x/2.JPG?dl=0

    • This reply was modified 6 years, 3 months ago by nimo1024.
    June 20, 2018 at 4:48 am #975071
    Ismael

    Hi,

    Thanks for the screenshot.

    The css code above is being applied to every text blocks in the page or the section after the full width slider. Please turn on the custom css class field so that you can apply custom selectors to the appropriate text blocks. Use that selector in place of the generic “avia_textblock” selector.

    // https://kriesi.at/documentation/enfold/intro-to-advanced-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

    After adding the custom css class attribute of your choice, you can apply it to the above css code like so.

    @media only screen and (min-width: 768px) {

  #after_full_slider_1 .custom-css-class {
    height: 125px;
  }
  #after_full_slider_1  .custom-css-class,
  #after_full_slider_1  .custom-css-class ,
   #after_full_slider_1  .custom-css-class {
    height: 200px;
  }
}

    Replace “.custom-css-class” with your own.

    Best regards,
    Ismael

    June 21, 2018 at 4:35 pm #975846
    nimo1024

    Hello,

    I should remove the code from Quick CSS?
    After I have activated the custom css class field, where should I insert the described code and especially for which element? Custom CSS class of the textbox under the images?
    What does “Replace “.custom-css-class” with your own.”?

    June 21, 2018 at 7:51 pm #975937
    Victoria

    Hi nimo1024,

    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) {
#after_full_slider_1 .headers .avia_textblock {
  height: auto;
  min-height: 50px;
}

body .container_wrap .headers .hr.avia-builder-el-last {
  margin: 0;
}
.togglecontainer.move-higher {
    margin-top: 10px;
}
}

    I added the class to the two accordions at the bottom and adjusted their margins. I added the code to Quick css. Please check the page.

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 26, 2018 at 3:09 pm #977969
    nimo1024

    On the page the problem has been solved, but now other pages are completely moved and contracted.

    July 3, 2018 at 8:47 pm #980748
    Victoria

    Hi nimo1024,

    Try the code like this instead:

    
@media only screen and (min-width: 768px) {
  .page-id-692 #after_full_slider_1 .headers .avia_textblock {
    height: auto;
    min-height: 50px;
  }

  body.page-id-692 .container_wrap .headers .hr.avia-builder-el-last {
    margin: 0;
  }
  .page-id-692 .togglecontainer.move-higher {
      margin-top: 10px;
  }
}

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

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