Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 13, 2017 at 10:50 pm #760309
    NieuweDag

    On low resolution screens (1024px), or tablets in portret-display mode, there is a confusing overlapping display of buttons in 1/5 content-elemements.

    If buttons are placed in separate responsive 1/5 content-elemements, within a separate color section, I would expect the buttons to be placed vertically stacked within the same color section, when there is not enough horizontal space to display in 1 row.

    Could you please provide me with some helping tips to fix this?

    Note:
    ‘large’ buttons were recently adjusted in quick/custom CSS to force a minimal width of the buttons (208px), although the problem also occured without the following code in custom CSS:

    .avia-button.avia-size-large { min-width: 208px; }

    March 15, 2017 at 1:33 pm #761406
    Yigit

    Hey NieuweDag,

    Please edit your color section element where you have your buttons and give it a unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png (“buttons” in example below) and add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 1024px) { 
#buttons .flex_column { width: 100% !important; margin-left: 0 !important; }
}

    Best regards,
    Yigit

    March 15, 2017 at 11:23 pm #761672
    NieuweDag

    Thanks for the reply, although this is not exactly the result I aimed for. It is not my goal to align 4 buttons vertical in a horizontal color section.
    Do you think it would be possible to show them in 2×2 instead, so there is still some horizontal effect?.

    Furthermore, the blue bar with buttons is actually placed on each page of the site, which would mean a lot of unique-ID’s and corresponding lines in the custom CSS (growing with each extra page to come). If there could be a custom CSS fix, it would be of much help..

    March 15, 2017 at 11:31 pm #761673
    NieuweDag

    The suggested custom CSS fix per page/unique ID per color-section doesn’t just change the view on 1024 pixels, it changes a supposed horizontal button bar into a consistent vertical button bar.

    I am looking for a solution where the horizontal 5 column button bar remains as it is supposed to display on all displays > 1024 width, only to show responsivly adjusted lay-out on displays <1024px width.

    March 19, 2017 at 4:32 pm #763228
    Victoria

    Hi NieuweDag,

    Try this one and let us know if this is something like you were aiming for.

    

@media only screen and (max-width: 1070px) {
  /* Add your Mobile Styles here */
  body.page.page-id-981 #av_section_4 .avia-builder-el-first {
    margin-top: 0.5%;
    margin-right: -7%;
  }

  body.page.page-id-981 .avia-button.avia-size-large {
    padding: 10px 20px 10px;
    font-size: 13px;
    min-width: 140px;
    width: 160px;
    }
}

body.page.page-id-981 #av_section_4 .avia-builder-el-first {
  margin-right: -6%;
  margin-left: -1%;
}

body.page.page-id-981 div .av_one_fifth {
    margin-left: 7%;
}

body.page.page-id-981 #av_section_4.avia-button.avia-size-large {
    padding: 10px 16px 10px;
    font-size: 13px;
    min-width: 190px;
}

    Best regards,
    Victoria

    March 19, 2017 at 5:24 pm #763253
    NieuweDag

    Hi Victoria, I am looking for a custom css solution for the entire site, since the specific horizontal blue button bar is on almost every page.
    Your code seems to target only 1 specific page, with a whole lot of changes.

    March 21, 2017 at 5:30 pm #764265
    Victoria

    Hi NieuweDag,

    Yes, but you can remove the class page-id-981 and specify other selectors after a comma, that you want these rule to work for and you can give that section an id of av_section_4 on every page and it will work for the whole site.

    Let us know if you have any more questions.

    Best regards,
    Victoria

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