Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 22, 2020 at 6:12 pm #1195270
    mbosse99

    Team:

    the blog grid on my homepage currently shows 3 columns. However, if I watch it on a mobile there is only one column with a very large thumbnail.

    I’d like to set it up such on mobile it only shows 2 columns with a respective small thumbnail. or alternatively with a listed view: thumbnail left, title right.

    Kindly teach me how to do both.

    Thanks!
    Magnus

    • This topic was modified 4 years, 9 months ago by mbosse99.
    March 24, 2020 at 3:46 pm #1196515
    Victoria

    Hey mbosse99,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .avia-content-slider-even .slide-entry.slide-parity-odd, 
    .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even,
    .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.first {
        clear: none;
        width: 48%;
    }
    .responsive #top #wrap_all .avia-content-slider-even  .slide-entry-wrap .slide-entry.slide-parity-even.flex_column {
        margin-left: 4%;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 24, 2020 at 4:18 pm #1196651
    mbosse99

    That looks much better actually! Now could we have a few px space between the entries – see image:

    https://snipboard.io/CD94uO.jpg

    Best and thanks again,
    Magnus

    March 25, 2020 at 5:50 am #1197567
    Rikard

    Hi Magnus,

    Please try this CSS instead:

    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .avia-content-slider-even .slide-entry.slide-parity-odd, 
    .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even,
    .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.first {
        clear: none;
        width: 48%;
    }
    .responsive #top #wrap_all .avia-content-slider-even  .slide-entry-wrap .slide-entry.slide-parity-even.flex_column {
        margin-left: 4% !important;
    }
}

    Best regards,
    Rikard

    March 25, 2020 at 11:18 am #1197624
    mbosse99

    Sorry, no changes. The blog entries still stick to each other on mobile (here an older Android, but on iOS as well):

    https://snipboard.io/LtIUiV.jpg

    Thanks,
    Magnus

    • This reply was modified 4 years, 9 months ago by mbosse99.
    March 25, 2020 at 7:13 pm #1197811
    Victoria

    Hi Magnus,

    Please add this code too:

    
@media only screen and (max-width: 767px) {
 .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even {
    margin-left: 4%;
   }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    March 26, 2020 at 8:56 am #1197974
    mbosse99

    Excellent, that solved it – thanks!

    March 26, 2020 at 4:41 pm #1198099
    Victoria

    Hi mbosse99,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Change blog grid setup – mobile vs PC?’ is closed to new replies.