Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 16, 2019 at 6:20 pm #1166524
    Advantage09

    Hi, I have a website that I can not get to look right on tablet. Not in portrait or in landscape view. On desktop and on mobile phone it looks as it should. But I can not get the columns to stack on top of each other on my iPhone tablet. On one page I have three columns and using the following css:

    @media only screen and (max-width: 1140px) {
    div.av_one_third {
    width:100%!important;
    }
    }

    It makes the three columns stack on top of each other. But this also makes the footer stack, and I do not want that as the rest of the page has a “desktop view”
    A second page has a 2/3 and a 1/3 column so the css above does not work correctly on this page. It makes the 1/3 column go under the 2/3 column, but the it does not span the text over the now empty space to the right.

    What I really need is for the footer to have three columns on tablet, and for the pages

    Rom til leie

    Historisk sus

    To stack the columns on top of each other and for text to span across.

    Any idea on how to achieve this? Any help would be appreciated.

    December 19, 2019 at 9:08 am #1167651
    Ismael

    Hey Advantage09,

    Thank you for the update.

    Try to move the 1/3 columns inside a color section, then apply a unique ID or class attribute to that color section so that you can apply a different style to the columns inside it. If the ID is “custom-section” for example, the css code would look something like the following.

    
@media only screen and (max-width: 1140px) {
    #custom-section .av_one_third {
       width:100%!important;
    }
}

    You can also apply the class attribute to the columns directly.

    // https://kriesi.at/documentation/enfold/add-custom-css/

    Best regards,
    Ismael

    July 5, 2020 at 9:36 am #1228014
    s29ers

    hi

    i have a layout with a section that has two cols as follows
    col a with pic, col b with text
    col c with text, col d with pic
    etc.
    fairly standard layout. on mobile screens < 989px, i wanted
    col a with pic
    col b with text
    col c with pic
    col d with text

    I didn’t want to create two sections, one for mobile one for desktop.

    so i tried

    @media only screen and (max-width: 989px) {
    #top div .av_two_fifth,
    #top div .av_three_fifth {
    margin: 0;
    width: 100%;
    }
    .flipcols2 .avia-section .template-page .entry-content-wrapper {
    display: flex;
    order: 1;
    }
    }
    that gave me full width which i need for each col.
    but .flipcols2 as a class on cols a and c and other attempts did not put the cols in order as above.

    can you please help with this and where to add the class or ID.

    credentials below.

    thanks

    July 7, 2020 at 10:07 pm #1228698
    Ismael

    Hi,

    Thanks for chiming in.

    You have to apply the order property to the child elements or the columns, and the flex display property should be applied to the parent container, in this case the color section.

    // https://www.w3schools.com/cssref/css3_pr_order.asp
    // https://www.w3schools.com/css/css3_flexbox.asp

    The class and ID attribute can be added in the element’s Advanced > Developer Settings toggle.

    If you want to learn more about the flexbox layout, please check this article.

    // https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Best regards,
    Ismael

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