Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 15, 2015 at 2:56 am #444717
    johnkentsf

    Hello,

    I am wondering if it is possible to have the post show up as a single column using the masonry content element.
    I would especially like this to work on a phone screen.
    At the moment I have my settings set for 2 column but there is no option to chose single column.
    Here is the site I am referring to
    http://sflocations.com/san-francisco-location-scout-home/clients/

    Thanks in advance

    John

    May 16, 2015 at 9:02 am #445252
    ohsec

    I also have same question.

    I want adjust masonry layout from 1 column to 2 column in mobile layout.

    Thanks in advance

    ;D

    May 18, 2015 at 5:08 pm #445843
    Yigit

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    #top .container .av-masonry-col-flexible .av-masonry-entry {
  width: 100%;
}


    @ohsec     Can you please post the link to your page?

    Regards,
    Yigit

    May 18, 2015 at 11:15 pm #446108
    johnkentsf

    Thanks Yigit!

    Perfect :)

    John

    May 18, 2015 at 11:18 pm #446112
    Yigit

    Hi!

    You are welcome, glad we could help! :)
    If you do not mind, we will keep the thread open for @ohsec, if you have any other questions or issues, please feel free to start a new one

    Regards,
    Yigit

    May 18, 2015 at 11:56 pm #446128
    johnkentsf

    Thanks Yigit —

    I may have spoken to soon :)
    the css, looked great on mobile but I just checked the desk top and found that the css made the desktop a single column as well.
    I added some css, here is what I used
    @media only screen and (max-width: 767px) #top .container .av-masonry-col-flexible .av-masonry-entry {
    width: 100%;
    }

    I had no success other than reverting the single column back to a two column.
    Do you have any advice or better css to try.

    regards,

    John

    May 19, 2015 at 7:56 pm #446670
    Yigit

    Hey!

    Please use the code as following 

    @media only screen and (max-width: 768px) {
#top .container .av-masonry-col-flexible .av-masonry-entry {
  width: 100% !important;
}}

    Regards,
    Yigit

    May 19, 2015 at 8:43 pm #446694
    johnkentsf

    Yigit,

    Perfect! all screens looking beautiful now.

    Regards,

    John

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Masonry Content Element – Single Column – How to achieve for mobile’ is closed to new replies.