Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 23, 2016 at 2:28 pm #636787
    Marsha

    Hi,

    I have a number of pages on my site which have a colour section, followed by a full width submenu and then a grid row element with a 3/3 (2 +1) column layout. Inside the first column of the 2/3 grid row I have blog post content elements with two columns. These look great on Desktop and Tablet but on mobile are somewhat difficult to read (as shown in this screenshot from my iPhone 6 – http://newdev.mygc.com.au/wp-content/uploads/2016/05/2columnblogpostelement.png).

    On another page I played around with pulling in the blog posts one at a time in 1/2 columns inside the 2/3 grid row, with offsets so they would flow chronologically… this looks like this on mobile – http://newdev.mygc.com.au/wp-content/uploads/2016/05/SingleColumn.png.

    Is it possible to achieve this layout inside 2/3 grid row so I can use the blog post element with two columns and 8 articles displayed to a page, and pagination so people can browse older articles. I have a lot of content and the majority of visitors to our site are from mobile devices. I don’t think a single column layout with as much content as we have looks as good and I’m sure someone with more experience with CSS would be able to find a way to display the posts one under the other (unfortunately this is not my area of skill).

    Be most grateful for your assistance with any CSS that will modify this view.

    Kind regards,
    Marsha

    May 26, 2016 at 3:06 am #638397
    Ismael

    Hey Marsha,

    Thank you for using Enfold. Sorry for the late response.

    Looks like you managed to figure it out by adding multiple blog posts element. Is that solution good enough for you? If you need more help, please create a test page so that we can inspect the issue.

    Best regards,
    Ismael

    June 22, 2016 at 3:00 am #651829
    Marsha

    Hi Ismael,

    Sorry to take so long to reply, been working on other areas of the site. I have now removed the post content element from within the grid row element because I have assigned a side bar to the page. When I have the blog post element set to grid layout and 2 columns, on mobile they display side by side. I would much prefer these to be one under the other on mobile view, as occurs if I set it to 3 columns. Can you please assist? I have included a link to the page where this is occurring in the private content.

    Cheers,
    Marsha

    June 24, 2016 at 5:17 am #652818
    Ismael

    Hi,

    Please add this in the Quick CSS field:

    @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 {
    width: 100%;
    margin-left: 0;
    margin-bottom: 20px;
}
}

    Best regards,
    Ismael

    June 26, 2016 at 5:20 am #653470
    Marsha

    Hi Ismael,

    When I added that code the first column displays 100% but the second does not. I have enclosed a link to a screenshot in the private content.

    Cheers,
    Marsha

    June 29, 2016 at 5:47 am #654602
    Ismael

    Hi,

    It works in the browser inspector. Please try this instead:

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

    Make sure that the there are no missing brackets in the css media queries.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.