-
Posts
-
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?
Hi,
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?
Regards,
Ismael
Hi.
best way to see it is here:
http://www.candidtown.com/category/galleries/
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.
J
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.
Regards,
Devin
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.
Hi,
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;
}}Thanks,
Nick
- The topic ‘Responsive layout with grid blog problem’ is closed to new replies.