Responsive mode on latest blog module
By Philidia on Friday, 31 July 2015
Posted in Technical Issues
Likes 0
Views 594
Votes 0
Hello!

I'm actually testing the new Easyblog, and, since you made a new module that can display posts into a nice grid, I'm trying it to replace my current module, ARRA Articles.

However, I have a quick issue. The horizontal mode doesn't look responsive, and posts are resized, making the page a bit weird. I was expecting the 3 columns at full size becoming 1 column when resized to a very small width. Is it an intended behavior? Am I doing something wrong? The same thing happen if you try to display posts with the frontpage menu link and the nickel template.

I use the latest version, 5.0.17.
No problem Philidia, we'll also be addressing this issue in 5.0.18
Mark
·
Saturday, 01 August 2015 04:09
·
0 Likes
·
0 Votes
·
0 Comments
·
Hey Philidia,

Thanks for reporting, I will consult with our designer regarding this responsive issues.

To temporary fix this, you can apply following css code in your current template css file :


@media (max-width:768px) {

     div#fd.eb .mod-items-grid>.mod-grid {

             width: 100% !important;

    }

}
Arlex Wong
·
Saturday, 01 August 2015 00:11
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank you for the answer

Will the same code work also on the page that use the nickel theme with the component instead of the module?
Philidia
·
Saturday, 01 August 2015 00:16
·
0 Likes
·
0 Votes
·
0 Comments
·
Hey Philidia,

I already consult with our designer, this actually was known issue, perhaps you can provide us with your FTP access so we can apply the fix in your test site?
Arlex Wong
·
Saturday, 01 August 2015 00:23
·
0 Likes
·
0 Votes
·
0 Comments
·
Done!
Philidia
·
Saturday, 01 August 2015 00:28
·
0 Likes
·
0 Votes
·
0 Comments
·
Hey Philidia,

I have take a look on your template file, but it seems like when I apply the code in your current template css file, it didn't update my new css code on browser, perhaps you will know how to recompile the styling in your current template ?

The following css code is fix for your module and blog listing styling.


#fd.w320 .mod-items-grid > .mod-grid {

     float: none;

     width: 100% !important;

}



div#fd.eb .eb-masonry.w480 .eb-masonry-post, 

div#fd.eb .eb-posts.w480 .eb-masonry-post {

    width: 100% !important;

    position: static !important;

}


Hope this helps.
Arlex Wong
·
Saturday, 01 August 2015 01:19
·
0 Likes
·
0 Votes
·
0 Comments
·
Oh, I forgot this. The template uses Gantry, so, editing css files won't change anything, we must change .less files, or create a custom css file. I'll do it myself, thanks for giving me the code
Philidia
·
Saturday, 01 August 2015 03:41
·
0 Likes
·
0 Votes
·
0 Comments
·
I'd like to add a last thing. Not sure if I should make a new post, but did you also know that there is a small difference between Firefox/Chrome? I mean, when it's the component + nickel theme, I get this on Chrome :
http://i.imgur.com/M2AyAyE.jpg

While I get this on Firefox :
http://i.imgur.com/qLvcdeo.jpg

As you can see, pics are a bit outside of their boxes (But I found this issues on EB 3.9), but also, there are only 2 columns on Firefox, with the same settings.
Philidia
·
Saturday, 01 August 2015 05:18
·
0 Likes
·
0 Votes
·
0 Comments
·
Hey Philidia,

I am really sorry for the delay of this reply as it is a weekend for us here.
I'd like to add a last thing. Not sure if I should make a new post, but did you also know that there is a small difference between Firefox/Chrome? I mean, when it's the component + nickel theme, I get this on Chrome :
http://i.imgur.com/M2AyAyE.jpg

While I get this on Firefox :
http://i.imgur.com/qLvcdeo.jpg

Hmm, I can't replicate this in my Windows Firefox/Chrome browser, take a look of my screenshot : http://screencast.com/t/NE6YHsiHocA(FF) || http://screencast.com/t/2EkB5W9P (Chrome)
Make sure your browser zoom level it set to 100%.


As you can see, pics are a bit outside of their boxes (But I found this issues on EB 3.9), but also, there are only 2 columns on Firefox, with the same settings.

I have help you set to use full width from your backend > Easyblog > settings > layout > post cover > post cover listing ( http://screencast.com/t/4HrL1YbKj3Y ) it should work fine now.

Hope this helps.
Arlex Wong
·
Saturday, 01 August 2015 11:26
·
0 Likes
·
0 Votes
·
0 Comments
·
The last version of Easyblog solved the problem. Thank you very much
Philidia
·
Saturday, 15 August 2015 19:11
·
0 Likes
·
0 Votes
·
0 Comments
·
You are most welcome Philidia. Glad that your issue has been resolved now.
Ezrul Fazwan
·
Monday, 17 August 2015 12:26
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post