Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • June 29, 2014 at 12:24 am #284900
    nvanwijkvliet

    Hi there,

    I am using the post slider on my homepage to display my blog. It’s set to display 2 columns and a total of 4 posts, which is fine for desktop, but it is also displaying two columns on smartphones, which makes the columns too small and ‘stretchy’. How can I set the mobile version to display only one column with the 4 posts stacked on top of each other? I am also using a portfolio grid on the homepage, which automatically displays 1 item in 1 row for the mobile version.

    Thanks for your help!

    Best regards,

    Nathalie

    June 29, 2014 at 7:43 am #284968
    Ismael

    Hey Nathalie!

    Thank you for visiting the support forum!

    Try to add this on Quick CSS or custom.css:

    @media only screen and (max-width: 767px) {
.avia-content-slider .slide-entry {
width: 100%;
}
}

    Cheers!
    Ismael

    June 29, 2014 at 3:48 pm #285017
    nvanwijkvliet

    Hi Ismael,

    Thanks for your quick reply. I added the media query to the quick CSS, but the post slider still displays 2 columns instead of 1 on my Samsung Galaxy S3 Mini. Do you have any other suggestions that might change the layout?

    Thanks!

    Nathalie

    June 30, 2014 at 4:02 pm #285245
    Yigit

    Hey!

    Can you post the link to your page so we can check it on our mobile devices? Also, please make sure that you flushed browser cache on your mobile device

    Regards,
    Yigit

    July 2, 2014 at 11:48 pm #286435
    nvanwijkvliet
    This reply has been marked as private.
    July 3, 2014 at 7:07 pm #286814
    Yigit

    Hey!

    Please try adding following code to Quick CSS instead

    @media only screen and (max-width: 768px) {
div.avia-content-slider-inner article { width: 100%; margin: 0; }}

    Cheers!
    Yigit

    July 3, 2014 at 8:10 pm #286845
    nvanwijkvliet

    Hi Yigit,

    Thank you, but it is still not working :-(. The media query itself works fine, I tested it changing the background color to black and it does change it. However, there are still two posts displayed next to each other, so somehow that part of the query is not working.
    Any other suggestions I might try?

    Cheers,

    Nathalie

    July 4, 2014 at 6:56 am #287047
    Ismael

    Hey!

    Thank you for the update.

    The screen resolution of the the device you’re using spans up to 960px. Please try this:

    @media only screen and (max-width: 960px) {
.avia-content-slider .slide-entry {
width: 100%;
}
}

    Best regards,
    Ismael

    July 4, 2014 at 2:29 pm #287202
    nvanwijkvliet

    Hi Ismael,

    Still no luck, the media query again works fine (I changed the background color to green and it works on my Samsung S3 Mini), but the columns are still not stacked…

    Best regards,

    Nathalie

    July 4, 2014 at 5:27 pm #287295
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .slide-entry { width: 100%; }}

    Regards,
    Yigit

    July 4, 2014 at 8:25 pm #287361
    nvanwijkvliet

    Hi Yigit,

    Thanks, that solved it!

    Cheers,

    Nathalie

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Change number of posts/columns displayed in post slider on mobile version’ is closed to new replies.