Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • February 20, 2017 at 2:40 pm #749373
    andrzejkozdeba

    Hello,

    I have a problem with proper display of Grid Row Section on iPad and only on iPad.
    I have row with 4 columns: Text, image, text, image. On iPhone, iPad horizontal and on desktop everything looks nice but when you try to watch page on iPad vertical images partly cover texts.

    I tried to edit value of:

    @media only screen and (max-width: 767px)
    .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
    }

    @media only screen and (max-width: 767px)
    .responsive #top #wrap_all .av-flex-cells .no_margin {
    display: block;
    margin: 0;
    height: auto !important;
    overflow: hidden;
    padding-left: 8% !important;
    padding-right: 8% !important;
    }

    To 967, even 1200 but it doesn’t work. I’d like to have the same style on iPad vertical as on iPhone.
    I tried everything from tag “grid row”. None of codes worked for me.

    Can you help me?
    Best regards,
    Andrzej

    February 21, 2017 at 7:07 am #749749
    Rikard

    Hey Andrzej,

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

    Best regards,
    Rikard

    February 21, 2017 at 10:04 am #749847
    andrzejkozdeba

    Hej, sure.
    I send it in private msg.

    February 22, 2017 at 6:42 am #750261
    Rikard

    Hi,

    Thanks for that, though I can’t see anything like you described in your initial post on the front page. Where can we see the problem? If you have a screenshot highlighting it we might get a better understanding of the problem.

    Best regards,
    Rikard

    February 22, 2017 at 9:29 am #750346
    andrzejkozdeba

    OH sorry, problem is not at the home page but at page <private content>
    I also attach photo of issue on iPad.

    February 27, 2017 at 10:07 pm #752553
    Nikko

    Hi,

    Try adding this css code:

    @media only screen and (max-width:1024px) and (min-width:768px) {
  #top.page-id-417 .av-layout-grid-container .av_one_fourth {
    padding: 30px 50px !important;
    width: 50%;
    display: block;
    float: left;
  }

  #top.page-id-417 .av-layout-grid-container .av_one_fourth:nth-child(2n+1) {
    clear: both;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

    February 28, 2017 at 11:37 am #752845
    andrzejkozdeba

    :O :O :O
    It works just AWESOME!

    Thank you so much!

    March 2, 2017 at 7:13 am #754086
    Rikard

    Hi,

    Great, glad we could help :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    February 20, 2018 at 5:41 pm #914921
    mofix

    Hi there,

    Thanks for this. I’m nearly there. Since I habe 5 columns in the row, I get a white gap before the next gridrow which also get a whie gap.
    I have grid with 5×2, and the code above works almost on iPad. But is it possible to get the 1 column in the second row up to the last column on the first row. So that I don’t have a white gap 2 places at the end of each grid row. Please look at the url in private content in tablet/ipad view. Heres’s the code I’ve used.:
    :
    @media only screen and (max-width:1024px) and (min-width:768px) {
    #top .av-layout-grid-container .av_one_fifth {
    padding: 50px 50px !important;
    width: 50%;
    display: block;
    float: left;
    }

    #top .av-layout-grid-container .av_one_fifth:nth-child(2n+1) {
    clear: both;
    }
    }

    Please help, kindly regards, Mathilde

    February 20, 2018 at 5:43 pm #914922
    mofix

    sorry here’s the address to look with iPad/tablet.

    February 21, 2018 at 6:22 am #915288
    Victoria

    Hi mofix,

    Not really, I think it is better to have a 4 block grid on tablet size, you can hide this one with screen options for tablet size and show the other one, built just for that size.

    Let me know what you think.
    Best regards,
    Victoria

    February 21, 2018 at 4:00 pm #915535
    mofix

    Hi Victoria,
    Thanks for you reply. The point is, that it’s a 5th column row, 2 after each other, please look at the desktop view. So on tablet the fifth row stops naturally in the middle, and then the next row with five rows starts on the left side again. So where the white gap is on tablet, there’s now column to hide on the screen options, ’cause it’s no column there. So what I mean is, is there a possibility to move up on column on the second row, so that on tablet the rows stick together with no gaps after each 5 column?
    Now it’s like this on tablet
    1 2
    3 4
    5
    1 2
    3 4
    5
    How to get 1 up beside 5? :-) As you see at the css much can be done. Hope you understand better what I mean.
    Thanks, Mathilde

    February 22, 2018 at 6:01 am #915889
    Victoria

    Hi mofix,

    You cannot, it’s just fighting the html structure that is there in the first place. What I meant is hide the whole thing on the tablet screen and just show the other one, that you still need to build on the tablet size screens.

    mofix
    Best regards,
    Victoria

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