Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 28, 2014 at 10:31 am #342112
    originaltours

    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!

    October 28, 2014 at 12:15 pm #342168
    originaltours

    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.

    October 29, 2014 at 4:03 pm #342766
    Yigit

    Hey!

    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 – http://i.imgur.com/dhnq1oq.png ? :)

    Cheers!
    Yigit

    November 4, 2014 at 10:33 am #345794
    originaltours

    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!

    November 6, 2014 at 1:06 am #346897
    Andy

    Hi!

    try with this one:

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

    Cheers!
    Andy

    November 11, 2014 at 11:26 am #349264
    originaltours

    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!

    November 12, 2014 at 4:18 am #349839
    Josue

    Hi!

    Try with this code:

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

    Best regards,
    Josue

    November 18, 2014 at 11:01 am #352883
    originaltours

    Thanks!, ticket can be closed.

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