Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #342112

    Hello Kresi,

    Still loving the template enfold but I have CSS question I cannot fix.

    I use the AV builder to show our trips in a grid layout. See attached screen dump. What I would like is that users who see the site on an iPad or similar only see one item on a row. Of course in a way that the thumbnail is also resized.

    Layout at this moment portrait iPad

    When they turn to landscape a 2-column layout is fine, no need to change that.

    Can you help me with this css problem? Thanks in advance!


    Hello, a little update. I’ve seem to fix it a little bit by copying the style I use for the phone and change the width to 900px. See style:

    @media only screen and (max-width: 967px) {
    .responsive #top #wrap_all .slide-entry {
    width: 100%;
    margin-left: 0;

    I have two problems left, can you help me with that?
    – The image is not big enough… see red arrow
    – Something seems wrong with the padding between the items who are on the same row

    padding and image fix needed

    Thanks in advance for your support.



    Please add following code to Quick CSS as well

    @media only screen and (max-width: 990px) {
    .avia-content-slider .slide-image, .avia-content-slider .slide-image img { width: 100%; }}

    Seems like you figured out border issue – ? :)



    Thanks for the support. With the border issue I added a padding but now the space between two items on the same row is not equal to the space between the items who were on the following row. Duuuhhhh, let the image explain. Thanks in advance for your support.

    Spacing between items when viewed on a iPad one column.

    When I change the style for the spacing of the items both spacing will increase so I still end up with a difference.

    Thanks Yigit!



    try with this one:

    .avia-content-slider .slide-entry-wrap {
    float: none;



    Hello Andy,

    If I add this the items float to eachother, see screenshot. Any idea how to fix this on the desktop? On the iPad it is ok!

    floating to eachother

    Thanks Andy!



    Try with this code:

    @media only screen and (max-width: 1024) {
        .avia-content-slider .slide-entry-wrap {
            float: none;

    Best regards,


    Thanks!, ticket can be closed.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘1 column layout on iPad portrait’ is closed to new replies.