On mobile view big grid has a different view now we can not see all.
I understand that we can move from right to left second line pictures. but a first time visitor how he will now it works like that.
So there must be a way to show all
Or it must be like before.
Hi,
You can use Big Grid Slider it will be displayed like in version 4 on mobile devices(just set post limit to at least 8) – https://forum.tagdiv.com/topic/homepage-issue-with-big-grid-3-style-1/#post-55259
If you want to use another Big Grid you will need custom work to achieve that, so I suggest to get someone to help you as we cannot provide custom work at this time, sorry!
Thanks!
I have done with 8. And i see that if the category doesnt have 8 post. Doesnt work.
I hope you find a solution to this big grid.
As a design very good by somebody must know that how it works. For the one who doesnt know, thats ia a problem. 99% of my visitors doesnt know that.
Regards
Want to borrow some of mine? Because they’re figuring it out just fine. Even gotten a couple of compliments on it.
Hi,
@lospicos Unfortunately this is how Big Grids were designed and you will need custom work to change how they are displayed on mobile. You can try this custom css for Big Grid 2, but if you need more customizations I suggest to get a professional to do this for you as we cannot provide custom work for the moment, sorry! This css code is a good start to look like you want – http://screencast.com/t/itZMkH9TDKM
@media (max-width: 767px) {
.td_block_big_grid_2 .td-big-grid-wrapper .td-big-grid-scroll {
white-space: normal !important;
}
.td_block_big_grid_2 .td-big-grid-wrapper .td-big-grid-scroll .td-big-grid-post-1 {
width: 100% !important;
}
.td_block_big_grid_2 .td-big-grid-wrapper .td-big-grid-scroll .td-big-grid-post-2, .td-big-grid-scroll .td-big-grid-post-3 {
width: 49% !important;
margin-left: 0 !important;
}
.td_block_big_grid_2 .td-small-thumb .entry-thumb {
width: 120% !important;
}
.td_block_big_grid_2 .td-big-grid-post-1 {
margin-bottom: 3px !important;
}
.td_block_big_grid_2 .td-big-grid-post-2 {
margin-right: 3px !important;
}
.td_block_big_grid_2 .td-big-grid-post.td-small-thumb .td-big-grid-meta .entry-title {
font-size: 14px;
}
}Thanks!
thanks.On galaxy s5 5,1″ screen works good. But on a mobile that has 5,5″ no, like before.
Thanks
Hi,
Unfortunately we cannot provide custom work, I have provided an example how this can be made, so if you need additional customizations and you don’t know how to do it, I suggest to hire a freelancer from sites like – http://studio.envato.com/
Thanks!
I need a solution for big grid 1. thanks
Hi,
@lospicos I have provided above an example, so you can try to modify this also the Big Grid 1 block on mobile. I suggest to hire a profesional developer to do this for you, if you don’t know how to do it. We would have gladly made it for you, but for the moment we cannot offer custom work, sorry!
Thanks!
Dear Alin
On my home page i am using big grid one. At least give me starting point, What i need
5 of them as a row.
Please help
He did give you a starting point. The above code is for the grid if you can code you should be able to figure something out.
If you can’t hire someone who can.
I have tried but.
That codes was for
first row 1
second and 3rd row two blocks.
I need 1 post in every row.
Regards
Another thing to hire somebody who knows tagdiv css codes. Other to discover how it works wll take time.
ı have done this
@media (max-width: 767px) {
.td_block_big_grid_1 .td-big-grid-wrapper .td-big-grid-scroll {
white-space: normal !important;
}
.td_block_big_grid_1 .td-big-grid-wrapper .td-big-grid-scroll .td-big-grid-post-1, .td-big-grid-scroll .td-big-grid-post-2, .td-big-grid-scroll .td-big-grid-post-3, .td-big-grid-scroll .td-big-grid-post-4 {
width: 99% !important;
margin-left: 0 !important;
}
.td_block_big_grid_1 .td-small-thumb .entry-thumb {
width: 99% !important;
}
.td_block_big_grid_1 .td-big-grid-post-1 {
margin-bottom: 3px !important;
}
.td_block_big_grid_1 .td-big-grid-post-2 {
margin-bottom: 3px !important;
}
.td_block_big_grid_1 .td-big-grid-post-3 {
margin-bottom: 3px !important;
}
.td_block_big_grid_1 .td-big-grid-post-4 {
margin-bottom: 3px !important;
}
.td_block_big_grid_1 .td-big-grid-post-2 {
margin-right: 1px !important;
}
.td_block_big_grid_1 .td-big-grid-post.td-small-thumb .td-big-grid-meta .entry-title {
font-size: 14px;
}
}
and as a result ı have this 
To have all of the on the same line vertically and same height
How i can do that?
And also this responsive style doesnt work on nexus 4, galaxy note3 an don my mobile meizu mx4 pro.
Hi,
You have to use 100% width why you use 99% ?
Also if you want to set the same height for the first thumb, you have to use the browser inspector tool to target it – http://screencast.com/t/lMBDOdeWa
.td_block_big_grid_1 .td-big-thumb .td-module-thumb {
height: 170px;
}
Thanks!
Thank you very much. It woked great. But still i do not understand why it doesnt work on my meizu mx 4 pro.
Hi,
Unfortunately we don’t have a meizu mx 4 pro phone to test on. You have to play with the css parameters until you obtain the desired effect. I suspect that this phone has a different screen resolution or uses a custom browser and the result may be different compared to the other phones.
Thanks!
