Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #25209

    There is an issue with responsive design for a grid blog.

    On a mobile, instead of showing 1 article at a time, it is trying to squeeze 2 articles and featured images in 1 row and it looks absolutely horrible.

    Can you please fix it so only 1 image/post is shown in a row?



    Can you give us a link to your website? What mobile device do you have and what is the display resolution of this mobile device?





    best way to see it is here:


    I’m using a samsung s3, but you dont need a mobile device to see it.

    Just make the browser window really narrow and you’ll see.

    it alternates with 1, or 2 posts per row. 1 post looks good, 2 posts look really bad.



    Hi J,

    The theme’s grid is set up to make the blog-grid layout alternate between 1 full width and 2 half width blog posts in the blog grid layout. See: http://kriesi.at/themes/enfold/blog/blog-grid/

    So on your phone (s3) you’ll actually get 2 columns at 205px wide since the screen width is 720px. This is equivalent to the column size for the blog grid on desktop screens when using 3 columns and a sidebar as the demo does.




    The difference is that your example page has thumbnails that scale nicely.

    It’s not ideal, but at least it looks ok-ish..

    my thumbnails dont scale well at all, they basically get cut into thinner stips. so on mobile my portraits thumbs, instead of showing the whole face, show half an eye and a bit of ear… horrible.

    I regenerated all thumbnails again, but there is no scaling still.

    Very frustrating… especially since otherwise your theme actually loks really good.


    I think I know whta the proble might be.

    Problem only exists in Firefox. Chrome is OK

    I was given a piece of code a while back to fix the problem with full width blog.

    The core files restrict the width to only 600px, so i was given this:

    #top .fullsize .template-blog .post .entry-content, #top .fullsize .template-blog .post .entry-content>* {max-width: 100%;}

    Now, that archive full screen is buggered, showing thumbnails size 495×400 for when 3 in a row.

    But if i use a sidebar, it works well. and it is only bad in firefox, chrome is fine.



    Please add this css to your /css/custom.css file OR to quick css located in Enfold > Layout Styling… the text area at the bottom of that page.

    @media only screen and (max-width: 767px){
    .responsive #top .slide-entry {
    width: 100%;
    margin-left: 0%;
    .avia-content-slider .slide-entry-wrap {
    margin-bottom: 0px;



Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Responsive layout with grid blog problem’ is closed to new replies.